Rendering Elements in React

In the previous chapters, we learned how to create JSX elements to build our user interfaces. It's time to put these elements on the screen by rendering them in our React application.

The react-dom/client Package

To render a React element into the DOM tree, we'll leverage the react-dom/client package, which provides two essential methods:

1. createRoot(container): This method creates a React root by referencing an existing DOM element. In most React applications, this element is a div element with the root id, typically defined in the index.html file. This root serves as the container where the entire React application will be rendered;
2. render(element): The render method expects a reference to a React element or component, specifying what should be rendered within the root container.

Here's a basic code structure illustrating how this process works:

Practical Example

Let's put this theory into practice. Consider the following example, where we create a React element and render it into the DOM:

Note

All examples and challenges will be presented in the CodeSandboxes so you can work with the code without any breaks for setting up your environment.

By default, we see the live page preview. Please drag the slider on the left side of the CodeSandbox to inspect the code.

In this example, we create a React element called article and render it into the specified root container.