Rendering JSX Elements in React

React doesn’t directly render JSX elements to the browser. Instead, it relies on the react-dom package, which provides methods to interact with the browser’s DOM. It serves as the bridge between React’s virtual DOM and the actual browser DOM.

The createRoot API

In React 18 and later, react-dom handles rendering these components into the DOM and updating them efficiently using an API called createRoot. It connects the React application to the browser's DOM and is responsible for displaying our UI. This new API offers better performance and enables concurrent rendering, making React applications more efficient and responsive.

React introduced the createRoot API in React 18 as part of its updates to the React rendering engine. It replaces the older ReactDOM.render method to provide better performance and support for new features like concurrent rendering.

How createRoot works

The createRoot method is used to create a React root container for rendering. Once the root container is created, its render method is used to render React elements into the DOM.

The createRoot method takes one argument:

• Where to render: A DOM node in the HTML document where the React content will be displayed.

Once the root container is created, the render method takes:

• What to render: A React element or JSX expression that describes the UI.

Typically, React applications render their content inside a single HTML container, often an element with the ID root.

Rendering a simple JSX element

Let’s render a simple JSX element to the browser using createRoot.