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</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>
      </li>
      <li>
        <h3>Brunello di Montalcino</h3>
        <p>A bottle red wine with exceptionally bold fruit flavors, 
           high tannin, and high acidity</p>
      </li>
    </ul>;
  }
}
export default ProductList;

This component defines a list of wines, names, and descriptions.

We want to integrate our Catalog component with the wine list. Since we have created the ProductList component, we can use it as a tag in the JSX markup of the Catalog component, as shown here:

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

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

export default Catalog;

As you can see, we simply imported the ProductList component in order to make it available inside the Catalog component's module, and we used the ProductList tag where we wanted the wine list to appear.

Run npm start to launch the application. The resulting page will look like this:

Tags corresponding to components must follow the case used in the class definition, and by convention, component class names use Pascal case, even though it is not required by React.

The ease of composing React components makes it very simple to create user interfaces, following the guidelines provided in the previous chapter. We can decompose a page layout into a hierarchical set of components, each one consisting of other components. This approach allows us to focus on the behavior of a single component, and promotes its reusability.