Why we use Render in React?

Mayank Jha — Thu, 07 Dec 2023 11:32:33 +0000

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.

The post Why we use Render in React? appeared first on MaXEster Technologies | Technical Blog.

.render() function – MaXEster Technologies | Technical Blog

Why we use Render in React?

.createRoot()

.render()

Updating the rendered element