React Components – Reusable Building Blocks

In React, components are the foundation of everything you build. A component is just a JavaScript function that returns JSX.

---

🧠 Why Use Components?

• They help break your UI into small pieces.
• Each component is independent and reusable.
• Easier to manage, debug, and test.

---

🧩 3.1 Functional Components

Here’s a basic component:

function Welcome() {
  return <h2>Hello, I'm a component!</h2>;
}

To use it inside your App component:

function App() {
  return (
    <div>
      <h1>Main App</h1>
      <Welcome />
    </div>
  );
}

✅ Now you’ve created and used a custom component.

---

🔢 3.2 Component Example with Props

Props = Input Data for Components

You can pass data to components using props (short for “properties”).

Example:

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

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

🔍 What’s Happening Here?

• Greeting is a component that accepts props.
• You use it like a custom HTML tag: <Greeting name="Alice" />.
• Inside Greeting, you access that value via props.name.

Keep Learning 🙂