This is the second tutorial of my React tutorial series. After creating our first React application, now we’re ready to create our first React Component.

Let’s get started by opening our application folder on our IDE. I will be using JetBrains WebStorm as IDE, but it doesn’t matter which one you are using, I also like using Atom on my JavaScript applications.

Your project structure should be looking similar to the one in the below image.

Open your terminal and navigate into your project folder. Start your project if you haven’t yet.

npm start

When you start your application you will see a Welcome to React page on your browser, if it’s not automatically opened you can navigate to http://localhost:3000 on your browser.

Now create new JavaScript and CSS file under src folder and name it FirstComponent.js and FirstComponent.css.

Your first React component will display a simple text on the screen, codes should be looking as below.

import React, { Component } from 'react';
import './FirstComponent.css';

class FirstComponent extends Component {
  render() {
    return (
      <div className="FirstComponent">
        <p>This is my first React component</p>
      </div>
    );
  }
}

export default FirstComponent;

.FirstComponent {
  font-size: 1.5em;
  font-weight: bold;
}

And then we should import and place our component into App.js file to display it on the page.

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

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>
        <FirstComponent />
      </div>
    );
  }
}

export default App;

Now you should be seeing your new component display on the page at the bottom of everything.

Congratulations! You successfully created your first React component.