I have a question about ReactDOM.render()

https://www.codecademy.com/paths/web-development/tracks/front-end-applications-with-react/modules/react-101-jsx-u/lessons/react-jsx-intro/exercises/reactdom-render-i
Hello everyone!
As we learned from this lesson, ReactDOM.render() takes first argument, creates a corresponding tree of nodes and than add this tree to the DOM. So why html file is not updated after rendering a JSX element?
Thank you in advance!

HTML has DOM, which is what you see on a webpage.

reactJS is written in Javascript. Javascript can manipulate the HTML DOM. However, DOM manipulation is expensive. That is where reactJS comes in, reactJS use a shadow or virtual DOM to optimize this process.

1 Like

So when we manipulate HTML DOM with javascript, we actually add or change nodes in the DOM, so thats why this is not too fast. But react.js uses a virtual DOM, and the changes are added there, and these changes are rendered on the website with ReactDOM.render() without actually adding these nodes in the HTML file and in HTML DOM, and react.js updates only necessary part of the react DOM, not all the DOM, thats why using react.js is more effective and faster? (For example if we change node just using JavaScript it will update all the file, and when we use react.js it updates only nodes that were cnaged?) Do I understand it correctly?

Good, I like how you take thinking steps yourself trying to figure things out :slight_smile:

the .render() is only the initial mount.

The html is rendered by the browser, resulting in the DOM. This involves graphical rendering and more. Its a very complicated process. So we don’t manipulate the html file, but result of the file being rendered.

Of course reactJS will have to update the DOM, but by using the virtual DOM, reactJS minimizes interactions with the DOM.

I am sure there are good in-depth articles on how this works.

1 Like

Thank you so much for your answer :grinning: