En los capítulos anteriores, aprendimos cómo crear elementos JSX para construir nuestras interfaces de usuario. Ahora es momento de mostrar estos elementos en pantalla renderizándolos en nuestra aplicación React.

El paquete react-dom/client

Para renderizar un elemento de React en el árbol DOM, utilizaremos el paquete react-dom/client, que proporciona dos métodos esenciales:

1. createRoot(container): Este método crea una raíz de React haciendo referencia a un elemento DOM existente. En la mayoría de las aplicaciones React, este elemento es un elemento div con el id root, que normalmente se define en el archivo index.html. Esta raíz sirve como contenedor donde se renderizará toda la aplicación React;
2. render(element): El método render espera una referencia a un elemento o componente de React, especificando qué debe renderizarse dentro del contenedor raíz.

A continuación se muestra una estructura básica de código que ilustra cómo funciona este proceso:

// 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);

Ejemplo práctico

Llevemos esta teoría a la práctica. Considera el siguiente ejemplo, donde creamos un elemento de React y lo renderizamos en el DOM:

Nota

Todos los ejemplos y desafíos se presentarán en los CodeSandboxes para que puedas trabajar con el código sin interrupciones para configurar tu entorno.

Por defecto, se muestra la vista previa en vivo de la página. Por favor, arrastra el control deslizante en el lado izquierdo de CodeSandbox para inspeccionar el código.

En este ejemplo, se crea un elemento de React llamado article y se renderiza en el contenedor raíz especificado.