Composing Components in React: Building Modular UIs

Introduction

In React, components are the building blocks of UI. Often, we need to reuse components in different parts of our application, and that's where composing components comes into play. Composing components means that we create a new component by combining existing components. In this article, we will explore how to compose components in React.

Code

In the example code, we have two components: ProductCard and ProductList. The ProductCard component is a smaller, reusable component that displays a single product. It takes in several props, such as image, title, description, and price, and uses them to display the product's information.

import React from 'react';

function ProductCard(props) {
  return (
    <div className="product-card">
      <img src={props.image} alt={props.title} />
      <div className="product-details">
        <h3 className="product-title">{props.title}</h3>
        <p className="product-description">{props.description}</p>
        <div className="product-price">{props.price}</div>
      </div>
    </div>
  );
}

function ProductList(props) {
  return (
    <div className="product-list">
      {props.products.map((product) => (
        <ProductCard key={product.id} {...product} />
      ))}
    </div>
  );
}

function App() {
  const products = [
    {
      id: 1,
      title: 'Product 1',
      description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed finibus ultrices lacus vel eleifend.',
      image: 'https://picsum.photos/id/1/200/300',
      price: '$29.99'
    },
    {
      id: 2,
      title: 'Product 2',
      description: 'Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.',
      image: 'https://picsum.photos/id/2/200/300',
      price: '$39.99'
    },
    {
      id: 3,
      title: 'Product 3',
      description: 'At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores.',
      image: 'https://picsum.photos/id/3/200/300',
      price: '$49.99'
    },
  ];

  return (
    <div>
      <h1>Shop Our Products</h1>
      <ProductList products={products} />
    </div>
  );
}

export default App;

The ProductList component is a higher-level component that composes multiple ProductCard components to display a list of products. It takes in an array of products as a prop and uses the map function to render a ProductCard component for each product in the array.

Finally, the App component is the top-level component that renders the ProductList component, passing in an array of products as a prop. This demonstrates how you can compose smaller components into larger, more complex components to build a complete user interface.

Replication

To replicate this code on your local machine, follow these steps:

1. Open your terminal and navigate to the directory where you want to create your React project.

2. Run the following command to create a new React project:

npx create-react-app my-app

1. Navigate to the project directory by running the following command:

cd my-app

1. Open the project in your preferred code editor.

2. Replace the contents of the App.js file with the code above.

3. Save the file and start the development server by running the following command:

npm start

1. Open your browser and navigate to http://localhost:3000 to see the rendered output of your React application.

Conclusion

Composing components in React allows us to reuse existing components and create more complex components by combining them. In this article, we explored how to compose components in React by creating a new component that combines two existing components. By following the steps outlined above, you should be able to replicate this code on your local machine and experiment with composing components to gain a better understanding of building reusable UI in React.