1. Introduction

1.1 Brief Explanation of the Tutorial's Goal

This tutorial aims to provide a comprehensive introduction to component composition and reusability in React. It will guide you to create reusable components and build complex UIs through component composition.

1.2 What the User Will Learn

By the end of this tutorial, you will be able to:

• Understand the concept of component composition and reusability
• Build reusable components
• Compose complex UIs using components

1.3 Prerequisites

You should have a basic understanding of:

• JavaScript (ES6)
• React basics (components, props, state)

2. Step-by-Step Guide

Component-based architecture is a dominant feature of the React library. It allows for significant reusability and helps in maintaining clean and DRY (Don't Repeat Yourself) code.

2.1 Component Reusability

In React, components can be reused across multiple parts of an application. This helps in keeping the codebase DRY and easier to maintain. However, it's important to ensure that the components are designed to be reusable from the start.

To make a component reusable, it should have a well-defined interface (props), and it should not be tightly coupled with other parts of the application.

2.2 Component Composition

Component composition is the practice of building more complex components by combining simpler ones. It's like building blocks where each block is a React component.

In React, there are two main ways to compose components:

• Containment: Some components don't know about their children ahead of time. This is common for components like Sidebar or Dialog that represent generic "boxes".

• Specialization: Sometimes we think about components as being "special cases" of other components. For example, we might say that a WelcomeDialog is a special case of Dialog.

3. Code Examples

3.1 Example 1: Button Component

Here's a simple example of a reusable Button component. This component can be used throughout the application with different labels and behaviors.

// Button.js
function Button({ label, onClick }) {
  return (
    <button onClick={onClick}>
      {label}
    </button>
  );
}

export default Button;

In the above example, the Button component receives label and onClick as props. This makes it reusable as you can pass different labels and behaviors to it.

3.2 Example 2: Sidebar Component

Here's an example of a Sidebar component that uses the concept of containment.

// Sidebar.js
function Sidebar({ children }) {
  return (
    <div className="sidebar">
      {children}
    </div>
  );
}

export default Sidebar;

In this example, Sidebar doesn't know about its children ahead of time. This makes it a generic component that can contain any React elements.

4. Summary

In this tutorial, you learned about component composition and reusability in React. You learned how to create reusable components and how to build complex UIs through component composition.

5. Practice Exercises

5.1 Exercise 1: Create a reusable Input Component

Create a reusable Input component. It should accept type, name, placeholder, and onChange as props.

5.2 Exercise 2: User Profile Component

Create a UserProfile component that uses the Input and Button components you created. The UserProfile component should contain inputs for "username" and "email" and a "Save" button.

Solutions

Solution 1: Input Component

// Input.js
function Input({ type, name, placeholder, onChange }) {
  return (
    <input 
      type={type}
      name={name}
      placeholder={placeholder}
      onChange={onChange}
    />
  );
}

export default Input;

Solution 2: User Profile Component

// UserProfile.js
import Input from './Input';
import Button from './Button';

function UserProfile() {
  return (
    <div>
      <Input type="text" name="username" placeholder="Username" onChange={/* Some function */} />
      <Input type="email" name="email" placeholder="Email" onChange={/* Some function */} />
      <Button label="Save" onClick={/* Some function */} />
    </div>
  );
}

export default UserProfile;

In the above solution, the UserProfile component is composed by using the Input and Button components.