How to do it...

Let's build our first React application by following these steps:

1. Create our React application with the following command:

 create-react-app my-first-react-app

2. Go to the new application with cd my-first-react-app and start it with npm start.
3. The application should now be running at http://localhost:3000.
4. Create a new file called Home.js inside your src folder:

import React, { Component } from 'react';

class Home extends Component {
  render() {
    return <h1>I'm Home Component</h1>;
  }
}

export default Home;

5. You may have noticed that we are exporting our class component at the end of the file, but it's fine to export it directly on the class declaration, like this:

    import React, { Component } from 'react';
    export default class Home extends Component {
      render() {
        return <h1>I'm Home Component</h1>;
      }
    }

6. Now that we have created the first component, we need to render it. So we need to open the App.js file, import the Home component, and then add it to the render method of the App component. If we are opening this file for the first time, we will probably see a code like this:

    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;

7. Let's change this code a little bit. As I said before, we need to import our Home component and then add it to the JSX. We also need to replace the <p> element with our component, like this:

    import React, { Component } from 'react';
    import logo from './logo.svg';

    // We import our Home component here...
    import Home from './Home';
    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>
            {/* Here we add our Home component to be render it */}
            <Home />
          </div>
        );
      }
    }

    export default App;