Definition of a Component

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...