Curso de Desarrollador React

Clase 1 • Clases y prototipos

Presenta la sintaxis de clases, la herencia y la cadena de prototipos. Proporciona contexto para entender los componentes de React basados en clases y los métodos del ciclo de vida.

Clase 2 • Promesas y async/await

Explica la ejecución asíncrona, el encadenamiento de promesas y la sintaxis de async/await. Prepara a los estudiantes para la obtención de datos dentro de componentes de React.

Clase 3 • Fundamentos de sintaxis ES6

Cubre let/const, funciones flecha, template literals y desestructuración. Estos patrones aparecen en todo código base de React.

Clase 4 • Módulos e import/export

Enseña exportaciones nombradas y por defecto, resolución de módulos y expectativas de los empaquetadores. Habilita directamente la organización de archivos de componentes en proyectos de React.

Clase 1 • Configuración de un proyecto de React

Guía a través del scaffolding de proyectos con Vite y Create React App, la estructura de carpetas y el uso del servidor de desarrollo. Los estudiantes se van con un entorno local funcionando.

Clase 2 • Qué es React y por qué

Explica el DOM virtual, la interfaz de usuario declarativa y el lugar de React en el ecosistema front-end. Establece la base conceptual para todo el trabajo posterior con React.

Clase 3 • Renderizado de listas y condicionales

Cubre el renderizado de listas basado en keys y patrones de renderizado condicional. Estas son las técnicas de UI dinámica más comunes en React.

Clase 4 • Sintaxis y reglas de JSX

Cubre la transpilación de JSX, la incrustación de expresiones y reglas específicas de JSX como className y etiquetas de cierre automático. Conecta JSX con el JavaScript al que compila.

Clase 1 • Elevación del estado

Explica cómo compartir el estado entre componentes hermanos moviéndolo a un padre común. Refuerza el principio de flujo de datos unidireccional.

Clase 2 • Actualizaciones de estado inmutable

Cubre por qué React requiere actualizaciones inmutables y cómo aplicarlas a objetos y arrays. Previene bugs comunes causados por la mutación directa.

Clase 3 • Componentes de formulario controlados

Enseña inputs controlados donde el estado de React maneja los valores del formulario. Permite una validación y un manejo de envío de formularios confiables.

Clase 4 • Fundamentos del hook useState

Explica la inicialización del estado, la función setter y los disparadores de re-renderizado. useState es la herramienta principal para la interactividad local en componentes funcionales.

Clase 1 • Funciones de limpieza

Enseña a devolver funciones de limpieza para cancelar suscripciones y temporizadores. Previene pérdidas de memoria en componentes de larga duración.

Clase 2 • Mecánica del hook useEffect

Cubre la sintaxis del efecto, el array de dependencias y el momento de ejecución. Los estudiantes obtienen un control preciso sobre cuándo se ejecutan los efectos.

Clase 3 • Resumen del ciclo de vida de componentes de clase

Mapea componentDidMount, componentDidUpdate y componentWillUnmount a sus equivalentes en useEffect. Prepara a los estudiantes para leer bases de código heredadas.

Clase 4 • Entendiendo los efectos secundarios

Define los efectos secundarios en React y explica por qué deben aislarse del renderizado. Motiva la necesidad de useEffect.

Clase 1 • useMemo y useCallback

Explica la memoización de valores y funciones para prevenir recálculos y re-renderizados innecesarios. Introduce el pensamiento de optimización de rendimiento.

Clase 2 • useContext para datos compartidos

Enseña la creación y el consumo de contexto para evitar el prop drilling. Se conecta con los patrones de estado global introducidos en el capítulo de manejo de estado.

Clase 3 • useReducer para estado complejo

Presenta el patrón reducer para manejar lógica de estado con múltiples acciones. Prepara a los estudiantes para el pensamiento al estilo Redux dentro de un solo componente.

Clase 4 • useRef y el DOM

Cubre useRef para el acceso al DOM y la persistencia de valores mutables a través de renderizados. Permite el manejo del foco, animaciones e integración con librerías de terceros.

Clase 1 • Navegación y Links

Enseña Link, NavLink y navegación programática con useNavigate. Permite patrones de navegación tanto declarativos como imperativos.

Clase 2 • Configuración y conceptos básicos de React Router

Cubre los componentes BrowserRouter, Routes y Route para definir el árbol de navegación de una aplicación. Establece el modelo de enrutamiento declarativo.

Clase 3 • Rutas anidadas y layouts

Explica los árboles de Route anidados y el componente Outlet para layouts compartidos. Reduce la duplicación de layouts en páginas relacionadas.

Clase 4 • Rutas protegidas y guardias de autenticación

Implementa guardias de ruta que redirigen a usuarios no autenticados. Aplica el conocimiento de contexto y enrutamiento en un patrón realista.

Clase 1 • Fundamentos de Redux Toolkit

Presenta el store, slices y reducers de Redux Toolkit como el enfoque moderno de Redux. Reemplaza los patrones clásicos de Redux con mucho boilerplate.

Clase 2 • Elección de la solución de estado correcta

Compara estado local, Context, Redux y Zustand por complejidad y caso de uso. Equipa a los estudiantes para tomar decisiones de arquitectura en proyectos reales.

Clase 3 • Context API a escala

Extiende los patrones de useContext al estado de toda la aplicación con múltiples contextos y optimizaciones de rendimiento. Cubre cuándo Context es suficiente.

Clase 4 • Lectura y escritura del estado de Redux

Cubre los hooks useSelector y useDispatch para la interacción con el store a nivel de componente. Permite que los componentes lean slices y despachen acciones.

Clase 1 • Construcción y despliegue de aplicaciones React

Guía a través de las builds de producción, la configuración del entorno y el despliegue en plataformas de hosting estático. Completa el ciclo de vida de desarrollo completo.

Clase 2 • Técnicas de optimización de rendimiento

Cubre React.memo, carga diferida (lazy loading) y división de código (code splitting) para reducir el tamaño del bundle y el costo de renderizado. Mejora directamente el rendimiento percibido por el usuario.

Clase 3 • Pruebas de componentes React

Presenta React Testing Library y Jest para pruebas unitarias y de integración. Cubre el renderizado, la consulta y la simulación de interacciones del usuario.

Clase 4 • Límites de error y resiliencia

Enseña límites de error basados en clases y UIs de respaldo para prevenir fallos completos de la aplicación. Añade resiliencia de producción a los árboles de componentes.