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: 鈥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 />
);

Me pas贸 que no me funcionaba el c贸digo del ejercicio 鈥渁dd 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(鈥渞oot鈥)).render(<React.StrictMode>
<App />
</React.StrictMode>)

Me parece muy importante esta tercera clase-info de 鈥楥ambios en React 18: ReactDOM.createRoot鈥. Bien hecho equipo!