# 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.
```javascript
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.
```javascript
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.
```plaintext
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.
```plaintext
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
```jsx
const element = Hello React
;
```
* * *
## Why JSX Was Introduced
Without JSX
```javascript
React.createElement(
"h1",
null,
"Hello React"
);
```
With JSX
```jsx
Hello React
```
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.
```jsx
const name = "Bharat";
Hello {name}
```
Expressions are allowed.
```jsx
{5 + 5}
{isLoggedIn ? "Logout" : "Login"}
```
* * *
## JSX Compilation
Browsers don't understand JSX.
```plaintext
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
```jsx
function Welcome() {
return Hello
;
}
```
Use
```jsx
```
* * *
## Why Components?
Without components
```plaintext
One File
↓
5000 Lines
↓
Impossible to maintain
```
With components
```plaintext
Navbar
Footer
Sidebar
ProductCard
ReviewCard
Button
```
Everything becomes modular.
* * *
## Component Composition
Large interfaces are built by combining smaller components.
```plaintext
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
```jsx
```
Child
```jsx
function ProductCard(props) {
return (
<>
{props.name}
{props.price}
);
}
```
* * *
## Parent → Child Communication
```plaintext
Parent
↓
Props
↓
Child
```
Data flows downward.
* * *
## Props are Read-Only
Never do
```javascript
props.name = "Samsung";
```
React expects props to be immutable.
* * *
## Why Props?
Reusable components.
Instead of
```plaintext
100 Product Cards
↓
100 Files
```
We create
```plaintext
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
```plaintext
Count = 0
↓
Click Button
↓
Count = 1
↓
UI Updates
```
* * *
React Example
```jsx
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.
```plaintext
Counter A
Count = 2
Counter B
Count = 10
```
Independent.
* * *
## State Updates
Never do
```javascript
count = count + 1;
```
Instead
```javascript
setCount(count + 1);
```
* * *
## State Drives UI
```plaintext
State
↓
React
↓
UI
```
Not
```plaintext
UI
↓
State
```
* * *
# Re-rendering
## What is Re-rendering?
React runs the component again to calculate the new UI.
* * *
## What Causes Re-render?
1. State changes
```javascript
setCount(10);
```
* * *
2. Props change
Parent changes
↓
Child receives new props
↓
Child re-renders
* * *
3. Parent Re-renders
Children may also re-render.
* * *
## React Rendering Flow
```plaintext
State Change
↓
Component Function Runs
↓
New JSX
↓
React Compares
↓
DOM Updates
```
React only updates what changed.
* * *
# High-Level Lifecycle
```plaintext
Mount
↓
Render
↓
Update
↓
Unmount
```
Mount
Component appears.
Update
State or Props changed.
Unmount
Component removed.
* * *
# Declarative Programming
## Imperative Programming
Tell the computer HOW.
```javascript
Find button
Change color
Update text
Hide element
```
Developer controls everything.
* * *
## Declarative Programming
Tell React WHAT the UI should look like.
```jsx
if (isLoggedIn) {
return ;
}
return ;
```
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.
```plaintext
App
├── Navbar
├── Sidebar
├── Main
│ ├── ProductCard
│ ├── ProductCard
│ └── ProductCard
└── Footer
```
Each component may contain children.
* * *
## Data Flow
React uses **one-way data flow**.
```plaintext
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
```plaintext
Navbar
Search Bar
Category Menu
Banner
Product Card
Rating
Price
Footer
```
Every piece is reusable.
* * *
Social Media
```plaintext
Navbar
Story
Post
Comment
Like Button
Profile Card
```
Again
Everything is a component.
* * *
# Common Beginner Mistakes
## 1\. Mutating State
Wrong
```javascript
user.name = "Alex";
```
Correct
```javascript
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
```javascript
const fullName =
firstName + lastName;
```
No need for state.
* * *
## 4\. Huge Components
Avoid
```plaintext
Home.jsx
3000 Lines
```
Instead
```plaintext
Navbar
Sidebar
Hero
Card
Footer
```
* * *
## 5\. Poor Folder Structure
Bad
```plaintext
src
App.jsx
Everything else
```
Good
```plaintext
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
```plaintext
Navbar
Search
Product Card
Review
Cart
Footer
```
Dashboard
```plaintext
Sidebar
Navbar
Chart
Statistics
Recent Orders
Profile
```
Every feature becomes a reusable component.
* * *
# Mental Model of React
```plaintext
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.