Component Reusability in React

Write code once, use it everywhere. Learn to build powerful, flexible, and maintainable UIs with React's core principle.

Welcome! Let's learn to write code once and use it everywhere. This is the 'Don't Repeat Yourself' or DRY principle.

// Bad: Repetitive Code
<button className="btn-blue">Save</button>
<button className="btn-blue">Cancel</button>

What is a Reusable Component? (The DRY Principle)

The core idea is the DRY principle: Don't Repeat Yourself. Instead of writing the same UI code in multiple places, you create a single, reusable component. This makes your code cleaner, easier to debug, and simpler to update.

Customization with Props

Props (short for properties) are how you make components flexible. They are like arguments to a function. By passing different props, you can change a component's text, styles, or behavior without changing its internal code. For example, <Button color="blue" /> and <Button color="red" /> can render two visually distinct buttons from the same component.

The Power of `children` for Flexible Content

The `children` prop is a special prop that lets you pass components or JSX directly inside another component's tags. This is perfect for generic "box" or "wrapper" components like cards, modals, or layouts. Whatever you put between <Card> and </Card> becomes available as `props.children` inside the `Card` component.

The Result: Consistent, Efficient, and Maintainable UI

Mastering reusability leads to consistency (all your buttons look and feel the same), efficiency (build complex UIs from simple blocks), and maintainability (fix a bug in one place, and it's fixed everywhere the component is used).

Practice Zone

Interactive Test 1: Match Props to Definitions

Match the component's usage (invocation) with its definition.

Arrastra en el orden correspondiente.

Arrastra las opciones:

imageUrl

children

Completa el código:

function UserAvatar({ ______ }) { ... }

function Alert({ ______ }) { ... }

<UserAvatar imageUrl="..." />
<Alert>Error message</Alert>

Unlock with Premium

Interactive Test 2: Complete the Card Component

Rellena los huecos en cada casilla.

function Card({  }) {
  return (
    <div className="card">
      <h2>{title}</h2>
      <div className="content">
        }}
      </div>
    </div>
  )
}

Unlock with Premium

Practice Example: Code Editor

Create a reusable `UserProfile` component that accepts `name` (string) and `status` (string) as props and displays them.

Enunciado:

* Escribe el código a continuación. Los caracteres correctos se mostrarán en verde y los incorrectos en rojo.

function UserProfile({ name, status }) {
  return (
    <div>
      <h4>{name}</h4>
      <p>Status: {status}</p>
    </div>
  );
}

Unlock with Premium

Knowledge Check

What is the primary benefit of making components reusable?

Unlock with Premium

Reusability in Practice

Reusable components are the foundation of any scalable React application. Here’s how they integrate with other core React concepts to create powerful user interfaces.

1. Building Dynamic Lists

Instead of writing list item markup directly inside a `.map()` function, create a dedicated `ListItem` component. This keeps your list-rendering logic clean and allows each item to have its own complex structure and style.

// ListItem.js
function ListItem({ user }) {
  return <li>{user.name}</li>;
}

// UserList.js
{users.map(user => 
  <ListItem key={user.id} user={user} />
)}

Alice
Bob
Charlie

2. Creating a Design System

A design system is a collection of reusable components that can be shared across an organization. By creating generic `Button`, `Input`, and `Card` components, you ensure a consistent look and feel across your entire application suite.

// App.js
<Card title="Welcome">
  <p>User details...</p>
  <Button>Get Started</Button>
</Card>

Welcome

User details...

3. Abstracting Complex Logic

You can encapsulate complex state logic or data fetching inside a component. For instance, a `UserProfile` component could be responsible for fetching its own data, showing a loading state, and then displaying the result, all while only requiring an `id` prop.

// Before
const { data, isLoading } = useFetchUser(1);
if (isLoading) return <p>Loading...</p>
return <p>{data.name}</p>

// After
<UserProfile userId={1} />

John Doe

Practical Takeaway: Think in components. Whenever you find yourself copying and pasting JSX, it's a sign that you should create a new, reusable component.

Component Reusability Glossary

Component: An independent, reusable piece of the UI. In React, components are JavaScript functions or classes that return a React element (JSX).
Props (Properties): Read-only inputs passed to a component to customize its behavior and output. They are passed as attributes in JSX and received as an object in the component function.
children: A special prop that contains the content passed between a component's opening and closing tags. It allows for flexible nesting and composition.
Composition: The practice of building complex components by combining smaller, simpler ones. This is a fundamental pattern in React, often facilitated by the `children` prop.
DRY (Don't Repeat Yourself): A principle of software development aimed at reducing repetition of code. Creating reusable components is the primary way to achieve DRY in React.