Cambios en React 18: ReactDOM.createRoot
Clase 3 de 23 • Curso de React 17
Contenido del curso
Clase 3 de 23 • Curso de React 17
Contenido del curso
Hello, Platzinauta!
React 18 fue publicado el 29 de marzo de 2022. Sus cambios más importantes van a ayudar muchísimo para optimizar el render e hidratación de aplicaciones o componentes de React en el DOM. El más importante, crucial y significativo fue la migración de ReactDOM.render a ReactDOM.createRoot.
En la próxima clase vamos a usar Create React App, una de las herramientas más populares para instalar un entorno de desarrollo con React.js de forma muy rápida. No hay absolutamente ningún problema si decides usar React 18. Solo ten en consideración los cambios para hacer el render principal de tu aplicación.
Migración de ReactDOM.render a ReactDOM.createRoot
Antes de React 18:
const root = document.getElementById('root'); ReactDOM.render(e(LikeButton), root);
Desde React 18:
const rootElement = document.getElementById('root'); const root = ReactDom.createRoot(rootElement); root.render(e(LikeButton));
Antes de React 18:
ReactDOM.render( <React.StrictMode> <App /> </React.StrictMode>, document.getElementById('root') );
Desde React 18:
const rootElement = document.getElementById('root'); const root = ReactDom.createRoot(rootElement); root.render( <React.StrictMode> <App /> </React.StrictMode> );
Actualizaciones de React
En los siguientes recursos puedes estudiar más a detalle los cambios de React y ReactDOM en su versión 18:
Además, si quieres conocer un poco más a fondo la filosofía y principios de diseño de React para elegir cómo hacer sus actualizaciones, te recomiendo tomar la siguiente clase:
:warning: Si apenas estás empezando tu ruta de aprendizaje con React.js, no tienes que preocuparte por nada de esto. Todas las herramientas se actualizan constantemente, igual que los cursos de Platzi. Esa es la norma y el día a día en el mundo de la tecnología. Más adelante comprenderás la importancia y lo divertido de todas estas actualizaciones.
¡Ahora sí! ¡Te espero en la siguiente clase para crear nuestra primera aplicación con React.js! :muscle:
