The Road to React: The One with Class Components/

...

/

Introduction to JSX

Introduction to JSX

Get to know the basics of JSX and its syntax in React. You will also learn more about the App component and where to use it.

We'll cover the following...

As mentioned before, create-react-app has already bootstrapped a basic application for you, and all files come with their own default implementations.

For now, the only file we will modify is the src/App.js file.

Press + to interact
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}
export default App;

Don’t worry if you’re confused by the import/export statements and class declaration now. These are features of JavaScript ES6 we will revisit in a later chapter.

In the file you should see a React ES6 class component with the name App. This is a component declaration. After you have declared a component, you can use it as an element anywhere in your application. It will produce an instance of your component or, in other ...

Create a free account to view this lesson.

By signing up, you agree to Educative's Terms of Service and Privacy Policy