React Fundamentals for MERN Developers
A Beginner-Friendly Guide to Thinking in React
Target Audience: MERN Developers Goal: Build a strong foundation before learning Hooks, Routing, State Management, and Performance Optimization.
Why Did Developers Create React When JavaScript Already Existed?
This is one of the most common interview questions.
JavaScript already allowed developers to create interactive websites.
So why invent React?
The answer lies in UI complexity.
Traditional JavaScript Works Well...
Imagine a webpage with:
One button
One input field
One image
JavaScript can easily manipulate these elements.
const button = document.getElementById("btn");
button.addEventListener("click", () => {
document.getElementById("text").innerText = "Hello";
});
Everything is simple.
But Modern Applications Are Different
Applications like:
Instagram
Netflix
Amazon
Facebook
Gmail
ChatGPT
contain thousands of UI elements.
Examples:
Posts
Comments
Notifications
Chat windows
Dashboards
Product listings
Shopping carts
Managing these manually becomes difficult.
Problems with Traditional DOM Manipulation
1. Too Much Manual Work
Every UI change requires manually finding and updating DOM elements.
document.getElementById("name").innerText = user.name;
document.getElementById("email").innerText = user.email;
document.getElementById("age").innerText = user.age;
Imagine doing this hundreds of times.
2. UI Becomes Hard to Maintain
As applications grow:
More files
More DOM updates
More event listeners
More bugs
The code becomes difficult to understand.
3. Repeated Code
Imagine building 100 product cards.
Without reusable components, developers repeat HTML and JavaScript many times.
4. Difficult State Management
Suppose a shopping cart changes.
You must manually update:
Cart icon
Total price
Product quantity
Checkout page
Missing one update causes inconsistent UI.
React's Solution
React introduced a completely different way of building interfaces.
Instead of asking:
"How do I update the DOM?"
React asks:
"What should the UI look like for the current data?"
React updates the DOM automatically.
React's Core Philosophy
UI is a function of State.
State Changes
↓
React Re-renders
↓
DOM Updates Automatically
Instead of manually manipulating HTML, developers describe what the interface should look like.
Component-Driven Development
React applications are built using components.
Think of components as LEGO blocks.
App
├── Navbar
├── Sidebar
├── Product List
│ ├── Product Card
│ ├── Product Card
│ ├── Product Card
└── Footer
Small pieces combine to build large applications.
Benefits of React
Reusable Components
Better Code Organization
Predictable UI
Easier Maintenance
Automatic UI Updates
Large Ecosystem
Huge Community
Better Developer Experience
Understanding JSX
What is JSX?
JSX stands for
JavaScript XML
It allows developers to write HTML-like syntax inside JavaScript.
Example
const element = <h1>Hello React</h1>;
Why JSX Was Introduced
Without JSX
React.createElement(
"h1",
null,
"Hello React"
);
With JSX
<h1>Hello React</h1>
Much easier to read.
JSX is NOT HTML
Although JSX looks like HTML, it is JavaScript syntax.
Differences:
| HTML | JSX |
|---|---|
| class | className |
| for | htmlFor |
| onclick | onClick |
| style="color:red" | style={{color:"red"}} |
Embedding JavaScript
Use curly braces.
const name = "Bharat";
<h1>Hello {name}</h1>
Expressions are allowed.
<p>{5 + 5}</p>
<p>{isLoggedIn ? "Logout" : "Login"}</p>
JSX Compilation
Browsers don't understand JSX.
JSX
↓
Babel
↓
React.createElement()
↓
JavaScript
↓
Browser
React never sends JSX to the browser.
Components
What is a Component?
A component is an independent reusable piece of UI.
Examples
Navbar
Button
Card
Footer
Sidebar
Login Form
Function Component
function Welcome() {
return <h1>Hello</h1>;
}
Use
<Welcome />
Why Components?
Without components
One File
↓
5000 Lines
↓
Impossible to maintain
With components
Navbar
Footer
Sidebar
ProductCard
ReviewCard
Button
Everything becomes modular.
Component Composition
Large interfaces are built by combining smaller components.
HomePage
├── Navbar
├── Hero
├── Categories
├── Products
│ ├── ProductCard
│ ├── ProductCard
│ └── ProductCard
└── Footer
This is called Component Composition.
Props
What are Props?
Props are inputs to components.
They allow parent components to send data to child components.
Example
<ProductCard
name="iPhone"
price={900}
/>
Child
function ProductCard(props) {
return (
<>
<h2>{props.name}</h2>
<p>{props.price}</p>
</>
);
}
Parent → Child Communication
Parent
↓
Props
↓
Child
Data flows downward.
Props are Read-Only
Never do
props.name = "Samsung";
React expects props to be immutable.
Why Props?
Reusable components.
Instead of
100 Product Cards
↓
100 Files
We create
1 ProductCard
↓
Different Props
↓
100 Products
State
What is State?
State is data that belongs to a component and can change over time.
Example
Counter
Count = 0
↓
Click Button
↓
Count = 1
↓
UI Updates
React Example
const [count, setCount] = useState(0);
State changes
↓
React re-renders.
Why State Exists
Imagine
Instagram Likes
Shopping Cart
Notifications
Messages
Profile Settings
These values change constantly.
Static HTML cannot handle this.
State makes UI dynamic.
Local State
Each component owns its own state.
Counter A
Count = 2
Counter B
Count = 10
Independent.
State Updates
Never do
count = count + 1;
Instead
setCount(count + 1);
State Drives UI
State
↓
React
↓
UI
Not
UI
↓
State
Re-rendering
What is Re-rendering?
React runs the component again to calculate the new UI.
What Causes Re-render?
- State changes
setCount(10);
- Props change
Parent changes
↓
Child receives new props
↓
Child re-renders
- Parent Re-renders
Children may also re-render.
React Rendering Flow
State Change
↓
Component Function Runs
↓
New JSX
↓
React Compares
↓
DOM Updates
React only updates what changed.
High-Level Lifecycle
Mount
↓
Render
↓
Update
↓
Unmount
Mount
Component appears.
Update
State or Props changed.
Unmount
Component removed.
Declarative Programming
Imperative Programming
Tell the computer HOW.
Find button
Change color
Update text
Hide element
Developer controls everything.
Declarative Programming
Tell React WHAT the UI should look like.
if (isLoggedIn) {
return <Dashboard />;
}
return <Login />;
React decides how to update the DOM.
Imperative vs Declarative
| Imperative | Declarative |
|---|---|
| How | What |
| Manual DOM | React DOM |
| More code | Less code |
| Error-prone | Predictable |
Component Tree
Every React app forms a tree.
App
├── Navbar
├── Sidebar
├── Main
│ ├── ProductCard
│ ├── ProductCard
│ └── ProductCard
└── Footer
Each component may contain children.
Data Flow
React uses one-way data flow.
Parent
↓
Child
↓
GrandChild
Data flows downward using props.
Children cannot directly modify parent data.
Thinking in Components
Instead of designing pages...
Think in reusable pieces.
Example
Amazon
Navbar
Search Bar
Category Menu
Banner
Product Card
Rating
Price
Footer
Every piece is reusable.
Social Media
Navbar
Story
Post
Comment
Like Button
Profile Card
Again
Everything is a component.
Common Beginner Mistakes
1. Mutating State
Wrong
user.name = "Alex";
Correct
setUser({
...user,
name: "Alex"
});
2. Confusing Props and State
Props
✔ Received
✔ Read-only
State
✔ Owned
✔ Mutable via setter
3. Overusing State
Not everything belongs in state.
Example
const fullName =
firstName + lastName;
No need for state.
4. Huge Components
Avoid
Home.jsx
3000 Lines
Instead
Navbar
Sidebar
Hero
Card
Footer
5. Poor Folder Structure
Bad
src
App.jsx
Everything else
Good
components/
pages/
layouts/
assets/
hooks/
services/
Building Applications with Components
Think about the UI first.
Don't ask
"How many pages?"
Ask
"What reusable pieces exist?"
Example
E-Commerce
Navbar
Search
Product Card
Review
Cart
Footer
Dashboard
Sidebar
Navbar
Chart
Statistics
Recent Orders
Profile
Every feature becomes a reusable component.
Mental Model of React
Data
↓
State
↓
Component
↓
JSX
↓
Virtual DOM
↓
Real DOM
↓
Browser
Whenever data changes,
React recalculates the UI automatically.
Why React Became Popular
Solved UI complexity.
Encouraged reusable components.
Reduced manual DOM manipulation.
Predictable state-driven rendering.
Strong ecosystem.
Huge community support.
Excellent developer experience.
Easy integration with modern tooling.
Interview Questions
Why was React created?
To solve the complexity of building large, interactive user interfaces by introducing reusable components and declarative rendering.
What is JSX?
A JavaScript syntax extension that allows developers to write HTML-like code inside JavaScript. It is compiled into React.createElement() calls.
What is a Component?
An independent, reusable piece of UI that encapsulates its own structure and behaviour.
What are Props?
Read-only inputs passed from parent components to child components.
What is State?
Mutable data owned by a component that determines what the UI should display.
What causes a re-render?
State updates
Prop changes
Parent component re-renders
Imperative vs Declarative?
Imperative focuses on how to update the UI manually. Declarative focuses on what the UI should look like, leaving DOM updates to React.
What is One-Way Data Flow?
Data flows from parent components to child components through props, making applications easier to understand and debug.
Key Takeaways
React was created to manage the complexity of modern user interfaces.
JSX makes UI code easier to write and read while compiling to JavaScript.
Components are reusable building blocks that promote modularity.
Props enable one-way communication from parent to child.
State stores dynamic data that changes over time.
State changes trigger React to re-render affected components.
React follows a declarative approach: describe the desired UI instead of manipulating the DOM directly.
Applications are organised as component trees with clear parent–child relationships.
Thinking in reusable components leads to scalable, maintainable applications.
Mastering these fundamentals makes learning Hooks, Routing, Context, Redux, and Next.js much easier.