Curso de Introducción a React.js

Curso de Introducción a React.js

Juan David Castro Gallego

Juan David Castro Gallego

Cambios en React 18: ReactDOM.createRoot

3/23

Lectura

Hello, Platzinauta!

...

Regístrate o inicia sesión para leer el resto del contenido.

Aportes 14

Preguntas 1

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

o inicia sesión.

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

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: …from ‘react-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 />
);

Me pasó que no me funcionaba el código del ejercicio “add react in one minute” y era a causa de que el código de esta clase esta mal escrito

const root = ReactDom.createRoot(rootElement);

Lo correcto es que DOM se mayúscula

const root = ReactDOM.createRoot(rootElement);

Algo tan simple y gaste un buen rato en darme cuenta

Gracias por mantener el curso actualizado profe JuanDC!

Que buen aporte Juan, vi en twitter que habia mucha gente que se alegraba por los nuevos cambios en la nueva version de react y me preguntaba como iba a ser en el momento de aprenderlo, cuando termine el curso voy a ver los links de las nuevas actualizaciones.

Cambios en el index.js con la v18:

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

Para la gente que esta empezando este curso con la versión 18 de react es importante que lo único que cambia es la manera en como hace el render, luego la forma en como enviar las propiedades(props) sigue siendo de la misma manera !!
Saludos

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

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

Información resumida de esta clase
#EstudiantesDePlatzi

  • el 29 de Marzo del 2022 React 18 fue publicado

  • El cambio más importante fue la migración de ReactDom.render a ReactDom.CreateRoot

  • Todas estas tecnologías siempre se están actualizando y esto es bueno

Cambios de React 18:

MIgracion de ReactDOM.render a ReactDOM.createRoot

tambien vi en un tutorial que usaban la siguiente sintaxis:
ReactDom.createRoot(document.getElementById(“root”)).render(<React.StrictMode>
<App />
</React.StrictMode>)

Me parece muy importante esta tercera clase-info de ‘Cambios en React 18: ReactDOM.createRoot’. Bien hecho equipo!