React is one of the most popular JavaScript libraries for building modern, dynamic web applications.
At the heart of React lies one key concept: components.
If one understand what components are, how they work, and how React uses them to render your UI, you’ll have the strong foundation needed to master React.
A React component is a reusable, self-contained piece of code that represents a part of the user interface (UI).
1. What is a React Component?
Imagine you’re building a food delivery website.
Your site might include:
• A Header with a logo and navigation,
• A Menu Section listing different restaurants,
• A Cart where users add their orders,
• A Footer with contact info and copyright.
Would you write all of this in one giant file?
Definitely not! That would become messy very quickly — hard to read, hard to fix, and nearly impossible to maintain.
Instead, you break the website into smaller, independent pieces, like:
• Header.js → Displays the logo and navigation links
• Menu.js → Lists menu items
• Cart.js → Shows added items
• Footer.js → Displays site info
Each of these files represents a React component.
Why This Matters
Breaking your UI into components gives you:
• Reusability – Write code once, use it in multiple places.
• Better organization – Your app stays clean and easy to navigate.
• Easier debugging – Fix issues in one component without affecting others.
• Scalability – Add new features without breaking existing code.
This modular approach is why React has become the go-to choice for modern web development.
2. Components Are Like LEGO Blocks
Think of building a React app like building with bricks:
• Each block is like a React component.
• You can combine multiple blocks to create something bigger, like a house or spaceship.
• If one block is broken or needs upgrading, you replace just that block instead of rebuilding the entire structure.
Example:
• A Login Button can be one block (component).
• A Login Form can be made of several blocks: username field, password field, and login button.
• The entire Login Page is built by combining these smaller pieces.
Real-Life Example: YouTube Page
On YouTube’s homepage, you’ll see:
• Header → Logo, search bar, user profile icon
• Sidebar → Navigation links like Home, Subscriptions, Trending
• Video Player → Displays the selected video
• Comments Section → Lists all user comments
Each of these can be separate React components.
When a feature changes — say, the comments layout — you only update that component instead of touching the whole app.
3. Components Must Start with Capital Letters
One of React’s most important rules is that component names must start with a capital letter.
React uses capitalization to differentiate between built-in HTML tags and custom React components.
• Lowercase names → Treated as standard HTML elements like <div> or <p>.
• Uppercase names → Treated as custom React components.
Example: Correct
function Header() {
return <h1>Welcome to My Website</h1>;
}
export default Header;
Usage in App.js:
function App() {
return (
<div>
<Header /> {/* React knows this is a custom component */}
</div>
);
}
Example: Incorrect
function header() {
return <h1>Welcome to My Website</h1>;
}
export default header;
Usage:
function App() {
return (
<div>
<header /> {/* React thinks this is a built-in <header> HTML tag */}
</div>
);
}
4. Types of React Components
There are two main ways to write React components:
1. Functional Components – The modern, simpler way.
2. Class Components – The older style, mainly for legacy projects.
A) Functional Components (Modern and Recommended)
Functional components are JavaScript functions that return JSX.
They are:
• Easy to write and read,
• Work perfectly with React Hooks like useState and useEffect,
• Require less code, making them clean and maintainable.
Example:
function Greeting(props) {
return <h2>Hello, {props.name}!</h2>;
}
export default Greeting;
Usage:
<Greeting name=”John” />
Output:
Hello, John!
B) Class Components (Older Style)
Before Hooks, class components were used to manage state and lifecycle methods.
They’re less common today but important for understanding older React projects.
Example:
import React, { Component } from ‘react’;
class Greeting extends Component {
render() {
return <h2>Hello, {this.props.name}!</h2>;
}
}
export default Greeting;
Always use functional components unless you’re maintaining older code.
5. JSX – Writing HTML Inside JavaScript
JSX (JavaScript XML) is one of React’s coolest features.
It lets you write HTML-like code directly inside JavaScript files.
Why JSX Exists
Without JSX, creating elements would look like this:
const element = React.createElement(‘h1’, null, ‘Hello World’);
With JSX:
const element = <h1>Hello World</h1>;
Benefits of JSX:
• Cleaner and easier to read
• Feels familiar to anyone who knows HTML,
6. How React Renders Components
Rendering is how React takes your components and displays them in the browser.
Here’s the step-by-step process:
Step 1: You Write Components
Example:
function Welcome() {
return <h1>Welcome to React!</h1>;
}
Step 2: React Builds a Virtual DOM
Instead of updating the browser’s real DOM directly, React first creates a Virtual DOM, which is:
• A lightweight in-memory copy of the real DOM,
• Much faster to update and compare.
Step 3: React Compares Old vs New (Diffing)
When something changes:
• React looks at the previous Virtual DOM,
• Compares it to the new Virtual DOM,
• Finds exactly what changed (this process is called diffing).
Step 4: React Updates Only What Changed
React then updates just the affected parts of the real DOM instead of re-rendering everything.
Example:
Imagine you edit only the title of a blog post.
• Old way: Reload the entire page → Slow.
• React way: Update only the title text → Fast and efficient.
This makes React apps smooth, responsive, and scalable.
7. Transpiling – Making JSX Work in Browsers
Browsers do not understand JSX. They only understand plain JavaScript.
So how does JSX actually run?
The answer is transpiling.
What is Transpiling?
Transpiling is like translation.
Just as you translate English into Hindi, transpiling converts modern JavaScript and JSX into older JavaScript that browsers understand.
React uses a tool called Babel for this.
Example of Transpiling
Your JSX code:
const element = <h1>Hello World</h1>;
Babel converts it into:
const element = React.createElement(‘h1’, null, ‘Hello World’);
This transformed code can run in any browser, even older ones.
Why This Matters
• JSX gives developers a clean, powerful syntax.
• Babel makes sure the code is browser-compatible.
• Together, they make React both developer-friendly and reliable across devices.
8. Props – Passing Data to Components
Props (short for properties) let you pass data from one component to another, similar to function arguments in JavaScript.
Example: Blog Post Component
function BlogPost(props) {
return (
<article>
<h2>{props.title}</h2>
<p>{props.content}</p>
</article>
);
}
function App() {
return (
<div>
<BlogPost title=”React Basics” content=”React is all about components.” />
<BlogPost title=”Props are Powerful” content=”Props make components dynamic!” />
</div>
);
}
Output:
React Basics
React is all about components.
Props are Powerful
Props make components dynamic!
Why Props are Important:
• Make components dynamic and reusable,
• Pass different data without rewriting code,
• Keep components modular and flexible.
9. State – Managing Changing Data
Props are static — once passed, they don’t change.
But what about data that updates over time, like a counter or a form input?
That’s where state comes in.
Example: Counter Component
import React, { useState } from ‘react’;
function Counter() {
const [count, setCount] = useState(0);
return (
<div>
<h2>Count: {count}</h2>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
}
export default Counter;
How it Works:
• useState(0) → Creates a state variable count starting at 0,
• setCount → Function to update the state,
• Every button click:
1. setCount updates the count,
2. React re-renders just this component,
3. The UI automatically stays in sync with the data.
10. Organizing Components
As your project grows, organization is key.
Here’s a clean folder structure:
src/
components/
Header.js
Content.js
Footer.js
BlogPost.js
Counter.js
App.js
index.js
Why This Helps:
• Easier to find files quickly,
• Keeps your codebase clean and scalable,
• Simplifies team collaboration.
Learning React may feel overwhelming at first, but remember this:
React is all about breaking your UI into small, reusable pieces called components.
Once you understand components, JSX, props, and state, you’ll have the foundation to build powerful, interactive web applications.
Think of it like learning blocks game:
• Start with a single block,
• Build a small house,
• Then create an entire city.
React works the same way — one component at a time.