JSX and Virtual DOM

Explained
How JSX works & how the Virtual DOM improves performance

202106100110097
202206100110021
202206100110041
202206100110137
Importance of Library
What is a JavaScript Library?
• A JavaScript library is a collection of pre-written code that developers can use to perform common tasks
more efficiently.
• It helps save development time and reduces the chances of making errors by reusing tested and reliable
code.
Why important?
• A JavaScript library is important because it speeds up development by providing ready-to-use functions and
components instead of writing everything from scratch.
• It also ensures cross-browser compatibility, so applications work consistently across different browsers such
as Chrome, Firefox, Edge, and Safari.
• libraries provide structured ways to organize code, which makes projects easier to maintain in the long run.
Popular Libraries: React, jQuery

(A JavaScript library is like a toolbox filled with ready-made tools (functions, methods, components) that you
can reuse instead of building everything from scratch.)
Intro to JS Library (React)
React: A JavaScript library for building user interfaces
Developed by: Facebook (Meta)
Key Focus: Component-based architecture
Why React?
• React is highly popular because it offers fast rendering by using the Virtual DOM, which updates
only the parts of the page that change instead of reloading the entire page.
• It also enables developers to create reusable UI components, meaning a single component can
be used in multiple places across an application.
• Advantage of React is its huge community support. With millions of developers contributing to
open-source projects, sharing resources, and creating free tools
JSX Syntax
JSX stands for JavaScript XML, and it allows developers to write HTML-like code directly inside JavaScript.
Example:
• const element = <h1>Hello, World!</h1>;
Rules:
• JSX must return only one parent element, which means multiple elements should be wrapped inside a single
parent tag such as <div>
• Since the word class is a reserved keyword in JavaScript, React uses className instead.
<h1 className="title">Hello</h1>
• JavaScript expressions can be written inside curly braces { } within JSX.
const name = "Rachit";
<h1>Hello, {name}</h1>

Advantage: This allows variables and expressions to be directly embedded inside the UI.
Benefits of JSX
• The main benefits of JSX is that it provides a readable and clean syntax.
• advantage is that JSX combines logic and UI in a single file.
const name = "Rachit";
return <h1>Hello, {name}</h1>;
• JSX also prevents injection attacks, because React automatically escapes inputs before rendering
them.
• JSX supports JavaScript expressions directly inside UI code.
<p> { 5 + 10 } </p> // Shows 15
<p> { new Date().toDateString() } </p> // Shows today's date
How Virtual DOM Works
• The Document Object Model (DOM) represents the structure of a webpage as a tree of elements.
• Problem: updating the real DOM can be very slow, because even a small change — such as updating a single
button — may cause the browser to re-render large portions of the page.
• Solution: React uses the Virtual DOM, which is a lightweight copy of the real DOM stored in memory.
• Since it exists only in memory, it is much faster to update compared to directly modifying the real DOM.
Process: 1. React creates Virtual DOM when UI changes
For example, when a user clicks a button or when data changes, React first updates the Virtual DOM instead of
immediately updating the real DOM.
2. Compares new Virtual DOM with old (Diffing)
React compares the new Virtual DOM with the previous Virtual DOM to find what exactly changed.
3. Updates only the changed parts in real DOM (Reconciliation)
React updates only the changed parts in the real DOM.
Advantage: using the Virtual DOM is that it provides faster updates and better performance, resulting in
smoother and more responsive web applications.
Dependencies & Install Process
• Dependencies for React:
Node.js
npm (Node Package Manager)
• Install Process:
npm install react react-dom
• Development Tool:
React Developer Tools (Browser Extension)
How to Use JSX in React
• Step 1: npm create vite@ <demoapp>
cd <demoapp>
npm install
npm run dev
• Step 2: Write JSX in App.jsx
• Step 3: Run app and see output
Conclusion
• JSX makes UI code readable & integrated with logic
• Virtual DOM optimizes rendering for speed
• React + JSX + Virtual DOM = Fast, maintainable, scalable apps