React — Intermedio

Este curso está dirigido a desarrolladores que ya dominan los fundamentos de React y quieren consolidar su capacidad para construir aplicaciones reales de mayor complejidad. A lo largo de las ocho horas de formación, el participante aprenderá a diseñar sistemas de componentes reutilizables con responsabilidades bien delimitadas, a encapsular lógica asíncrona en hooks personalizados, a elegir con criterio entre estado local y Context API, y a estructurar una aplicación con rutas dinámicas, anidadas y protegidas. Al finalizar, el participante será capaz de entregar una mini-aplicación con navegación completa, gestión de estado global y comunicación con una API externa, sin duplicación de lógica y con el comportamiento de los efectos correctamente controlado.

1. Describir el principio de separación de responsabilidades en React y explicar cuándo un componente debe dividirse en unidades más pequeñas.
2. Comparar el uso de estado local frente a Context API para un caso de estado compartido dado, justificando la elección en función de la complejidad del árbol de componentes y la frecuencia de actualización.
3. Justificar la decisión de elevar el estado en un formulario controlado multi-paso, explicando qué componente actúa como fuente de verdad y por qué, con referencia al flujo de datos unidireccional de React.
4. Diseñar un sistema de al menos tres componentes reutilizables con responsabilidad única, documentando sus props con PropTypes o JSDoc.
5. Integrar un hook personalizado que encapsule la lógica de fetching —petición, estado de carga y estado de error— y que sea consumido por al menos dos componentes distintos.
6. Integrar Context API para gestionar un estado global sencillo, asegurando que los consumidores solo re-renderizan cuando el valor del contexto cambia de forma relevante.
7. Diseñar una estructura de rutas con React Router que incluya rutas dinámicas, anidadas y al menos una ruta protegida con redirección para usuarios no autenticados.
8. Depurar comportamientos inesperados causados por dependencias incorrectas en useEffect y adaptar componentes para gestionar correctamente el ciclo de vida completo de una petición asíncrona, incluyendo la cancelación al desmontar.

Arquitectura de componentes y diseño de APIs internas. El bloque inicial aborda el principio de separación de responsabilidades aplicado a React: cómo identificar cuándo un componente hace demasiado, cómo dividirlo en unidades cohesivas y cómo documentar el contrato de cada pieza mediante PropTypes o JSDoc. Se construye un sistema de al menos tres componentes que sirve de base para el resto del curso.

Gestión del estado: elección y comunicación entre componentes. A continuación se trabaja la toma de decisiones sobre dónde y cómo vivir el estado. Se comparan useState y Context API a partir de casos concretos, evaluando la complejidad del árbol y la frecuencia de actualización. Se analiza también el patrón de elevación de estado (lifting state up) en formularios controlados multi-paso, razonando sobre la fuente de verdad y el flujo de datos unidireccional.

Context API en la práctica. Con los criterios de elección ya interiorizados, el participante implementa un contexto real —tema visual o sesión de usuario— prestando atención a las re-renderizaciones innecesarias y a las estrategias para evitarlas, como la memoización del valor de contexto.

Hooks personalizados y manejo robusto de efectos asíncronos. Este bloque profundiza en la extracción de lógica repetida hacia hooks reutilizables. Se construye un hook de fetching completo que cubre el ciclo petición → carga → datos / error, y se estudia cómo useEffect puede provocar comportamientos inesperados cuando sus dependencias están mal declaradas. El participante practica la depuración de estos casos y aprende a implementar la cancelación de peticiones al desmontar el componente.

Navegación avanzada con React Router. El curso cierra con el diseño de una estructura de rutas que incluye parámetros en la URL, rutas anidadas y una ruta protegida que redirige al usuario no autenticado. Se integran los conceptos anteriores —estado global, hooks y componentes— en una aplicación navegable que sirve de entregable integrador del curso.

• Node.js 18 LTS o superior con npm 9+ instalado.
• Proyecto React creado con Vite (npm create vite@latest) o Create React App; se recomienda Vite.
• Editor de código con soporte para JSX (VS Code con la extensión ESLint y Prettier recomendados).
• React DevTools instalado como extensión del navegador (Chrome o Firefox).
• Acceso a una API pública de prueba (por ejemplo, JSONPlaceholder o PokeAPI) para los ejercicios de fetching.
• React Router v6 (npm install react-router-dom) instalado en el proyecto de trabajo.

• Creación y composición de componentes funcionales en React.
• Uso de los hooks fundamentales: useState, useEffect y useRef.
• Comprensión del flujo de datos unidireccional (props de padre a hijo) y del concepto de re-renderización.
• Peticiones HTTP básicas con fetch o una librería equivalente.
• JavaScript moderno (ES2020+): desestructuración, módulos, async/await y manejo de promesas.