Cambios en React 18: ReactDOM.createRoot

3/23

Lectura

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:

鈿狅笍 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! 馃挭

Aportes 7

Preguntas 1

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

A d铆a de hoy en la versi贸n 18:

"react": "^18.0.0",
"react-dom": "^18.0.0",

La importaci贸n se hace desde: 鈥rom 鈥榬eact-dom/client鈥;

Quedando el index.js as铆:

import * as ReactDOMClient from 'react-dom/client';
import App from './App';

const container = document.getElementById('root');
const root = ReactDOMClient.createRoot(container);

root.render(
  <App />
);

Gracias por mantener el curso actualizado profe JuanDC!

Gracias profe Juan David Castro por tomarte el tiempo de realizar estas actualizaciones.

En GitHub encontramos el hist贸rico de Releases: https://github.com/facebook/react/releases

Cambios en el index.js con la v18:

Yo pasar茅 de largo esta clase y volver茅 cuando acabe el curso. Hay que tener en cuenta que al ser algo nuevo, es m谩s seguro que a煤n no sea usado por las empresas, en espacial al buscar trabajo. A mi punto de vista es mejor ir por lo que ya est谩 fijo y cuando se tiene los conocimientos necesarios se puede ir actualizando m谩s r谩pido

Una forma un poco m谩s recortada y sin tener que crear dos variables para el root es de esta manera:

createRoot(document.getElementById('root'))
.render(<App />)