El método React.createRoot debería ser la primera función llamada en tu aplicación de React. Reemplaza el método anterior ReactDOM.render (desde React v18) y tiene varias mejoras que ayudan a hacer tu aplicación más eficiente y responsiva.
Aquí está la aplicación React JS más pequeña posible y cómo debes usar la función createRoot para comenzar a usar React:
1import React from 'react'; 2import ReactDOM from 'react-dom/client'; 3 4// Define un componente simple que será toda tu aplicación React.js (por ahora) 5const App = () => { 6 return ( 7 <div>¡Hola, Mundo!</div> 8 ); 9}; 10 11// Crea un contenedor raíz y renderiza el componente 12const root = ReactDOM.createRoot(document.getElementById('root')); 13root.render(<App />);
Todo React.js es solo un truco mágico para facilitar la vida del desarrollador, en realidad, la única forma de hacer sitios web dinámicos con javascript es usando el DOM (modelo de objeto de documento), y es realmente molesto de usar.
React todavía tiene que conectarse al DOM antes de poder comenzar a hacer su trabajo, el método ReactDOM.createRoot fue creado justamente para eso; vincula tu primer componente de react (generalmente llamado <App>) a tu primera etiqueta div de HTML (generalmente con el id root).
Necesitas un sitio web HTML tradicional y casi vacío con al menos una etiqueta <div> con el ID root como este:
1<!DOCTYPE html> 2<html lang="es"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>La Aplicación React Más Pequeña</title> 7</head> 8<body> 9 <div id="root"></div> 10 <script src="index.js"></script> 11</body> 12</html>
Y luego puedes llamar a la función ReactDOM.createRoot usando javascript de esta manera:
1// Crea un contenedor raíz y renderiza el componente 2const root = ReactDOM.createRoot(document.getElementById('root')); 3root.render(<App />);
Observa cómo el componente
<App />se referencia como el primer componente React.js de esta aplicación.
Después de llamar a la función createRoot, no tienes que preocuparte por el DOM nunca más, puedes crear tantos componentes react js como necesites y referenciarlos dentro del código, por ejemplo:
1// Este componente es usado por App 2const Card = () => { 3 return ( 4 <div>Soy una tarjeta</div> 5 ); 6}; 7 8// Tu componente principal App utiliza otro componente Card 9const App = () => { 10 return ( 11 <div>¡Hola, Mundo!</div> 12 <div>Aquí están los coches: <Card /></div> 13 ); 14}; 15 16// Crea un contenedor raíz y renderiza el componente 17const root = ReactDOM.createRoot(document.getElementById('root')); 18root.render(<App />);
ReactDOM.render ya no se usaEn versiones anteriores de react usábamos ReactDOM.render en lugar de ReactDOM.createRoot, pero esa función está obsoleta y ya no se recomienda más. El cambio se realizó desde React v18 porque la nueva función tiene un rendimiento mucho mejor y muchas otras ventajas como:
ReactDOM.render vs ReactDOM.createRootSi queremos ponernos técnicos, lo que hace createRoot una función mejor es su capacidad de realizar renderizado concurrente: El renderizado concurrente permite a React trabajar en múltiples tareas simultáneamente. Puede comenzar a renderizar una actualización, pausarla si surge algo más urgente (como entrada del usuario), y luego continuar el proceso de renderizado más tarde. Este comportamiento no bloqueante ayuda a mantener la interfaz de usuario responsiva.