Me gusta mucho que tengan un enfoque al ámbito laborar, practicamente la mayoría estamos aquí para eso, para trabajar y aportar a la programación y tecnología. Excelente clase!⭐⭐⭐⭐
Introducción y requisitos
¿Qué necesitas para aprender React.js?
Maquetación con React.js
¿Qué es un componente?
Componentes de TODO Machine
¿Cómo se comunican los componentes? Props y atributos
Estilos CSS en React
Interacción con React.js
Eventos en React: onClick, onChange
¿Qué es el estado?
Contando TODOs
Buscando TODOs
Completando y eliminando TODOs
Librería de Iconos Personalizados
Iconos en React: librerías y SVG
Iconos con colores dinámicos
Herramientas avanzadas: escalabilidad, organización y persistencia
Local Storage con React.js
Custom Hooks
Organización de archivos y carpetas
Feature-First Directories en React
Tips para naming y abstracción de componentes React
¿Qué son los efectos en React?
Estados de carga y error
Actualizando estados desde useEffect
Reto: loading skeletons
¿Qué es React Context?
useContext
¿Qué son los React Portals?
Reto: estados para abrir y cerrar un modal
Maquetando formularios en React
Crear TODOs: React Context dentro de React Portals
Deploy
Despliegue de TODO Machine en GitHub Pages
Presentación de proyectos para tu portafolio
Próximos pasos: React #UnderTheHood
Diferencias entre versiones de React.js
¿Cuándo realmente necesitas React.js?
Bonus: creando proyectos en React desde cero
React con Create React App
React con Next.js
React con Vite
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
Diferencias entre versiones de React.js
30/34Recursos
Aportes 48
Preguntas 2
Ordenar por:
Excelente actualización del curso!! ❤️
Me gustaria trabajar en Platzi 😃
Platzi, agreguen un boton de Like, por favor!! De verdad quería darle “Me Gusta” a esta clase. Excelente!!
Excelente curso con esta reflexión de la vida real en ambientes laborales
Que necesaria esta intervención del curso.
Me parece bien aterrizar a como funciona el mundo en la realidad.
Me gusta que integren estos consejos en los cursos, considero que son super importantes y de gran valor para el aprendizaje.
Muchas gracias! 🙌🏻😁
Excelente consejo final, igualmente excelente curso.
Me gustó mucho este curso actualizado.
Esta es la mejor clase que he visto, no solo en Platzi, en toda mi vida
jejeje, que buenas clases, lo hacen reír a uno cuando menos lo espero.
Realmente llevo un tiempo estudiando programación y este consejo jamas me lo habían dado, excelente aporte! Muchas gracias por este conocimiento 😃
Esta clase en particular los conocimientos nuevos que me entero, son aclaraciones que calma nuestra ansiedad de aprender todo lo nuevo. Buenísima esta!
Este curso es magnifico
gracias profe Juan, que buenos tips…
muy bueno este curso por que salí de estudiar desarrollo de software y me ah sido difícil conseguir trabajo y veo que es por no saber comunicar mi trabajo.
Gran clase, gracias profe por el curso actualizado
👌🚀
Ya que lo mencionan, esta clase va fatal. No puedo ver mas de 20 segundos seguidos (no es el internet, porque probe youtube y va bien). No es la unica clase, ya me paso con varias y es muy tedioso estudiar asi porque se pierde el hilo de la clase
🙏 Cuanta sabiduría en una sola clase!
Eternamente agradecido al profesor y al equipo de Platzi por tan valiosa lección.
Muchas gracias!!
Aquí hay algunos ajustes que podrías considerar al retroceder de la versión 17 a la versión 16 de React:
-
Ajustes en las importaciones: En la versión 17 de React, se introdujo una nueva forma de importar los módulos, utilizando el formato de “namespace import”. En la versión 16, puedes volver a utilizar las importaciones normales de ES6. Asegúrate de actualizar las importaciones en tu código, por ejemplo, cambiando import * as React from ‘react’ a import React from ‘react’.
-
Cambios en el uso de las refs: La forma de acceder a las refs en los componentes cambió entre la versión 16 y la versión 17. En la versión 16, puedes utilizar ref={(ref) => this.myRef = ref} para asignar una ref a un elemento. Asegúrate de ajustar cualquier código relacionado con el uso de refs en tu aplicación.
-
Revisar cambios específicos: La versión 17 de React introdujo algunos cambios específicos en el comportamiento y las API de React. Al retroceder a la versión 16, revisa los cambios entre las versiones y ajusta tu código en consecuencia.
-
Realizar pruebas exhaustivas: Después de realizar los ajustes, es importante realizar pruebas exhaustivas en tu aplicación para asegurarte de que todo funcione correctamente. Prueba todas las funcionalidades y verifica que no haya errores o problemas.
Recuerda que es recomendable seguir utilizando la versión más reciente de React, ya que cada versión trae mejoras, correcciones de errores y nuevas características. Retroceder a versiones anteriores puede llevar a problemas de compatibilidad y limitar las capacidades de tu aplicación.
Me da la sensación que a él le paso eso de React 13 cuando entro a trabajar en platzi
Vengo del futuro, en Octubre del 2024 seguimos en react 18 :,)
Este ejercicio de manejar las diferentes versiones de un programa, modulo, paquete, librería, etc es más parecido a la realidad de lo que parece. Me gusta muchísimo que haya tomado lugar este tema dentro del curso.
Que Grandioso este curso la profundidad , los ejemplos muy entendibles y un grandioso maestro
Gracias por esta clase Juan! Fué una de mis preferidas. Tener un panorama más amplio en estos temas que se conectan con lo laboral, es super valioso.
Si sigue sin funcionar luego de hacer los cambios fijense si borraron bien tanto el node\_modules como el package-lock-json, yo tuve ese error ya que me equivoque de nombre y estuve un tiempo tratando de solucionarlo hasta que me di cuenta
Excelente vídeo!!! este contenido es valor de verdad. Estoy en la industria y desde hace 2 años estamos que queremos cambiar de versión, pero no hemos podido. precisamente por el tiempo y las prioridades.
React 16 para abajo está basado en ClassComponents y lo que hemos trabajado es el nuevo enfoque: FunctionalComponents
Un consejo para borrar en cualquier carpeta/fichero usando el mismo comando independiente al sistema operativo, mediante un paquete de npm llamado rimraf, en windows es mucho más rápido que eliminar a través del explorador de ficheros.
En el caso del vídeo sería:
npx rimraf node\_modules
Muy buena clase complementaria. 10/10. Excelente
Me encanto este curso actualizado
Lo mas ideal sería generar una rama llamada react-16 para que en caso de que “rompamos” la app, siempre tengamos como un respaldo.
Asi me sapio GPT, a pesar de que la vs 18 de react se lanzo en el 22 y GPT3 esta actualizado hasta el 21
Importante leer la Documentacion para entender el codigo que tira GPT
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App'; // O el nombre de tu componente principal
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
Definitivamente desconocía de este tema…es una visión dentro de un entorno de trabajo…espero esta didáctica se introduzcan en todos los cursos a paritr de ahora.
Gracias, gracias, excelente 🎇🎇🎇🎇🎇🎇
Yo lo corregí así:
Yo lo corregí así:
```js
// Con React 18
// import React from 'react';
// import ReactDOM from 'react-dom/client';
// import './index.css';
// import App from './App';
// const root = ReactDOM.createRoot(document.getElementById('root'));
// root.render(<App />);
// Con React 17
import React from "react";
import { render } from "react-dom";
import "./index.css";
import App from "./App";
const root = document.getElementById("root");
render(<App />, root);
```// Con React 18// import React from 'react';// import ReactDOM from 'react-dom/client';// import './index.css';// import App from './App';
// const root = ReactDOM.createRoot(document.getElementById('root'));// root.render(\<App />);
// Con React 17import React from "react";import { render } from "react-dom";import "./index.css";import App from "./App";
const root = document.getElementById("root");render(\<App />, root);
excelente consejo
Excelente consejo!
Extraordinario el profe...
Hice el cambio para hacer el proceso con la version 16, pero me sigue funcionando Jajaja
Investigue aunque en mi caso react no tuvo problemas al iniciar jajaja
Que gran clase y excelentes recomendaciones para aterrizarnos una vez estemos en el campo laboral.
Buen ejemplo para tomarlo
import ReactDOM from 'react-dom/client'; <- This import is only for React version 18
import { render } from 'react-dom'; <- This is the correct import statement for React version 17
solo queda decir: waos jajaja
2:20 :) 2:31
Encantado con tu curso profe
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?