Curso Avanzado de React

Lección 1 • Componentes Funcionales y Props

Define componentes funcionales reutilizables y pasa datos mediante props. Introduce el modelo de componentes que sustenta toda la arquitectura de React.

Lección 2 • Gestión del Estado con useState

Gestiona el estado local del componente utilizando el hook useState y activa nuevos renderizados al cambiar. Proporciona la capa de datos reactiva para interfaces de usuario interactivas.

Lección 3 • Manejo de Eventos en React

Asigna manejadores de eventos sintéticos a elementos JSX y gestiona las interacciones del usuario. Conecta las acciones del usuario con los cambios de estado introducidos en la sección anterior.

Lección 4 • Sintaxis JSX y Fundamentos de Renderizado

Comprende JSX como azúcar sintáctico sobre React.createElement y cómo el DOM virtual renderiza la interfaz de usuario. Conecta la lógica de JavaScript con el marcado declarativo.

Lección 1 • Comprender el Hook useEffect

Ejecuta efectos secundarios después de los renderizados y controla la ejecución con un array de dependencias. Reemplaza componentDidMount, componentDidUpdate y componentWillUnmount.

Lección 2 • useReducer para Lógica de Estado Compleja

Gestiona transiciones de estado de múltiples acciones con una función reductora y un patrón de despacho. Prepara a los estudiantes para el pensamiento al estilo Redux que se introducirá más adelante.

Lección 3 • Optimización con useCallback y useMemo

Memoriza funciones y valores calculados para prevenir re-renderizados innecesarios. Mejora directamente el rendimiento en los árboles de componentes construidos en capítulos anteriores.

Lección 4 • useRef para Acceso al DOM y Persistencia

Almacena valores mutables y accede a nodos del DOM sin activar re-renderizados utilizando useRef. Complementa useState para necesidades de datos no reactivos.

Lección 1 • Estrategias de Composición de Componentes

Favorece la composición sobre la herencia para construir interfaces de usuario flexibles a partir de componentes pequeños y enfocados. Refuerza el principio de responsabilidad única en React.

Lección 2 • API de Contexto para Preocupaciones Transversales

Proporciona valores globales como temas y configuración regional sin prop drilling utilizando la API de Contexto. Conecta el estado local del Capítulo 1 con el estado de toda la aplicación.

Lección 3 • Render Props y Componentes de Orden Superior

Inyecta comportamiento mediante render props y HOC para extender la funcionalidad de los componentes sin herencia. Contrasta con los hooks para mostrar enfoques históricos y actuales.

Lección 4 • Límites de Error e Interfaz de Usuario de Reserva

Captura errores en tiempo de ejecución en árboles de componentes con límites de error y muestra alternativas gráficas adecuadas. Añade resiliencia en producción a los patrones cubiertos en este capítulo.

Lección 1 • Configuración de React Router y Navegación Básica

Instala React Router, configura BrowserRouter y define los elementos Route y Link. Establece la base de navegación para todos los temas de enrutamiento posteriores.

Lección 2 • Rutas Dinámicas y Parámetros de URL

Extrae parámetros de URL y cadenas de consulta para renderizar páginas basadas en datos. Conecta el enrutamiento con los patrones de obtención de datos del Capítulo 2.

Lección 3 • División de Código y Carga Diferida de Rutas

Carga componentes de ruta bajo demanda con React.lazy y Suspense para reducir el tamaño inicial del paquete. Mejora directamente el rendimiento para SPAs grandes.

Lección 4 • Rutas Protegidas y Guardianes de Autenticación

Redirige a los usuarios no autenticados fuera de las rutas privadas utilizando componentes envolventes. Introduce la gestión del estado de autenticación que alimenta el capítulo de estado más adelante.

Lección 1 • Selectores y Estado Derivado

Deriva y memoriza el estado calculado con createSelector para mantener los componentes desacoplados de la forma del store. Aplica los conceptos de useMemo del Capítulo 2 a nivel de store.

Lección 2 • Creación de Slices con createSlice

Genera reductores y creadores de acciones a partir de una única definición de slice utilizando mutaciones potenciadas por Immer. Elimina el código repetitivo de los patrones tradicionales de Redux.

Lección 3 • RTK Query para Obtención de Datos

Reemplaza los thunks manuales con los hooks autogenerados de RTK Query para almacenamiento en caché, sondeo e invalidación. Optimiza la gestión del estado del servidor en aplicaciones Redux.

Lección 4 • Conceptos Básicos de Redux y Configuración del Store

Comprende las acciones, los reductores y el store, luego configura uno con configureStore de Redux Toolkit. Se basa en el patrón reductor introducido en el Capítulo 2.

Lección 1 • Optimización de Paquetes y Tree Shaking

Reduce la carga útil de JavaScript mediante tree shaking, importaciones dinámicas y auditoría de dependencias. Complementa las técnicas de división de código de enrutamiento del Capítulo 4.

Lección 2 • Virtualización para Listas Grandes

Renderiza solo las filas visibles en conjuntos de datos grandes utilizando bibliotecas de ventanas para reducir el recuento de nodos del DOM. Resuelve un cuello de botella de rendimiento común en interfaces de usuario con muchos datos.

Lección 3 • Funcionalidades Concurrentes y Transiciones

Utiliza las funcionalidades concurrentes de React 18—useTransition y useDeferredValue—para mantener la capacidad de respuesta de la interfaz de usuario durante actualizaciones pesadas. Representa la frontera actual del renderizado de React.

Lección 4 • Perfilado de Aplicaciones React

Utiliza el Profiler de React DevTools y las herramientas de rendimiento del navegador para localizar renderizados lentos. Establece un enfoque basado en la medición antes de aplicar cualquier optimización.

Lección 1 • Simulación de APIs y Pruebas Asíncronas

Intercepta solicitudes de red con Mock Service Worker y prueba las transiciones de estado asíncronas. Valida los patrones de obtención de datos construidos en los Capítulos 2 y 5.

Lección 2 • Pruebas de Componentes Conectados a Redux

Renderiza componentes dentro de un store de Redux real o simulado y realiza aserciones sobre las acciones despachadas. Vincula las pruebas directamente con la arquitectura Redux del Capítulo 5.

Lección 3 • Pruebas de Componentes con React Testing Library

Consulta, interactúa y realiza aserciones sobre los componentes renderizados utilizando consultas accesibles. Fomenta las pruebas desde la perspectiva del usuario en lugar de los detalles de implementación.

Lección 4 • Filosofía de Pruebas y Configuración de Herramientas

Comprende la pirámide de pruebas y configura Jest con React Testing Library. Enmarca la estrategia de pruebas aplicada a lo largo de este capítulo.

Lección 1 • Accesibilidad en Aplicaciones React

Implementa atributos ARIA, navegación por teclado y gestión del foco para cumplir con los estándares de accesibilidad. Asegura que los patrones de componentes del Capítulo 3 sean inclusivos por defecto.

Lección 2 • Renderizado en el Servidor y Generación Estática

Pre-renderiza componentes de React en el servidor con Next.js para mejorar el SEO y el tiempo de carga inicial. Extiende el enrutamiento del lado del cliente del Capítulo 4 a un modelo de stack completo.

Lección 3 • Mejores Prácticas de Seguridad en React

Previene XSS, CSRF y la exposición insegura de datos aplicando medidas de seguridad web específicas de React y generales. Protege las capas de autenticación y datos construidas en capítulos anteriores.

Lección 4 • Canalizaciones de CI/CD y Despliegue

Automatiza las pruebas, la compilación y el despliegue de aplicaciones React a través de una canalización de CI/CD. Pone en funcionamiento el conjunto de pruebas del Capítulo 7 en un proceso de lanzamiento repetible.