Why we use Render in React?

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.

index.html
index.js
output

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.

The counter fuction will execute every second, hence the UI will be updated each second with a new value.

Leave a Reply

Your email address will not be published. Required fields are marked *