React JS is made up of JSX (JavaScript XML). All the codes are written using JSX. But our browser doesn’t understand JSX. Browsers can only parse HTML, CSS and Vanilla JavaScript. Therefore, it becomes necessary to find a medium, which can carry this conversion task.
.createRoot()
ReactDOM.createRoot() is used to create the root element, where all the HTML and CSS code will be rendered.
In a simple website, there will be only one root but it depends on the nature and complexity of the website.
.render()
.render() method is used on the root element to render the JSX code.
This is the place where all the code will be rendered.
Updating the rendered element
React elements are immutable, i.e. we can’t change them.
For updating the UI, we have to create a new root element, which we can render again to upadate the UI.