React Framework

Introduction to React 

📌 What is React?

React is a JavaScript library used to build modern websites and web applications.
It helps you create interactive user interfaces (UI) — like buttons, forms, or entire pages — in a simple and reusable way.

🌟 Key Points

• Created by Facebook (now Meta) in 2013.

• Used by companies like Netflix, Instagram, Uber, Airbnb.

• Helps you build Single Page Applications (SPAs) — meaning the page doesn't reload every time you click something. It just updates the parts that change.

📌 Why Use React?

React makes building websites easier and faster. Here’s why:

Example

In a regular website, a button might look like this:

<button>Click Me</button>

In React, you can create a Button component and use it everywhere:

function Button() {

  return <button>Click Me</button>;

}

This is why React is component-based — you build small reusable parts.

Example

🔴 Traditional Web
If you want 10 buttons, you copy-paste 10 <button> tags.

🟢 React Web
You create one Button component and use it 10 times.

📌 How React Works (The Virtual DOM)

🧐 What is the DOM?

DOM = Document Object Model = The structure of your webpage (all the HTML elements, like <div>, <p>, etc.).

🧙‍♂️ What is the Virtual DOM?

• In React, there are 2 versions of your page:

  • The Real DOM = What the browser shows.

  • The Virtual DOM = A lightweight (faster) copy React keeps in memory.

• When something changes, React compares the Virtual DOM to the Real DOM and only updates the parts that actually changed.

🔥 Example

Imagine you have a page with:

Header

Button 1

Button 2

Button 3

If you click Button 2, React only updates Button 2 — not the whole page.
This is much faster than reloading the entire page.

Visual Examplet

Initial Page

----------------------------------

Header

Button 1

Button 2

Button 3

User Clicks Button 2

----------------------------------

React checks Virtual DOM vs Real DOM

Only Button 2 updates

Everything else stays the same