As defined in the previous chapter, components are the fundamental building blocks of React. Virtually any visual item in a user interface can be a component. From a formal point of view, we would say that a React component is a piece of JavaScript code defining a portion of a user interface.

Consider the following code in a file:

import React from 'react';

class Catalog extends React.Component {
  render() {
    return <div><h2>Catalog</h2></div>;
  }
}

export default Catalog;

This is an ECMAScript 2015 module, defining a basic React component.

It imports the React namespace from the react module and defines the Catalog class by extending the React.Component class. The module exports the Catalog class as a default export.

The interesting part of this definition is the implementation of the render() method.

The render() method defines the visual part of the component. It may execute any JavaScript code, and it should return a markup expression defining its visual output. The presence of the render() method is mandatory for React components. In our example, the render() method returns the following markup:

<div><h2>Catalog</h2></div>

It looks like HTML; although it uses similar syntax, it defines plain objects called elements. React elements are similar to Document Object Model (DOM) elements, but are lighter and more efficient. So, React components generate a set of React elements that will be mapped to DOM elements by the library's engine. This set of React elements is called the Virtual DOM, a lightweight representation of the browser's DOM. React takes care of updating the DOM to match the Virtual DOM, only when it is strictly necessary. This approach allows React to have very high performance when rendering user interfaces.

The render() method must comply with a few constraints:

• It is mandatory; that is, every React component must implement it
• It must return one React element; that is, a single markup item with any nested elements
• It should be a pure function; that is, it should not change the internal state of the component (we will discuss this topic in further detail in the next section)
• It should not directly interact with the browser; that is, it shouldn't contain statements that try to access the DOM

Once we have defined our component, we can use it as a React element inside any other React component. For example, we know that the React application itself is already a React component. Let's recall the code generated by the create-react-app tool in the App.js file:

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;

We can see that this code has the same structure as the Catalog component that we defined. Let's change this code in order to use our component inside of the App component:

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

class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <h1 className="App-title">The Catalog App</h1>
        </header>
        <Catalog />
      </div>
    );
  }
}

export default App;

We simplified the code by removing some of the automatically generated markup. We then imported the Catalog component, and put the <Catalog /> element inside the <div> element returned by the app's render() method.