Curso de Desarrollo Frontend con React

Lección 1 • JavaScript Esencial para React

Revisa la sintaxis de ES6+ requerida a lo largo del curso: funciones flecha, desestructuración, módulos y promesas. Previene confusiones de sintaxis en el código de React más adelante.

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 corriendo en localhost.

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

Cubre el DOM, CSSOM y el pipeline de renderizado desde el análisis de HTML hasta el pintado. 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 biblioteca 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, composición estilo slot y 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 Keys

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

Lección 3 • Escribiendo y Comprendiendo 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 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 DOM y Valores Mutables

Demuestra useRef para acceso directo al DOM y para persistir valores mutables a través de renders sin disparar re-renders. 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 prevención del comportamiento predeterminado del navegador. Se combina con useState para producir componentes interactivos de formularios y botones.

Lección 3 • Introduciendo useState

Explica el estado como datos que disparan 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 obtención de datos, suscripciones y manipulación del DOM después del renderizado. Cubre el arreglo de dependencias y 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 estilizado dinámico basado en props y explica los nombres de propiedad en camelCase. Destaca las compensaciones de rendimiento frente a 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 ajuste de equipo y proyecto.

Lección 3 • CSS Utility-First 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 Simple y Estilos Globales

Importa hojas de estilo globales y explica las colisiones de nombres de clase en apps grandes. Motiva las soluciones de estilizado 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. Permite 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 layout en aplicaciones de múltiples secciones.

Lección 3 • Configurando 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 envolvente 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 Bibliotecas de Estado Externas

Examina Zustand y Redux Toolkit como alternativas a Context para apps grandes. Cubre cuándo el estado integrado 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 empareja con Context para construir un patrón de estado global ligero.

Lección 3 • React Context API

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 • Construyendo 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 carga de datos basada en páginas y cursores usando useInfiniteQuery de React Query. Cubre patrones de UI para botones de cargar más y obtención activada por desplazamiento.

Lección 2 • Obteniendo Datos con useEffect y Fetch API

Implementa el patrón de obtener 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 para 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 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 características 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 difiriendo JavaScript no crítico.

Lección 2 • Identificando Cuellos de Botella de Rendimiento

Usa React DevTools Profiler y herramientas de rendimiento del navegador para localizar re-renders innecesarios y componentes lentos. Establece un flujo de trabajo de optimización de medir primero.

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 referencias a funciones pasadas como props usando useCallback para prevenir re-renders de hijos. Se empareja con React.memo para completar el conjunto de herramientas de memoización.