Creating a react component

by

Creating a React Component

Learn about React Pure Components and how to organize them in this two-part series by Carlos Santana Roldan, the founder of Codejobs and a React Technical Lead at Disney ABC Television Group.

React is a JavaScript library (MIT License) made by Facebook to create interactive UIs. It’s used to create dynamic and reusable components. The most powerful thing about React is that it can be used in the client, server, mobile applications, and even VR applications.

In the modern web, you need to manipulate the DOM constantly; the problem is that doing this a lot may affect the performance of your application seriously. React uses a Virtual DOM, which means that all updates occur in memory (this is faster than manipulating the real DOM directly). The learning curve of React is short in comparison to other JavaScript frameworks such as Angular, Vue, or Backbone, mainly because the React code is mostly written with modern JavaScript (classes, arrow functions, string templates, and so on) and does not have too many patterns used to write code, like Dependency Injection or a template system, like in Angular.

Companies such as Airbnb, Microsoft, Netflix, Disney, Dropbox, Twitter, PayPal, Salesforce, Tesla, and Uber use React extensively in their projects. In the first part of the series, you’ll learn how to create your React component.

Creating the React component

The component is the essential part of React. With React, you can build interactive and reusable components. First, you need to create your React application using create-react-app. Once that is done, you can proceed to create your React component.

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

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

npm install -g create-react-app

Alternatively, you can use a shortcut:

npm i -g create-react-app

How to do it…

Follow these steps to build your React application:

  1. Create your React application with the following command:

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

  1. Go to the new application with cd my-first-react-app and start it with npm start.
  2. The application should now be running at http://localhost:3000.
  3. 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;

export default Home;

File: src/Home.js

  1. You are exporting your 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>;
    }

}

File: src/Home.js

  1. Now that you have created the first component, you need to render it. So, you need to open the App.js file, import the Home component, and then add it to the render method of the App component. If you are opening this file for the first time, you’ll 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 'src/App.js' and save to reload.
             </p>
             </div>
       );

    }
}

export default App;

File: src/App.js

  1. Now change this code a bit. You need to import your Home component and then add it to JSX. You also need to replace the <p> element with your 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;

File: src/App.js

How it works…

You imported React and Component from the React library. You do not use the React object directly. To write code in JSX, you need to import React. JSX is similar to HTML but with a few differences.

The class component (React.Component) are of different types: pure components (React.PureComponent) and functional components, also known as stateless components.

If you run the application, you should see something like this:

There’s more…

In this example, you created the Home.js file, and your component Home. Note that all React component names should start with the first letter capitalized in both the file and class name. To begin with, it might feel uncomfortable for you to see this, but this is the best practice in React.

Some of the main differences between JSX and HTML are the attributes names. You have also used className instead of class. This is the only special attribute name. Others, which are two words separated by a dash, need to be converted to camelCase, for example, onClick, srcSet, and tabIndex. The aria-* and data-* attributes still use the same nomenclature (data-something and aria-label).

Now that you have learned how to create you React component, you can learn how to organize your React application in Part 2 of this article.

If you found this article interesting, you can explore Carlos Santana Roldan’s React Cookbook to be on the road to becoming a React expert. React Cookbook has over 66 hands-on recipes that cover UI development, animations, component architecture, routing, databases, testing, and debugging with React.

Share your thoughts