4.2 Components and Props – The Building Blocks of React

Hey little coder! 👋
In our last React session, we talked about what React is and why it’s amazing.
Now let’s dive deeper into the real heroes of React: components and props. 🦸‍♂️

These are like the bricks and glue that hold everything together in a React app.

🧩 What Are Components?

Think of components as tiny machines 🛠 that you build once and use everywhere.

Like how you use a LEGO block to make different houses. 🧱

In React, we have two main types of components:

🧠 Functional Components (The Modern Way)

These are simple functions that return JSX.

✅ Example:

jsxCopyEditfunction Welcome() {
  return <h2>Hi, I’m a functional component! 👋</h2>;
}

Then render it like this:

jsxCopyEditReactDOM.render(<Welcome />, document.getElementById("root"));

Functional components are lightweight, easy to read, and perfect for beginners.

🧙‍♂️ Class Components (Old School)

Still useful for legacy apps, but less common today.

⚠️ Slightly complex example:

jsxCopyEditclass Welcome extends React.Component {
  render() {
    return <h2>Hello from a class component! 🧙‍♂️</h2>;
  }
}

Use them when you need more control, like managing complex state (though we now use hooks instead in functional components).

🎁 What are Props?

Props (short for properties) are how you pass data between components.

Let’s say you have a Greeting component and want it to show different names.

🤔 Example:

jsxCopyEditfunction Greeting(props) {
  return <h3>Hello, {props.name}! 😊</h3>;
}

Now use it like this:

jsxCopyEdit<Greeting name="Vikas" />
<Greeting name="Ananya" />
<Greeting name="Web Codder Fan" />

✅ This is called component reusability.
✅ You just used the same component 3 times with different data!

📦 Visual: How Props Work

A parent passes data ➡️ child component receives it as props

🧒 Children in React

Sometimes, you want to pass whole elements inside a component.
That’s where children come in.

Example:

jsxCopyEditfunction Wrapper(props) {
  return <div className="box">{props.children}</div>;
}

<Wrapper>
  <p>This is inside the box! 📦</p>
</Wrapper>

Here, props.children means “whatever you put between the opening and closing tags.”

🌱 Default Props

Sometimes, you want to show default content if nothing is passed.

Example:

jsxCopyEditfunction Hello(props) {
  return <p>Hello, {props.name}!</p>;
}

Hello.defaultProps = {
  name: "Stranger",
};

So if you use <Hello /> without passing a name, it shows:
👉 Hello, Stranger!

🛠 Breaking UI into Reusable Components

Big apps are hard to manage if everything is in one file. 😓
So let’s break them into smaller pieces.

Example: Building a profile card

jsxCopyEditfunction Avatar(props) {
  return <img src={props.url} alt="Profile" />;
}

function Name(props) {
  return <h4>{props.name}</h4>;
}

function ProfileCard() {
  return (
    <div className="card">
      <Avatar url="https://via.placeholder.com/150" />
      <Name name="Vikas Sankhla" />
    </div>
  );
}

🎉 Now each part (Avatar and Name) is its own component.
Easy to maintain and reuse in other parts of your app.

⚖️ Props vs State (Quick Preview)

Let’s keep this simple:

We’ll learn state more in the next part 😉

🧠 Key Concepts Recap

🧠 Mind Map: Components + Props

Visually showing: App → Parent → Child → Props → JSX → Reuse

🙌 Let’s Keep Learning Together!

If you’re loving this React series, don’t forget to support Web Codder! 🎉

• 📺 YouTube: Subscribe Now
• 📸 Instagram: @web_codder_official
• 💬 WhatsApp Community: Join here

Your support keeps this free content coming! 🙏

👋 Final Words

React becomes easier once you understand components and props.
They’re the LEGO blocks 🧱 of your app — build small, combine big.

I’m Vikas Sankhla from Web Codder — your tech buddy!
Until next time, keep building, keep breaking (code only 😄), and stay curious.