Curso de Desarrollo Frontend con React

Lección 1 • Elementos Esenciales de JavaScript para React

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

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

Instala Node.js, npm y VS Code, luego genera un proyecto con Vite. Los estudiantes terminan la sección con una app de React funcionando 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 de 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

Presenta la prop children, composición estilo slot y componentes wrapper. 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 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. Proporciona a los estudiantes una base de en qué se compila JSX 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 persistir valores mutables a través de renders sin desencadenar re-renders. Complementa a useState para el estado no visual.

Lección 2 • Manejo de Eventos de Usuario

Cubre eventos sintéticos, patrones de manejadores de eventos y prevención del comportamiento por defecto 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-renders 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 pérdidas de memoria.

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

Aplica objetos de estilo de JavaScript para estilado dinámico basado en props y explica los nombres de propiedad en camelCase. Destaca las ventajas y desventajas de rendimiento frente a enfoques basados en clases.

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

Crea componentes estilados usando template literals etiquetados y pasa props para estilos dinámicos. Compara CSS-en-JS con Módulos CSS para la idoneidad en equipos y proyectos.

Lección 3 • CSS Utility-First con Tailwind

Integra Tailwind CSS en un proyecto Vite-React y aplica clases utilitarias 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 estilado con alcance presentadas en secciones posteriores.

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

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

Lección 2 • Rutas Anidadas y Layouts

Usa elementos Route anidados y el componente Outlet para compartir layouts persistentes a través de rutas hijas. Reduce la duplicación de layouts en aplicaciones de múltiples secciones.

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

Instala React Router, envuelve la app 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 wrapper que redirige a usuarios no autenticados usando Navigate. Introduce el estado de autenticación como una cuestión de enrutamiento sin implementar un sistema de autenticación completo.

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

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

Lección 2 • Estado Complejo con useReducer

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

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 contexto para prevenir re-renders 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 Scroll 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 scroll.

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 maneja el estado de carga y error con useState. Establece la línea base antes de introducir abstracciones.

Lección 3 • Axios para Peticiones HTTP

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

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 bundle 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

Usa el Profiler de React DevTools y las herramientas de rendimiento del navegador para localizar re-renders 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 las variables de entorno y la configuración en tiempo de build.

Lección 4 • Callbacks Estables con useCallback

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