Search⌘ K
Home
Courses
The Road to React: The One with Class Components

Introduction to JSX

Explore the fundamentals of JSX, including how to declare and instantiate React class components and render HTML mixed with JavaScript. Understand the differences between components, instances, and elements, and practice defining variables and rendering them in JSX to build interactive React apps.

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.

Javascript (babel-node)
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 words, ...