Nos capítulos anteriores, aprendemos como criar elementos JSX para construir nossas interfaces de usuário. Agora é hora de exibir esses elementos na tela, renderizando-os em nossa aplicação React.

O pacote react-dom/client

Para renderizar um elemento React na árvore DOM, utilizamos o pacote react-dom/client, que fornece dois métodos essenciais:

1. createRoot(container): Este método cria uma raiz React referenciando um elemento DOM existente. Na maioria das aplicações React, esse elemento é um elemento div com o id root, normalmente definido no arquivo index.html. Essa raiz serve como o contêiner onde toda a aplicação React será renderizada;
2. render(element): O método render espera uma referência a um elemento ou componente React, especificando o que deve ser renderizado dentro do contêiner raiz.

Veja uma estrutura básica de código ilustrando como esse processo funciona:

// Import the necessary method from the `react-dom` package.
import { createRoot } from "react-dom/client";

// Obtain a reference to the DOM container with the `"root"` id.
const root = createRoot(document.getElementById("root"));

// Define the React element you want to render.
const elementToRender = <YourReactElement />;

// Use the `render()` method to place the element in the `root` container.
root.render(elementToRender);

Exemplo Prático

Vamos colocar essa teoria em prática. Considere o exemplo a seguir, onde criamos um elemento React e o renderizamos no DOM:

Nota

Todos os exemplos e desafios serão apresentados nos CodeSandboxes para que você possa trabalhar com o código sem interrupções para configurar o ambiente.

Por padrão, visualizamos a prévia da página ao vivo. Arraste o controle deslizante no lado esquerdo do CodeSandbox para inspecionar o código.

Neste exemplo, um elemento React chamado article é criado e renderizado no contêiner raiz especificado.