Curso de Desarrollo Frontend con React

Lección 1 • Fundamentos de JavaScript para React

Repasa la sintaxis de ES6+ necesaria a lo largo del curso: funciones flecha, desestructuración, módulos y promesas. Evita confusiones de sintaxis en el código React posterior.

Lección 2 • Configuración del Entorno de Desarrollo

Instala Node.js, npm y VS Code, y luego genera la estructura de un proyecto con Vite. Los estudiantes terminan la sección con una aplicación React en ejecución en localhost.

Lección 3 • Cómo Renderizan las Páginas Web los Navegadores

Cubre el DOM, el CSSOM y el pipeline de renderizado desde el análisis de HTML hasta el pintado. Establece el modelo del navegador que explica por qué es importante el DOM virtual de React.

Lección 4 • El Lugar de React en el Ecosistema

Sitúa a React como una biblioteca de UI, no un framework completo, y lo contrasta con Angular y Vue. Aclara qué resuelve React y qué herramientas complementarias cubren las carencias.

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

Introduce la prop children, la composición estilo slot y los componentes envolventes. Prepara a los estudiantes para construir estructuras de UI flexibles y reutilizables en capítulos posteriores.

Lección 2 • Renderizado de Listas y Claves

Utiliza Array.map para renderizar listas dinámicas y explica por qué React requiere props key estables. Aplica directamente las expresiones JSX y props de secciones anteriores.

Lección 3 • Escritura y Comprensión de JSX

Enseña JSX como azúcar sintáctico sobre React.createElement y cubre sus reglas y limitaciones. Fundamenta a los estudiantes en lo que JSX compila antes de que escriban componentes.

Lección 4 • Componentes Funcionales

Define un componente funcional como una función pura que devuelve JSX y cubre la nomenclatura, los patrones de exportación y las convenciones de archivos. Forma la unidad atómica para todos los capítulos futuros.

Lección 1 • useRef para el DOM y Valores Mutables

Demuestra useRef para el acceso directo al DOM y para mantener valores mutables a través de renderizados sin provocar re-renderizados. Complementa a useState para el estado no visual.

Lección 2 • Manejo de Eventos de Usuario

Cubre los eventos sintéticos, los patrones de manejadores de eventos y la prevención del comportamiento predeterminado del navegador. Se combina con useState para producir componentes interactivos de formularios y botones.

Lección 3 • Introducción a useState

Explica el estado como datos que desencadenan re-renderizados y demuestra useState para valores primitivos y objetos. Conecta los cambios de estado con el proceso de reconciliación del Capítulo 1.

Lección 4 • Efectos Secundarios con useEffect

Enseña useEffect para la obtención de datos, suscripciones y manipulación del DOM después del renderizado. Cubre el array de dependencias y las funciones de limpieza para prevenir fugas de memoria.

Lección 1 • Estilos en Línea y Objetos de Estilo

Aplica objetos de estilo de JavaScript para estilos dinámicos basados en props y explica los nombres de propiedad en camelCase. Destaca las compensaciones de rendimiento frente a los enfoques basados en clases.

Lección 2 • CSS-in-JS con Styled Components

Crea componentes estilizados usando literales de plantilla etiquetados y pasa props para estilos dinámicos. Compara CSS-in-JS con Módulos CSS para su adecuación al equipo y al proyecto.

Lección 3 • CSS Utilitario con Tailwind

Integra Tailwind CSS en un proyecto Vite-React y aplica clases de utilidad directamente en JSX. Cubre los prefijos responsivos y la aplicación condicional de clases.

Lección 4 • CSS Plano y Estilos Globales

Importa hojas de estilo globales y explica las colisiones de nombres de clase en aplicaciones grandes. Motiva las soluciones de estilizado con ámbito introducidas en secciones posteriores.

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

Define segmentos de ruta parametrizados y los lee con useParams. Permite páginas de detalle basadas en IDs de datos, un patrón usado en la mayoría de las aplicaciones reales.

Lección 2 • Rutas Anidadas y Maquetaciones

Utiliza elementos Route anidados y el componente Outlet para compartir maquetaciones persistentes en las rutas hijas. Reduce la duplicación de maquetación en aplicaciones con múltiples secciones.

Lección 3 • Configuración de React Router v6

Instala React Router, envuelve la aplicación en BrowserRouter y define rutas con los componentes Routes y Route. Produce un ejemplo funcional de navegación de dos páginas.

Lección 4 • Rutas Protegidas y Guardias de Navegación

Construye un componente envolvente que redirige a los usuarios no autenticados usando Navigate. Introduce el estado de autenticación como una preocupación del enrutamiento sin implementar un sistema de autenticación completo.

Lección 1 • Introducción a Bibliotecas de Estado Externas

Examina Zustand y Redux Toolkit como alternativas a Context para aplicaciones grandes. Cubre cuándo el estado incorporado de React es insuficiente y en qué se diferencian los almacenes externos.

Lección 2 • Estado Complejo con useReducer

Modela las transiciones de estado como funciones reductoras puras y envía acciones tipadas. Se combina con Context para construir un patrón ligero de estado global.

Lección 3 • API Context de React

Crea un contexto, proporciona un valor en la raíz del árbol y lo consume con useContext. Cubre la división de contextos para evitar re-renderizados innecesarios.

Lección 4 • Construcción de Hooks Personalizados

Extrae lógica de estado reutilizable en hooks personalizados con el prefijo use. Demuestra hooks para la obtención de datos, el manejo de formularios y la sincronización con el almacenamiento local.

Lección 1 • Paginación y Desplazamiento Infinito

Implementa la carga de datos basada en páginas y en cursor usando useInfiniteQuery de React Query. Cubre patrones de UI para botones "cargar más" y obtención activada por desplazamiento.

Lección 2 • Obtención de Datos con useEffect y la API Fetch

Implementa el patrón de obtención al montar dentro de useEffect y gestiona el estado de carga y error con useState. Establece la línea base antes de introducir abstracciones.

Lección 3 • Axios para Peticiones HTTP

Sustituye fetch por Axios para una sintaxis más limpia, análisis JSON automático e interceptores. Cubre la creación de una instancia de Axios con URL base y cabeceras predeterminadas.

Lección 4 • Actualizaciones Optimistas y Recuperación de Errores

Actualiza la UI antes de la confirmación del servidor y revierte en caso de fallo usando los callbacks de mutación de React Query. Mejora el rendimiento percibido en funcionalidades con mucha escritura.

Lección 1 • División de Código y Carga Diferida

Divide el paquete por ruta y componente usando React.lazy y Suspense. Reduce el tiempo de carga inicial aplazando el JavaScript no crítico.

Lección 2 • Identificación de Cuellos de Botella de Rendimiento

Utiliza el Profiler de React DevTools y las herramientas de rendimiento del navegador para localizar re-renderizados innecesarios y componentes lentos. Establece un flujo de trabajo de optimización basado en medir primero.

Lección 3 • Construcción y Despliegue de Producción

Ejecuta la construcción de producción de Vite, analiza la salida y despliega en una plataforma de alojamiento estático. Cubre las variables de entorno y la configuración en tiempo de construcción.

Lección 4 • Callbacks Estables con useCallback

Estabiliza las referencias a funciones pasadas como props usando useCallback para prevenir re-renderizados de hijos. Se combina con React.memo para completar el conjunto de herramientas de memoización.