Introduction to React

React

React is a Frond-End JavaScript Library. It is used to create UI(User Interface). UI means Everything that user sees and Interact with webpages or Applications.

It includes,

• Buttons
• Color
• Layout
• Text
• Images ....

React is Espeacilly used to create SPA (Single Page Application).

Single Page Application :

SPA is Web Application that loades on only on HTML Page initially, When user try to navigate different Sections,it does not reload. Instead,it changes only nessary Contents on UI.

Example : Gmail

When you click:

• Inbox
• Sent
• Drafts

The page does not reload. Only the content changes.

SPA behavior: One page is loaded initially, and JavaScript updates the content.

(Other Examples : Netflix, Facebook,Google Maps)

Benifits:

• Faster Navigation
• Better User Experience

DisAdvantage:

Initial Content Loading may be Slower.

Why is the initial loading of an SPA slower?

When you first open a Single Page Application (SPA), the browser has to download most of the JavaScript needed to run the application before it can display the interactive UI.

After that first load, moving between pages is very fast because the app is already running in the browser

Component Based Architecture

React is Component-Based Architecture.UI breaking into small Parts. those are called "Components" which is Reusable.Each Component has its own Logic ,Strcture and Styling.

Virtual DOM in React

React uses a Virtual DOM to improve the performance of UI updates.

The Virtual DOM is a lightweight, in-memory representation (copy) of the Real DOM.

When a React application is first rendered, React creates a Virtual DOM that represents the UI and then renders it to the Real DOM.

Whenever the application's state or props change, React creates a new Virtual DOM. It then compares the new Virtual DOM with the previous Virtual DOM using a process called the Diffing Algorithm.

The Diffing Algorithm identifies the differences between the two Virtual DOM trees. Based on these differences, React updates only the necessary parts of the Real DOM instead of re-rendering the entire page.

This entire process of comparing the Virtual DOMs and efficiently updating the Real DOM is called Reconciliation.

Because React updates only the changed elements, applications become faster and more efficient.

React was developed by FaceBook .

Current React Version is React 19.2.7