[go: up one dir, main page]
Scribd
Upload
14 views11 pages

React

The document explains the Document Object Model (DOM) as a structured representation of HTML elements in a webpage, highlighting its tree data structure and the challenges of updating the real DOM. It introduces the Virtual DOM used by React, which is a lightweight copy that allows for faster updates by comparing changes before rendering to the real DOM. Additionally, it outlines the process of how a React app loads and displays components in a browser, starting from the index.html page to the app.js component.

Uploaded by

Ram pandey
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
14 views11 pages

React

The document explains the Document Object Model (DOM) as a structured representation of HTML elements in a webpage, highlighting its tree data structure and the challenges of updating the real DOM. It introduces the Virtual DOM used by React, which is a lightweight copy that allows for faster updates by comparing changes before rendering to the real DOM. Additionally, it outlines the process of how a React app loads and displays components in a browser, starting from the index.html page to the app.js component.

Uploaded by

Ram pandey
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 11

React

15 December 2024 21:35

What is DOM?
DOM stands for 'Document Object Model'. In simple terms, it is a structured representation of the HTML elements thar are present in a
webpage or web app. DOM represents the entire UI of your application. The DOM is represented as tree data structure. It contain a node
for each UI element present in the web document. It is very useful as it allow web developers to modify content through JavaScript.

Disadvantages of real DOM :


Every time the DOM gets updated, the updated element and its children have to be rendered again to update the UI of our page. For this,
each time there is a component update, the DOM needs to be updated and the UI components have to be re-rendered.

Virtual DOM
React uses Virtual DOM exists which is like a lightweight copy of the actual DOM(a virtual representation of the DOM). So for every object
that exists in the original DOM, there is an object for that in React Virtual DOM. It is exactly the same, but it does not have the power to
directly change the layout of the document.
Manipulating DOM is slow, but manipulating Virtual DOM is fast as nothing gets drawn on the screen. So each time there is a change in
the state of our application, the virtual DOM gets updated first instead of the real DOM.

How does virtual DOM actually make things faster?


When anything new is added to the application, a virtual DOM is created and it is represented as a tree. Each element in the application is
a node in this tree. So, whenever there is a change in the state of any element, a new Virtual DOM tree is created. This new Virtual DOM
tree is then compared with the previous Virtual DOM tree and make a note of the changes. After this, it finds the best possible ways to
make these changes to the real DOM. Now only the updated elements will get rendered on the page again.

Quick Notes Page 1


Quick Notes Page 2
HOW REACT APP LOAD AND DISPLAY THE COMPONENT IN BROWSER?
Suppose we open any website in our web browser, then first request will go to react server and find the index.html page and w e know that
this is the only single html page in react app.

So now index.html with the help of libaries will load the index.js file

Then index.js file will call app.js file. Which is the root component.
And then send response to index.html.

Quick Notes Page 3


Quick Notes Page 4
Quick Notes Page 5
Quick Notes Page 6
Quick Notes Page 7
Quick Notes Page 8
Quick Notes Page 9
Quick Notes Page 10
Quick Notes Page 11

You might also like