A tu propio ritmo

Explora nuestra extensa colección de cursos diseñados para ayudarte a dominar varios temas y habilidades. Ya seas un principiante o un aprendiz avanzado, aquí hay algo para todos.

Bootcamp

Aprende en vivo

Únete a nosotros en nuestros talleres gratuitos, webinars y otros eventos para aprender más sobre nuestros programas y comenzar tu camino para convertirte en desarrollador.

Próximos eventos en vivo

Catálogo de contenidos

Para los geeks autodidactas, este es nuestro extenso catálogo de contenido con todos los materiales y tutoriales que hemos desarrollado hasta el día de hoy.

Tiene sentido comenzar a aprender leyendo y viendo videos sobre los fundamentos y cómo funcionan las cosas.

Buscar en lecciones


IngresarEmpezar
← Regresar a lecciones
Editar en Github

La Funcion React Createroot Vs Render

createRoot es lo que conecta React al DOM tradicional de JS
ReactDOM.render ya no se usa

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

createRoot es lo que conecta React al DOM tradicional de JS

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.

Olvídate del DOM para siempre

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 usa

En 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:

  • Mejor gestión de recursos: Ayuda a React a gestionar los recursos del sistema de manera más eficiente, asegurando que las actualizaciones de tu aplicación se manejen de una manera que optimice el rendimiento y la responsividad.
  • Mejora de la experiencia del usuario: El método permite a React gestionar mejor cómo y cuándo se muestran las actualizaciones al usuario, lo que resulta en una experiencia más fluida y sin interrupciones.
  • Flexibilidad para los desarrolladores: Los desarrolladores ahora pueden definir qué actualizaciones son urgentes y cuáles pueden diferirse, brindando más control sobre el proceso de renderizado.

ReactDOM.render vs ReactDOM.createRoot

Si 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.