Dev

By Carlos Santana on
Reading time: 3 minutes

HomeComponent-ILhHd.png

In this post I'll show you how to create your first React application, also you will learn about the React components. The component is the essential part of React. With React you can build interactive and reusable components. 

First, we need to create our React application using create-react-app. Once that is done, you can proceed to create your first React component.

Before you install create-react-app, remember that you need to download and install Node.js from www.nodejs.org. You can install it for Mac, Linux or Windows.

Install create-react-app globally by typing this command in your terminal:

npm install -g create-react-app

Or you can use a shortcut like this:

npm i -g create-react-app

Creating our first React application

I guess at this point you're excited to create your first React application. To create it you need to run the following command in your terminal:

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

Then you can go to the new application with the command: cd my-first-react-app and start it with npm start. If everything goes well the application should be running at http://localhost:3000.

Now let's 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;
File: src/Home.js

You may 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>;
  } 
}

I prefer to export it at the end of the file, but some people like to do it in this way, so depends on your preferences.

Now that we have created our first component, we need to render it. You have 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" />
          <p>
            Edit <code>src/App.js</code> and save to reload.
          </p>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
        </header>
      </div>
    );
  }
}

export default App;

File: src/App.js

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:

Only members can see all the codes
You can Login or Sign Up

File: src/App.js

Now you should see something like this:

HomeComponent-ILhHd.png

As you can see, we imported React and Component from React library. You probably noticed that we are not using the React object directly. To write code in JSX, you need to import React. JSX is similar to HTML, but with a few differences. In the following posts, you will learn more about JSX.

This component is known as "class component" (React.Component), and there are three types of components: 

  • Class components (React.Component)
  • Pure components (React.PureComponent)
  • Functional components (Stateless components)

There's more

In our example, we created the Home.js file, and our component's name is Home.

All React components names should start with the first letter capitalized in both sides: the file and the class name. To begin with, it might feel uncomfortable for you to see this, but this is a best practice in React.

Some of the main differences between JSX and HTML are the attributes names. You may have noticed that we are using className instead of class. This is the only special attribute name. Others that are two words separated by a dash need to be converted to camelCase, for example, onClick, srcSet, or tabIndex. The aria-* and data-* types of attributes still uses the same nomenclature (data-foo and aria-label).

avatarLeave a comment

Your comment

Only members can comment. You can Login or Sign Up