⚛️ Component Composition

? Quick Overview

Component Composition is the process of building complex user interfaces by combining multiple smaller, reusable components together.

It follows the principle of "divide and conquer" — breaking a large UI into smaller, manageable parts that are easier to build, reuse, test, and maintain.

In React, components can contain other components, just like HTML tags can be nested inside one another.

? Key idea: Build UIs as a tree of small components

? Key Concepts of Component Composition

Parent and Child Components: A parent component can render one or more child components.
Nesting: Components can be nested multiple levels deep to build structured layouts.
Reusability: Small components can be reused across different parts of the app.
props.children: Special prop used to pass JSX elements between opening and closing tags of a component.
Composition over Inheritance: React prefers combining components instead of extending them via inheritance.

? Syntax & Theory

Think of a React app as a tree of components:

Each component is responsible for a small piece of the UI.
Components can render other components inside their JSX.
Data flows from parent to child using props.

A typical composition chain looks like:

App ⟶ Layout ⟶ Navbar, Main, Footer ⟶ (smaller components inside)

? Example 1 — Basic Component Composition

Here, the App component is composed of two smaller components: Header and Footer.

? View Code Example

// Composing Header and Footer inside the main App component
function Header() {
  return <h1>Welcome to My Website</h1>;
}

function Footer() {
  return <p>© 2025 React Learning Portal</p>;
}

function App() {
  return (
    <div>
      <Header />
      <p>This is the main content area.</p>
      <Footer />
    </div>
  );
}

?️ What This Renders

The App component shows:

A heading: Welcome to My Website from Header.
A paragraph: This is the main content area.
A footer line: © 2025 React Learning Portal from Footer.

If you reuse Header or Footer elsewhere, you don’t need to duplicate markup — just compose them where needed.

?️ Example 2 — Nested Component Composition

Components can be nested several levels deep. Below, Navbar composes Logo and Menu to form a proper navigation bar.

? View Code Example

// Navbar is composed of Logo and Menu components
function Navbar() {
  return (
    <nav>
      <Logo />
      <Menu />
    </nav>
  );
}

function Logo() {
  return <h2>MyBrand</h2>;
}

function Menu() {
  return (
    <ul>
      <li>Home</li>
      <li>About</li>
      <li>Contact</li>
    </ul>
  );
}

? What This Renders

The UI will look like a simple navigation bar:

Brand title from Logo
Menu list (Home, About, Contact) from Menu

You can place <Navbar /> at the top of your layout, and reuse it across pages.

? Example 3 — Passing Components as Children

You can pass elements and components as children using the special props.children property. This is powerful for building flexible layout components like cards, modals, and wrappers.

? View Code Example

// Card wraps any JSX passed between its opening and closing tags
function Card(props) {
  return (
    <div className="card">
      {props.children}
    </div>
  );
}

function App() {
  return (
    <Card>
      <h3>React Composition</h3>
      <p>This content is passed as children.</p>
    </Card>
  );
}

? What This Renders

The Card component does not care what its content is — it simply wraps props.children in a styled container.

The output card will contain a heading (React Composition) and a paragraph (This content is passed as children.) inside the same visual box.

⚖️ Composition vs Inheritance

React strongly favors composition over inheritance. Instead of extending components using class inheritance (like in traditional OOP), React encourages combining smaller components together.

✅ Easier to reuse UI pieces.
✅ Keeps component logic simple and modular.
✅ Promotes clean separation of structure and behavior.
✅ Reduces tight coupling between components.

? Benefits of Component Composition

? Reusability: Small components can be reused across the app.
? Maintainability: Easy to debug and update parts of the UI independently.
? Flexibility: Components can be nested and customized as needed.
? Scalability: Ideal for building large, modular applications.

? Tips & Best Practices

Start by identifying reusable UI parts before writing code.
Use props.children for flexible layouts such as cards, modals, and wrappers.
Keep component nesting meaningful — avoid overly deep hierarchies.
Think of components like LEGO blocks — each should fit cleanly with others.
Prefer composition to inheritance when sharing behavior or UI.

? Try It Yourself

Create a Layout component that includes Header, Main, and Footer inside it.
Use props.children to insert dynamic content in the Main section.
Create a reusable Card component that displays custom content passed as children.
Experiment by nesting multiple Card components within Layout.

Goal: Learn how to combine multiple components together, pass elements as children, and follow React’s composition-first approach to building scalable and reusable UIs.

? Starter Practice Snippet

// Practice: compose a simple page layout using reusable pieces
function Layout(props) {
  return (
    <div>
      <Header />
      <main>{props.children}</main>
      <Footer />
    </div>
  );
}

function App() {
  return (
    <Layout>
      <Card>
        <h2>Hello Composition</h2>
        <p>You can nest components as deeply as your UI needs.</p>
      </Card>
    </Layout>
  );
}