What is React?
React is a popular JavaScript library used to build user interfaces (UI). It is mainly used to create modern web applications. React was created by Meta, and it is used by many big companies today.
Why do you need to learn React?
You can build reusable components
It makes UI development easier
It is fast and efficient
Many companies use it
Core concepts
React Component
A React component is usually a JavaScript function that returns what should be shown on the screen, or A React component is a reusable piece of UI created using JavaScript.
function Welcome() {
return <h1>Hello, World!</h1>;
}Welcome is a component. It returns a heading that will be displayed on the page.
Why Components Are Important?
Reusable (write once, use many times).
Easy to manage and update.
Makes code clean and organized.
Helps build large applications step by step.
Component Rendering
Rendering is the process where React calls a component function for the first time to determine what should appear on the UI. The simple idea is show the UI for the first time.
Component Re Rendering
Re-rendering happens when a component updates because its state or props change, and React needs to update the UI to reflect the new data. The simple mean is running the component function again to refresh the UI when data changes.
State
The State is a way for a component to store and manage data that can change over time. When the state changes, React automatically updates (re-renders) the UI. Think of a state like memory 🧠 inside a component.
Why is State Important?
1. Makes UI dynamic
2. Responds to user actions
3. Keeps data inside components
4. Helps build interactive apps
Props
Props (short for properties) are used to pass data from one component to another. Usually, data flows from parent → child component. Think of props like arguments in a function. You pass data → component receives it → uses it.
Actual DOM and Virtual DOM
Actual Dom
The Actual DOM is the real structure of the web page that the browser maintains. It represents all HTML elements, their attributes, and content in a tree-like format. It’s what the browser actually displays.
Virtual Dom
The Virtual DOM is a lightweight, in-memory copy of the Actual DOM used by React to efficiently determine changes before updating the real DOM.
It’s not visible on the web page. React updates the Virtual DOM first, then calculates differences (diffing) to update only the necessary parts of the Actual DOM. Faster and more efficient because it minimizes direct DOM manipulation.
How it Works
01 Initial render
React creates a Virtual DOM tree that represents your components.
02 State or props change
React updates the Virtual DOM first. Every time state or props change, React creates a new Virtual DOM tree representing the updated UI. Then it compares the new Virtual DOM with the previous Virtual DOM. This is called diffing.
03 Reconciliation
React figures out what exactly changed. Only the necessary parts of the actual DOM are updated. This comparison tells React exactly which parts of the actual DOM need to change.
What happens to the old Virtual DOM?
React creates a new Virtual DOM temporarily each time. The old Virtual DOM is not deleted immediately, but it is short lived in memory.
After the diffing/reconciliation is done, React updates the actual DOM, and the old Virtual DOM is discarded (After the diffing, the previous one is replaced).
The new Virtual DOM becomes the “current” Virtual DOM for the next update.
Memory usage is small because Virtual DOM is just a lightweight JavaScript object, not the full HTML DOM.
Visual Analogy
Think of Virtual DOM like a blueprint of a house:
01 You have the old blueprint (current Virtual DOM).
02 You make a new blueprint with changes (new Virtual DOM).
03 You compare the two to see what walls, doors, or windows need updating.
04 You only make those changes in the actual house (actual DOM).
05 The old blueprint is discarded; the new blueprint becomes the reference.
What is JSX?
JSX (JavaScript XML) is a syntax used in React that lets you write HTML like code inside JavaScript
function App() {
return (
<div> <h1>Hello Anupa</h1> <p>Welcome to React</p>
</div>
);
}This looks like HTML, but it is actually JavaScript (JSX).