🧱 React Components: Building Blocks of Your UI

The Big Idea: Think of React components like LEGO blocks. Each block is small, colorful, and does one thing—but when you snap them together, you can build castles, spaceships, or anything you imagine!

🎯 What You’ll Learn

• ✅ Function components (your building blocks)
• ✅ Component composition (snapping blocks together)
• ✅ Component hierarchy (big blocks contain small blocks)
• ✅ UI as a tree (the family tree of your app)
• ✅ Thinking in React (the secret recipe)

🏠 The LEGO Analogy

Imagine you want to build a toy house:

• You don’t carve it from one giant block of wood
• You use many small LEGO pieces
• Each piece has a purpose (doors, windows, walls)
• You snap them together to make something amazing!

React works the same way!

1️⃣ Function Components: Your Building Blocks

What Is a Function Component?

A function component is a tiny machine that:

1. Takes some information (called “props”)
2. Spits out what to show on screen

It’s just a JavaScript function that returns HTML-like code!

Simple Example

function Greeting() {
  return <h1>Hello, Friend!</h1>;
}

That’s it! This tiny function shows “Hello, Friend!” on screen.

With Props (Information)

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

// Using it:
<Greeting name="Luna" />
// Shows: Hello, Luna!

Think of it like:

• Props = the instructions you give your LEGO piece
• “Make this window BLUE” or “Make this door RED”

Real Life Example

function Button(props) {
  return (
    <button style={{color: props.color}}>
      {props.label}
    </button>
  );
}

// Using it:
<Button color="blue" label="Click Me" />

2️⃣ Component Composition: Snapping Blocks Together

The Magic of Putting Things Inside Things

Remember how a LEGO house has:

• A roof (made of roof pieces)
• Walls (made of wall pieces)
• A door (one special piece)

In React, you put components inside other components!

Example: Building a Card

function Avatar(props) {
  return <img src={props.image} />;
}

function Title(props) {
  return <h2>{props.text}</h2>;
}

function Card(props) {
  return (
    <div className="card">
      <Avatar image={props.photo} />
      <Title text={props.name} />
    </div>
  );
}

See what happened?

• Card contains Avatar AND Title
• Each piece does ONE thing well
• Together they make something bigger!

Why This Is Amazing

3️⃣ Component Hierarchy: The Family Tree

Parent and Child Components

Just like families have parents and children, components do too!

App (Great-grandparent)
  └── Page (Grandparent)
        └── Card (Parent)
              ├── Avatar (Child)
              └── Title (Child)

The Rules:

• 🔵 Parents contain children
• 🔵 Parents pass props down to children
• 🔵 Children can’t change their parents

Example: A Simple App

function App() {
  return (
    <Page>
      <Header />
      <Content />
      <Footer />
    </Page>
  );
}

graph TD
    A[App] --> B[Page]
    B --> C[Header]
    B --> D[Content]
    B --> E[Footer]

4️⃣ UI as a Tree: The Big Picture

Your Whole App Is a Tree!

Every React app looks like an upside-down tree:

• One root at the top (usually App)
• Branches going down (pages, sections)
• Leaves at the bottom (buttons, text, images)

graph TD
    A[🌳 App] --> B[📄 HomePage]
    A --> C[📄 AboutPage]
    B --> D[🎨 Header]
    B --> E[📝 MainContent]
    B --> F[👣 Footer]
    E --> G[🃏 Card]
    E --> H[🃏 Card]
    G --> I[🖼️ Avatar]
    G --> J[📌 Title]

Why Trees?

5️⃣ Thinking in React: The Secret Recipe

The 5-Step Recipe

When you see ANY design, follow these steps:

Step 1: Break It Into Boxes 📦

Look at your design and draw boxes around each piece.

┌─────────────────────────┐
│  ┌─────────────────┐    │
│  │     Header      │    │
│  └─────────────────┘    │
│  ┌─────────────────┐    │
│  │   SearchBar     │    │
│  └─────────────────┘    │
│  ┌───┐ ┌───┐ ┌───┐      │
│  │ 🃏│ │ 🃏│ │ 🃏│      │
│  └───┘ └───┘ └───┘      │
└─────────────────────────┘

Step 2: Name Each Box

Give each box a clear name:

• Header
• SearchBar
• ProductCard
• ProductList

Step 3: Build the Tree

Arrange them parent → child:

App
  └── Header
  └── SearchBar
  └── ProductList
        └── ProductCard
        └── ProductCard
        └── ProductCard

Step 4: Build Tiny Pieces First

Start with the smallest pieces (leaves of the tree):

function ProductCard(props) {
  return (
    <div className="card">
      <img src={props.image} />
      <h3>{props.name}</h3>
      <p>${props.price}</p>
    </div>
  );
}

Step 5: Combine Into Bigger Pieces

Now snap them together:

function ProductList(props) {
  return (
    <div className="list">
      {props.products.map(item =>
        <ProductCard
          key={item.id}
          name={item.name}
          price={item.price}
          image={item.image}
        />
      )}
    </div>
  );
}

🎮 Real World Example: A Chat App

Let’s “Think in React” for a chat app!

Step 1: See the Boxes

┌─────────────────────────┐
│  ChatApp                │
│  ┌────────────────────┐ │
│  │ MessageList        │ │
│  │  ┌───────────────┐ │ │
│  │  │ Message       │ │ │
│  │  │ ┌────┐ ┌────┐ │ │ │
│  │  │ │Avatar│Text│ │ │ │
│  │  │ └────┘ └────┘ │ │ │
│  │  └───────────────┘ │ │
│  └────────────────────┘ │
│  ┌────────────────────┐ │
│  │ MessageInput       │ │
│  └────────────────────┘ │
└─────────────────────────┘

Step 2: The Component Tree

graph TD
    A[ChatApp] --> B[MessageList]
    A --> C[MessageInput]
    B --> D[Message]
    B --> E[Message]
    D --> F[Avatar]
    D --> G[MessageText]

Step 3: Build It!

function Avatar(props) {
  return <img src={props.src} />;
}

function MessageText(props) {
  return <p>{props.text}</p>;
}

function Message(props) {
  return (
    <div className="message">
      <Avatar src={props.avatar} />
      <MessageText text={props.text} />
    </div>
  );
}

function MessageList(props) {
  return (
    <div className="messages">
      {props.messages.map(msg =>
        <Message
          key={msg.id}
          avatar={msg.avatar}
          text={msg.text}
        />
      )}
    </div>
  );
}

function ChatApp() {
  return (
    <div className="chat">
      <MessageList messages={allMessages} />
      <MessageInput />
    </div>
  );
}

🧠 Quick Summary

🚀 You Did It!

You now understand the foundation of React:

1. ✅ Components are LEGO blocks
2. ✅ Snap them together (composition)
3. ✅ Arrange in parent-child (hierarchy)
4. ✅ See the whole tree (UI structure)
5. ✅ Follow the 5-step recipe (Thinking in React)

Next time you see ANY website or app, you’ll start seeing the component tree everywhere! 🌳

💡 Remember: Every amazing React app started as a simple tree of tiny components. Start small, think in blocks, and you’ll build incredible things!