Curso de Desarrollo Frontend con React

Lección 1 • Fundamentos de JavaScript para React

Repasa la sintaxis ES6+ requerida a lo largo del curso: funciones flecha, desestructuración, módulos y promesas. Previene 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, luego estructura un proyecto con Vite. Los estudiantes terminan la sección con una aplicación React ejecutándose en localhost.

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

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

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

Posiciona a React como una librería de UI, no un framework completo, y lo contrasta con Angular y Vue. Aclara qué resuelve React y qué herramientas complementarias llenan los vacíos.

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

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

Lección 2 • Renderizado de Listas y Keys

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

Lección 3 • Escribiendo y Entendiendo JSX

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

Lección 4 • Componentes Funcionales

Define un componente funcional como una función pura que retorna JSX y cubre la nomenclatura, patrones de exportación y 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 acceso directo al DOM y para persistir valores mutables a través de renderizados sin provocar re-renderizados. Complementa a useState para estado no visual.

Lección 2 • Manejo de Eventos de Usuario

Cubre eventos sintéticos, 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 arreglo 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 estilización dinámica basada 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 styled components usando literales de plantilla etiquetados y pasa props para estilos dinámicos. Compara CSS-in-JS con módulos CSS para determinar la 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 prefijos responsivos y 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 estilización con ámbito introducidas en secciones posteriores.

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

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

Lección 2 • Rutas Anidadas y Layouts

Utiliza elementos Route anidados y el componente Outlet para compartir layouts persistentes a través de rutas hijas. Reduce la duplicación de layout en aplicaciones de 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 envoltorio que redirige a usuarios no autenticados usando Navigate. Introduce el estado de autenticación como una preocupación de enrutamiento sin implementar un sistema de autenticación completo.

Lección 1 • Introducción a Librerías de Estado Externas

Examina Zustand y Redux Toolkit como alternativas al Contexto para aplicaciones grandes. Cubre cuándo el estado incorporado de React es insuficiente y cómo difieren los stores externos.

Lección 2 • Estado Complejo con useReducer

Modela transiciones de estado como funciones reductoras puras y despacha acciones tipadas. Se combina con Contexto para construir un patrón de estado global ligero.

Lección 3 • API de Contexto de React

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

Lección 4 • Construcción de Hooks Personalizados

Extrae lógica con estado reutilizable en hooks personalizados con el prefijo use. Demuestra hooks para obtención de datos, manejo de formularios y sincronización con 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 de 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 Solicitudes HTTP

Reemplaza fetch con 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 encabezados predeterminados.

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 callbacks de mutación de React Query. Mejora el rendimiento percibido para funcionalidades con muchas escrituras.

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 al diferir JavaScript no crítico.

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

Utiliza React DevTools Profiler y herramientas de rendimiento del navegador para localizar re-renderizados innecesarios y componentes lentos. Establece un flujo de trabajo de optimización que prioriza la medición.

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

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

Lección 4 • Callbacks Estables con useCallback

Estabiliza las referencias de 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.