Why Exporting and importing components in React? - Purpose & Use Cases

The Big Idea

What if you could change one piece of code and see it update everywhere instantly?

The Scenario

Imagine building a website where you copy and paste the same button code everywhere instead of reusing it.

Every time you want to change the button style, you must find and update each copy manually.

The Problem

Manually copying code leads to mistakes and inconsistencies.

It wastes time and makes your project hard to maintain as it grows.

The Solution

Exporting and importing components lets you write code once and reuse it everywhere.

When you update the component, all places using it update automatically.

Before vs After

✗ Before

const button = '<button>Click me</button>';
// copy this string everywhere

✓ After

export function Button() { return <button>Click me</button>; }

// In another file
import { Button } from './Button';

What It Enables

This makes your code cleaner, easier to update, and helps you build bigger apps faster.

Real Life Example

Think of a website with many pages all using the same header and footer components.

Exporting and importing lets you keep these consistent and update them in one place.

Key Takeaways

Copy-pasting code is slow and error-prone.

Export/import lets you reuse components easily.

Updating one component updates all its uses automatically.