# React Components & Props – Building Reusable UI

Yesterday marked the beginning of my React journey.

I learned:

*   What React is
    
*   Why React is used
    
*   Components
    
*   JSX
    
*   Declarative UI
    
*   Vite
    
*   React project structure
    
*   `App.jsx`
    
*   `main.jsx`
    

Today, I went deeper into one of the most important concepts in React:

**Components and Props.**

React applications are built by combining small, reusable components.

But reusable components become truly powerful when we can pass different data into them.

That's where **props** come in.

* * *

# What is a React Component?

A React component is a reusable piece of UI.

A simple component can be:

```jsx
function Welcome() {

    return (
        <h1>
            Welcome to React!
        </h1>
    );

}
```

We can use it inside another component:

```jsx
function App() {

    return (
        <div>

            <Welcome />

        </div>
    );

}
```

Here:

```text
App
 ↓
Welcome
```

`Welcome` is a child component of `App`.

* * *

# Why Components?

Imagine building a website with:

```text
Navbar
Hero
Profile
Product Card
Footer
```

Instead of putting everything into one huge component, we can break it down:

```text
App
│
├── Navbar
├── Hero
├── Profile
├── ProductCard
└── Footer
```

Each component has a clear responsibility.

This makes the application easier to:

*   Understand
    
*   Reuse
    
*   Maintain
    
*   Test
    
*   Scale
    

* * *

# Component Naming

React components should generally start with an uppercase letter.

Correct:

```jsx
function UserProfile() {

    return <h2>User Profile</h2>;

}
```

Then:

```jsx
<UserProfile />
```

Avoid treating lowercase names as custom components:

```jsx
<userProfile />
```

Lowercase JSX tags are interpreted like HTML elements.

* * *

# Reusing Components

Suppose we create:

```jsx
function ProductCard() {

    return (
        <div>
            <h2>Product</h2>
            <p>₹999</p>
        </div>
    );

}
```

We can reuse it:

```jsx
function App() {

    return (
        <div>

            <ProductCard />
            <ProductCard />
            <ProductCard />

        </div>
    );

}
```

But all three cards contain the same information.

What if we want different products?

That's where props become useful.

* * *

# What are Props?

**Props** stands for **properties**.

Props allow a parent component to pass data to a child component.

For example:

```jsx
function User(props) {

    return (
        <h2>
            Hello {props.name}
        </h2>
    );

}
```

The parent can pass:

```jsx
<User name="Saurabh" />
```

React passes the value into the component as `props`.

* * *

# Passing Multiple Props

We can pass multiple values:

```jsx
<User
    name="Saurabh"
    age={22}
    role="Developer"
/>
```

The component can access:

```jsx
function User(props) {

    return (
        <div>

            <h2>{props.name}</h2>

            <p>
                Age: {props.age}
            </p>

            <p>
                Role: {props.role}
            </p>

        </div>
    );

}
```

* * *

# Props Can Contain Different Data Types

Props aren't limited to strings.

We can pass:

### String

```jsx
<User name="Saurabh" />
```

### Number

```jsx
<User age={22} />
```

### Boolean

```jsx
<User isDeveloper={true} />
```

### Array

```jsx
<User
    skills={[
        "HTML",
        "CSS",
        "JavaScript"
    ]}
/>
```

### Object

```jsx
<User
    user={{
        name: "Saurabh",
        age: 22
    }}
/>
```

### Function

```jsx
<User
    onLogin={handleLogin}
/>
```

This makes props extremely flexible.

* * *

# Props With Destructuring

Since I already learned JavaScript destructuring, I can use it directly with props.

Instead of:

```jsx
function User(props) {

    return (
        <h2>
            {props.name}
        </h2>
    );

}
```

I can write:

```jsx
function User({ name }) {

    return (
        <h2>
            {name}
        </h2>
    );

}
```

For multiple props:

```jsx
function User({
    name,
    age,
    role
}) {

    return (
        <div>

            <h2>{name}</h2>

            <p>{age}</p>

            <p>{role}</p>

        </div>
    );

}
```

This is a very common React pattern.

* * *

# Dynamic Product Cards

Let's create a reusable component:

```jsx
function ProductCard({
    name,
    price
}) {

    return (
        <div>

            <h2>{name}</h2>

            <p>
                ₹{price}
            </p>

        </div>
    );

}
```

Now:

```jsx
function App() {

    return (
        <div>

            <ProductCard
                name="Laptop"
                price={60000}
            />

            <ProductCard
                name="Keyboard"
                price={2000}
            />

            <ProductCard
                name="Mouse"
                price={1000}
            />

        </div>
    );

}
```

One component can now represent many products.

* * *

# Passing Objects as Props

Instead of passing every property separately:

```jsx
<ProductCard
    name="Laptop"
    price={60000}
    category="Electronics"
/>
```

we can pass an object:

```jsx
const laptop = {

    name: "Laptop",
    price: 60000,
    category: "Electronics"

};
```

Then:

```jsx
<ProductCard product={laptop} />
```

The component:

```jsx
function ProductCard({ product }) {

    return (
        <div>

            <h2>
                {product.name}
            </h2>

            <p>
                ₹{product.price}
            </p>

            <p>
                {product.category}
            </p>

        </div>
    );

}
```

* * *

# Passing Arrays as Props

We can also pass arrays.

```jsx
const skills = [
    "HTML",
    "CSS",
    "JavaScript",
    "React"
];
```

Then:

```jsx
<Skills skills={skills} />
```

Component:

```jsx
function Skills({ skills }) {

    return (
        <ul>

            {skills.map(skill => (

                <li key={skill}>
                    {skill}
                </li>

            ))}

        </ul>
    );

}
```

Notice how the JavaScript `map()` method I learned earlier is now being used inside React.

* * *

# Props Are Read-Only

One of the most important rules of React:

**A component should not directly modify its props.**

For example:

```jsx
function User({ name }) {

    // Don't do this
    // name = "Rahul";

}
```

Props are inputs provided by the parent.

Think of them as:

```text
Parent
   ↓
Props
   ↓
Child
```

The child uses the data but doesn't directly modify the parent's props.

* * *

# One-Way Data Flow

React follows a **one-way data flow**.

Data normally flows:

```text
Parent
   ↓
Child
   ↓
Grandchild
```

For example:

```jsx
function App() {

    const name = "Saurabh";

    return (
        <Profile name={name} />
    );

}
```

Then:

```jsx
function Profile({ name }) {

    return (
        <UserName name={name} />
    );

}
```

And:

```jsx
function UserName({ name }) {

    return <h2>{name}</h2>;

}
```

The data flows downward through the component tree.

* * *

# Passing Functions as Props

Props can also be functions.

For example:

```jsx
function Button({ onClick }) {

    return (
        <button onClick={onClick}>
            Click Me
        </button>
    );

}
```

Parent:

```jsx
function App() {

    function handleClick() {

        console.log("Button clicked");

    }

    return (
        <Button
            onClick={handleClick}
        />
    );

}
```

Now the child can trigger behavior defined by the parent.

This concept will become extremely important when learning **state and event handling**.

* * *

# Children Prop

React provides a special prop called:

```text
children
```

Consider:

```jsx
<Card>
    <h2>Hello</h2>
</Card>
```

The content inside `<Card>` is passed through `children`.

Component:

```jsx
function Card({ children }) {

    return (
        <div className="card">

            {children}

        </div>
    );

}
```

Now:

```jsx
<Card>
    <h2>Developer Profile</h2>
    <p>Learning React</p>
</Card>
```

The result is rendered inside the card.

* * *

# Component Composition

Using `children` allows us to build flexible components.

For example:

```jsx
function Card({ children }) {

    return (
        <div className="card">
            {children}
        </div>
    );

}
```

Then:

```jsx
<Card>
    <h2>JavaScript</h2>
    <p>Completed</p>
</Card>
```

and:

```jsx
<Card>
    <h2>React</h2>
    <p>Learning</p>
</Card>
```

The same `Card` component can contain completely different content.

This is called **component composition**.

* * *

# Props vs State

I haven't started learning state deeply yet, but it's useful to understand the basic distinction.

### Props

Data passed **from parent to child**.

```text
Parent → Child
```

### State

Data managed **inside a component** that can change over time.

```text
Component
   ↓
State
   ↓
UI
```

We'll explore state in detail later.

* * *

# Building a User Profile

Let's combine everything.

```jsx
function UserProfile({
    name,
    role,
    skills
}) {

    return (
        <div>

            <h2>{name}</h2>

            <p>{role}</p>

            <ul>

                {skills.map(skill => (

                    <li key={skill}>
                        {skill}
                    </li>

                ))}

            </ul>

        </div>
    );

}
```

Then:

```jsx
function App() {

    const skills = [
        "HTML",
        "CSS",
        "JavaScript",
        "React"
    ];

    return (
        <UserProfile
            name="Saurabh"
            role="Frontend Developer"
            skills={skills}
        />
    );

}
```

Here we're combining:

```text
Components
+
Props
+
Destructuring
+
Arrays
+
map()
+
JSX
```

This is where the JavaScript knowledge from the previous 30 days starts becoming useful in React.

* * *

# Best Practices

✔ Keep components focused on one responsibility.

✔ Use meaningful prop names.

✔ Destructure props when it improves readability.

✔ Treat props as read-only.

✔ Use reusable components instead of duplicating UI.

✔ Use `children` when building flexible wrapper components.

✔ Keep data flow predictable.

✔ Don't pass unnecessary props through many component levels.

* * *

# My Biggest Takeaway

Today, I learned that **components become powerful when they become reusable and dynamic**.

A component gives me reusable UI.

Props give that component different data.

The fundamental relationship is:

**Parent → Props → Child**

I also learned that React's one-way data flow makes the movement of data predictable.

And the most exciting part is seeing my JavaScript knowledge directly transfer into React:

**Objects → Props**

**Destructuring → Props**

**Arrays → Lists**

`map()` **→ Rendering**

**Functions → Event Handlers**

This makes React feel much less like a completely new technology and more like the next layer built on top of the JavaScript foundation I've spent the last 30 days developing.