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

In previous examples, we defined the visual output returned by the render() method of a component by using an HTML-like markup expression. Let's see, for example, the definition of the Catalog component:

import React from 'react';
import './Catalog.css';

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

export default Catalog;

The markup expression is not using JavaScript syntax, but it is included inside of a JavaScript code snippet. Why do we mix HTML and JavaScript syntaxes? How is that possible?

Let's start by saying that the HTML-like language describing the React component's visual output is called JSX. This language extends JavaScript with XML expressions in order to simplify the creation of HTML elements within JavaScript code. You...

When defining React components, we can use them as the children of another component by using that component as a React element. We already saw this when we included the Catalog component inside of the App component, but let's analyze this composition further.

We will now see how to combine components in order to create new, complex components:

1. Open the src/ProductList.js file in the my-shop-03 folder
2. Follow the text until the end of the section

Let's consider the following component:

import React from 'react';
class ProductList extends React.Component {
  render() {
    return <ul>
      <li>
        <h3>Traditional Merlot&lt...

The ProductList component that we defined in the previous section is impractical. Let's take a look at it again:

import React from 'react';
import './ProductList.css';

class ProductList extends React.Component {
  render() {
    return <ul>
      <li>
        <h3>Traditional Merlot</h3>
        <p>A bottle of middle weight wine, lower in tannins (smoother), 
           with a more red-fruited flavor profile.</p>
      </li>
      <li>
        <h3>Classic Chianti</h3>
        <p>A medium-bodied wine characterized by a marvelous freshness with 
           a lingering, fruity finish</p>
      </li>
      <li>
        <h3>Chardonnay</h3>
        <p>A dry full-bodied white wine with spicy, bourbon-y notes in an 
           elegant bottle</p>
     ...

Components have the ability to store data that can change over time.

When a component shows data that can change over time, we want changes to be shown as soon as possible. For example, consider the ProductList component: it shows a list of products contained in the products array. If a new product is added to the array, we want it to be shown immediately. React provides a mechanism to support the automatic rendering of a component when data changes. Such a mechanism is based on the concept of state.

Again, consider the ProductList component:

import React from 'react';
import Product from './Product';

class ProductList extends React.Component {
  render() ...

In this chapter, we started to create React components and explored their basic features. In particular, we:

• Learned how to define a component as a class derived from React.Component, and how to import specific CSS styles
• Explored the syntax of JSX, which allows us to quickly define the graphical aspect of a component and use React components that were defined elsewhere
• Combined React components in order to build other components
• Used state management features so that React components automatically update their visual representation when data changes

In the next chapter, we will analyze how to manage user interaction with a React-based application; in other words, how to capture events and make a UI react to those events.