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.jsxmain.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:
function Welcome() {
return (
<h1>
Welcome to React!
</h1>
);
}
We can use it inside another component:
function App() {
return (
<div>
<Welcome />
</div>
);
}
Here:
App
↓
Welcome
Welcome is a child component of App.
Why Components?
Imagine building a website with:
Navbar
Hero
Profile
Product Card
Footer
Instead of putting everything into one huge component, we can break it down:
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:
function UserProfile() {
return <h2>User Profile</h2>;
}
Then:
<UserProfile />
Avoid treating lowercase names as custom components:
<userProfile />
Lowercase JSX tags are interpreted like HTML elements.
Reusing Components
Suppose we create:
function ProductCard() {
return (
<div>
<h2>Product</h2>
<p>₹999</p>
</div>
);
}
We can reuse it:
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:
function User(props) {
return (
<h2>
Hello {props.name}
</h2>
);
}
The parent can pass:
<User name="Saurabh" />
React passes the value into the component as props.
Passing Multiple Props
We can pass multiple values:
<User
name="Saurabh"
age={22}
role="Developer"
/>
The component can access:
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
<User name="Saurabh" />
Number
<User age={22} />
Boolean
<User isDeveloper={true} />
Array
<User
skills={[
"HTML",
"CSS",
"JavaScript"
]}
/>
Object
<User
user={{
name: "Saurabh",
age: 22
}}
/>
Function
<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:
function User(props) {
return (
<h2>
{props.name}
</h2>
);
}
I can write:
function User({ name }) {
return (
<h2>
{name}
</h2>
);
}
For multiple props:
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:
function ProductCard({
name,
price
}) {
return (
<div>
<h2>{name}</h2>
<p>
₹{price}
</p>
</div>
);
}
Now:
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:
<ProductCard
name="Laptop"
price={60000}
category="Electronics"
/>
we can pass an object:
const laptop = {
name: "Laptop",
price: 60000,
category: "Electronics"
};
Then:
<ProductCard product={laptop} />
The component:
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.
const skills = [
"HTML",
"CSS",
"JavaScript",
"React"
];
Then:
<Skills skills={skills} />
Component:
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:
function User({ name }) {
// Don't do this
// name = "Rahul";
}
Props are inputs provided by the parent.
Think of them as:
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:
Parent
↓
Child
↓
Grandchild
For example:
function App() {
const name = "Saurabh";
return (
<Profile name={name} />
);
}
Then:
function Profile({ name }) {
return (
<UserName name={name} />
);
}
And:
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:
function Button({ onClick }) {
return (
<button onClick={onClick}>
Click Me
</button>
);
}
Parent:
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:
children
Consider:
<Card>
<h2>Hello</h2>
</Card>
The content inside <Card> is passed through children.
Component:
function Card({ children }) {
return (
<div className="card">
{children}
</div>
);
}
Now:
<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:
function Card({ children }) {
return (
<div className="card">
{children}
</div>
);
}
Then:
<Card>
<h2>JavaScript</h2>
<p>Completed</p>
</Card>
and:
<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.
Parent → Child
State
Data managed inside a component that can change over time.
Component
↓
State
↓
UI
We'll explore state in detail later.
Building a User Profile
Let's combine everything.
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:
function App() {
const skills = [
"HTML",
"CSS",
"JavaScript",
"React"
];
return (
<UserProfile
name="Saurabh"
role="Frontend Developer"
skills={skills}
/>
);
}
Here we're combining:
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.