Understanding React Components and Props

📌 Introduction

React is all about components.
Think of components as Lego blocks – small, reusable pieces that can be combined to build a big structure (your app).

Each component does one thing:

• Display UI

• Handle some logic

• Or both

To make apps flexible, React lets components communicate with each other using props (short for properties).

In this blog, we’ll break down:

• What are components?

• How props allow parent-to-child communication

• How to use children inside components

• Default props

---

🧱 1. What Are React Components?

A component is just a function (or class) that returns UI.

Example:

function Welcome() {
  return <h1>Hello, React!</h1>;
}

Here:

• Welcome is a component.

• It returns a heading element.

• You can reuse <Welcome /> anywhere in your app.

👉 Components are like Lego blocks – you can use the same block multiple times to build bigger structures.

---

📬 2. Passing Data with Props

Props are inputs to a component.
They let us send data from parent → child.

Example: Greeting with a Name

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

export default function App() {
  return (
    <div>
      <Greeting name="Alice" />
      <Greeting name="Bob" />
    </div>
  );
}

Output:

Hello, Alice!
Hello, Bob!

Here:

• Greeting is the child component.

• App is the parent.

• The parent passes name as a prop.

• The child uses props.name to display it.

🧒 3. Using children in Components

React provides a special prop called children.
This allows components to wrap other elements inside them.

Example: Card Component

function Card({ children }) {
  return (
    <div style={{ border: "1px solid black", padding: "10px" }}>
      {children}
    </div>
  );
}

export default function App() {
  return (
    <Card>
      <h2>This is inside the card!</h2>
      <p>Children props let us insert content dynamically.</p>
    </Card>
  );
}

Output:
A bordered card that contains both <h2> and <p> text.

👉 children makes components reusable for different content.

⚙️ 4. Default Props

What if a parent doesn’t pass a prop?
We can set default props.

Example:

function Button({ label }) {
  return <button>{label}</button>;
}

Button.defaultProps = {
  label: "Click Me",
};

export default function App() {
  return (
    <div>
      <Button label="Submit" />
      <Button /> {/* will use default: "Click Me" */}
    </div>
  );
}

Output:

• First button → "Submit"

• Second button → "Click Me" (from default props)

---

🚀 Conclusion

• Components = Lego blocks of React apps.

• Props = way to pass data from parent → child.

• children = allows nesting content inside components.

• Default props = fallback values.

With these, you can start building reusable, flexible UI components that adapt to different use cases.