Rendering JSX Elements in React
Explore how to render JSX elements in React using the modern createRoot API from react-dom. Learn to create root containers, render static and dynamic content, use StrictMode for development warnings, and update the UI dynamically with JavaScript expressions embedded in JSX.
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
createRootAPI in React 18 as part of its updates to the React rendering engine. It replaces the olderReactDOM.rendermethod 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: ...