Part 2: Components and Props – Building Blocks of React

Welcome back! In Part 1, we created our first React component and explored what makes React special.

Now it’s time to dig into the heart of React: components and props.

🧱 What Is a Component?

A component is a reusable, independent piece of UI. In React, your entire app is just a tree of components.

You’ve already seen one:

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

But components can also nest, meaning one component can use another inside itself.

✨ Creating Your First Custom Component

Let’s say we want to show a greeting.

`Greeting.jsx`

function Greeting() {
  return <p>Welcome to my React app!</p>;
}

export default Greeting;

Now use it inside App.jsx:

`App.jsx`

import Greeting from './Greeting';

function App() {
  return (
    <div>
      <h1>Hello, React!</h1>
      <Greeting />
    </div>
  );
}

export default App;

✅ That’s it! You’ve now created and used a custom component.

📦 What Are Props?

Props (short for properties) are how we pass data from a parent component to a child.

Think of props as function arguments but for components.

🧪 Example: Passing a Name

Let’s improve the Greeting component so it can greet anyone.

`Greeting.jsx`

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

export default Greeting;

Now pass a name from App.jsx:

import Greeting from './Greeting';

function App() {
  return (
    <div>
      <h1>Hello, React!</h1>
      <Greeting name="Alice" />
    </div>
  );
}

export default App;

🗣️ Output:

Welcome, Alice!

🔍 Props Are Read-Only

You can’t modify props inside the child component. They are meant to be read-only.

If you need to modify data, use state, which we’ll cover in Part 3.

🧪 Destructuring Props

You can make your code cleaner using destructuring:

function Greeting({ name }) {
  return <p>Welcome, {name}!</p>;
}

This does the same thing, but looks cleaner and is commonly used in real-world code.

🧠 Component Nesting

You can pass and render many components together.

function App() {
  return (
    <div>
      <Header />
      <Greeting name="Jane" />
      <Greeting name="Lena" />
      <Footer />
    </div>
  );
}

Each one has its own role, just like a real app!

✍️ Challenge for You

Create a UserCard component that takes name and age as props and displays them inside a <div>.
Import and render UserCard in your App.jsx for 2–3 users.