When we start learning React, one word comes again and again Components. At first it may feel confusing. I remember when I first started learning React during my frontend practice, I kept hearing “everything in React is a component.” I was like, okay… but what exactly does that mean?
In simple words, components are the building blocks of a React application. Just like when we build a project in college, we divide it into small modules, React also divides the UI into small reusable pieces called components.
If you understand components properly, then React becomes much easier to learn. So in this article, we’ll go step by step and understand:
- What React components are
- Functional components
- Class components
- Props and State
- Simple examples
I’ll try to explain it like one student explaining to another. So don’t worry if you're a beginner.
Introduction to React Components
Think about a college project website. Suppose we are building a website for our college fest. The page might include:
- Navbar
- Event list
- Registration form
- Footer
Instead of writing everything in one big file, React allows us to break the UI into small reusable pieces.
Each piece is a component.
So the structure look like this:
App
├── Navbar
├── EventList
├── RegistrationForm
└── Footer
Each component manages its own code and logic. This makes the code:
- Easier to understand
- Easier to maintain
- Reusable
For Example, the Navbar component can be reused on multiple pages.
In simple words :
A React component is a JavaScript function or class that returns UI (JSX).
JSX is basically HTML written inside JavaScript.
Functional Components
When most students start learning React the first thing they learn is Functional Components. These are the simplest and most commonly used components in modern React.
In simple terms :
A Functional Component is just a JavaScript function that returns JSX.
Let’s see a simple example.
function Welcome() {
return <h1>Hello Students!</h1>
}
export default Welcome;
This is a React component called Welcome.
When this component is used in another file:
<Welcome />
It will display:
Hello Students!
Why Functional Components Are Popular
When I started React practice for my mini project I realized functional components are easier to write and understand. Some reasons:
- Less code
- Easy to read
- Works well with React Hooks
- Preferred in modern React development
Earlier, many advanced features were only available in class components but now Hooks like useState and useEffect allow functional components to handle state and lifecycle.
So in most real projects today developers mostly use functional components.
Class Components
Before React Hooks were introduced, Class Components were used more frequently.
A class component is basically a JavaScript class that extends React.Component.
Example:
import React, { Component } from "react";
class Welcome extends Component {
render() {
return <h1>Hello Students!</h1>;
}
}
export default Welcome;
Here:
- class Welcome extends Component creates the component
- render() method returns the UI
Why Class Components Were Used
Class components allowed developers to use:
- State
- Lifecycle methods
- Complex logic
But the problem is that they are a bit longer and more complex compared to functional components.
Honestly, many beginners get confused with:
- this
- constructor
- binding methods
Even during my React practice, class components felt slightly harder to manage compared to functional components.
Functional vs Class Components
| Feature | Functional Components | Class Components |
|---|---|---|
| Syntax | Simple function | JavaScript class |
| Code length | Short | Longer |
| State handling | Using Hooks | Using this.state |
| Lifecycle methods | Hooks like useEffect | Built-in lifecycle methods |
| Modern usage | Mostly used | Less used now |
So for beginners learning React today, functional components are recommended.
Props and State
Now comes the most important concept in React — Props and State.
Many students get confused here. But once you understand the difference, React becomes much clearer.
Let’s break it down.
Props in React
Props stands for Properties.
Props are used to pass data from one component to another.
Think of it like this. Suppose you have a component showing student details. Instead of hardcoding the data, we pass it as props.
Example:
function Student(props) {
return <h2>Hello {props.name}</h2>;
}
Using the component:
<Student name="Ankit" />
<Student name="Rahul" />
Output:
Hello Ankit
Hello Rahul
So props are basically inputs to a component.
Important things about props:
- Passed from parent component
- Read-only
- Cannot be modified inside the component
I remember during my React practice, props felt similar to function parameters in Java.
State in React
State is used to store dynamic data inside a component.
Unlike props, state can change during program execution.
For example:
- Counter
- Form input
- Like button
- Toggle menu
Let’s see a simple example using functional components.
import React, { useState } from "react";
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<h2>Count: {count}</h2>
<button onClick={() => setCount(count + 1)}>
Increase
</button>
</div>
);
}
export default Counter;
Here:
- useState(0) creates state
- count stores value
- setCount updates the value
Every time we click the button, the UI updates.
When I first saw this working, it honestly felt like magic, because the UI automatically re-renders.
Props vs State
| Feature | Props | State |
|---|---|---|
| Data flow | Parent → Child | Internal to component |
| Mutable | No | Yes |
| Used for | Passing data | Managing dynamic data |
In simple words:
Props → external data
State → internal data
Examples of React Components
Let’s look at a small practical example similar to something we might build in a college project.
Example: Student Card Component
function StudentCard(props) {
return (
<div>
<h2>{props.name}</h2>
<p>Branch: {props.branch}</p>
</div>
);
}
Using it:
<StudentCard name="Ankit" branch="CSE" />
<StudentCard name="Priya" branch="IT" />
Output:
Ankit
Branch: CSE
Priya
Branch: IT
Now imagine building a student management system project. Instead of writing UI repeatedly, we can reuse this component multiple times.
That’s the real power of React components.
Why Components Are Important in React
From a practical project perspective, components give many advantages.
1. Code Reusability
Write once, reuse multiple times.
Example: Navbar, Footer, Card components.
2. Better Code Organization
Instead of one huge file, code is divided into smaller pieces.
This helps a lot during:
- debugging
- adding features
- teamwork
3. Easier Maintenance
If something breaks in a component, you only fix that specific part.
For example, if the Navbar design changes, we only update the Navbar component.
Conclusion
React components are the foundation of every React application. Once you understand them properly React development becomes easy for you.
To quickly summarize:
- Components are reusable building blocks of UI.
- Functional components are simple JavaScript functions returning JSX.
- Class components use ES6 classes.
- Props allow data to pass from parent to child components.
- State stores dynamic data inside a component.
When I first learned React, components felt confusing for a few days. But after building small projects and practicing, the concept became very clear. The best way to learn this is by building small components and combining them into a complete application.
If you are preparing for interviews or working on college projects, understanding components properly will make your React journey much smoother.
FAQs
What is a React component?
A React component is a reusable piece of UI that returns JSX. It can be created using a function or a class and helps organize code into smaller modules.
What is the difference between functional and class components?
Functional components are simple JavaScript functions that return JSX, while class components use ES6 classes and include lifecycle methods and state handling.
What are props in React?
Props are properties used to pass data from a parent component to a child component. They are read-only and cannot be modified inside the child component.
What is state in React?
State is used to store dynamic data inside a component. When the state changes, React automatically re-renders the component.
Which component type should beginners use?
Beginners should focus on functional components, because they are simpler and widely used in modern React applications, especially with React Hooks.
Read Also : What is React.js? Beginner Guide 2026 – Introduction, Components, JSX, State, Props & Virtual DOM Explained
