NOVIEMBRE-2026 Hand Emojji Cupón activo

React Router:
Navegación declarativa y framework

Aprende a trabajar con React Router tanto como librería para proyectos tipo SPA o trabajarlo cómo Framework y obtener el máximo provecho de server actions, route modules, pre-rendering, ¡y mucho más!

  • 87 lecciones
  • 7,5 horas de video
  • 10 secciones
Medalla Medalla al completar el curso
Instructor 1
   
Por Fernado Herrera en Backend
React Router: Navegación declarativa y framework

Descripción del curso

Este curso te enseña a dominar React Router v7 en profundidad, abarcando tanto su enfoque declarativo tradicional como librería, hasta su integración completa y moderna como un framework de desarrollo.

Aprenderás a trabajar con React Router de forma versátil: utilízalo como una librería ligera para optimizar proyectos de tipo SPA (Single Page Application), o impleméntalo directamente como un Framework completo para sacar el máximo provecho de características avanzadas de arquitectura web.

Dominio completo de la herramienta: Aprenderás a dominar todo el ciclo de vida de una ruta, desde los conceptos básicos de enrutamiento hasta esquemas complejos de protección de rutas, manejo de sesiones de usuario y despliegues empaquetados para entornos de producción.

¿Qué aprenderás y qué características dominarás?

  • Doble Enfoque Arquitectónico: Implementación de React Router como librería para SPAs tradicionales o como framework para aplicaciones empresariales de alto rendimiento.
  • Route Modules & Server Actions: Estructuración de páginas eficientes y manejo nativo de mutaciones de datos directamente en el servidor sin necesidad de APIs intermedias manuales.
  • Optimización de Rendimiento: Implementación de cargas asíncronas con Loaders del lado del servidor y estrategias avanzadas de Pre-rendering para maximizar el SEO y la velocidad de carga.
  • Seguridad y Sesiones: Configuración de layouts protegidos, middlewares de enrutamiento y gestión robusta del ciclo de vida de las sesiones de usuario.
  • DevOps y Contenerización: Preparación de tu aplicación final para el mundo real, aprendiendo a estructurar y construir una imagen de Docker profesional lista para producción.

Este curso es ideal para desarrolladores de React que desean dar el salto técnico definitivo, dejando atrás las configuraciones básicas y adoptando los estándares modernos de desarrollo fullstack que ofrece la versión 7.

¡Lleva tus habilidades de enrutamiento al siguiente nivel y domina el verdadero potencial de React Router v7!

Requisitos previos

  • Conocimientos básicos de React:
  • Saber usar useState, useEffect, props y componentes funcionales.
  • Experiencia previa con JavaScript (al menos las bases):
  • Entender conceptos como funciones flecha, async/await y módulos ES6.
  • Familiaridad con HTML, CSS y herramientas como Vite o npm:
  • Poder iniciar proyectos, instalar paquetes y aplicar estilos básicos

Contenido del curso

10 secciones · 87 lecciones · 7.5 h de video

01 Introducción 6 lecciones
  1. Introducción
  2. ¿Cómo funcionará el curso?
  3. ¿Cómo realizar preguntas?
  4. Instalaciones recomendadas
  5. Tutorial oficial de React Router
  6. ¡Únete a Nuestra Comunidad de DevTalles en Discord!
02 React Router - Librería vs Framework 1 lecciones
  1. Librería (Declarativa) vs Framework
03 Declarativa - Preparación de proyecto 7 lecciones
  1. Introducción
  2. Temas puntuales
  3. Inicio de proyecto - SupportChat
  4. Opcional - Cursor_ai: .cursorRules
  5. Diseño del login
  6. Diseño del chat
  7. Código fuente
04 Declarativa - React Router 10 lecciones
  1. Introducción
  2. Temas puntuales
  3. Inicio de proyecto - SupportChat
  4. React Router - Instalación y configuración
  5. Rutas hijas
  6. Carga perezosa de rutas
  7. useNavigate - Navegación manual
  8. Parametros por URL - Segmentos de ruta
  9. Separación de componentes adicionales
  10. Código fuente
05 Declarativa - Protección y estados 14 lecciones
  1. Introducción
  2. Temas puntuales
  3. Fake backend y fake data
  4. TanStack Query
  5. Mostrar listado de clientes
  6. useParams - Seleccionar el cliente activo
  7. Mostrar tarjeta del cliente
  8. Página de chat
  9. Rutas privadas
  10. Simulación de autenticación
  11. Invalidar queries
  12. Cerrar sesión
  13. Mutación - Enviar mensaje
  14. Código fuente
06 Framework - Preparación de proyecto 13 lecciones
  1. Introducción
  2. Temas puntuales
  3. Inicio de proyecto - SupportChat
  4. Opcional - Cursor_ai: .cursorRules
  5. Routing y Route Module
  6. Routing y Route Module - Parte 2
  7. Auth Layout
  8. Diseño de AuthLayout, Login y Register
  9. Chat Layout - Nested Routes
  10. Solución a la tarea - Diseño del Chat
  11. Navegar entre pantallas - Link, NavLink y useNavigate
  12. Cerrar sesión
  13. Código fuente
07 Framework - Server side - Route Module 11 lecciones
  1. Introducción
  2. Temas puntuales
  3. Continuación - Componentes de UI adicionales
  4. Fake backend
  5. Route Module - loader function
  6. Route Module - Configuración de ruta
  7. Metadata, Headers, Links y HydrateFallback
  8. Argumentos dinámicos - Segmentos de ruta
  9. Client y Server Actions
  10. Reaccionar durante una acción
  11. Código fuente
08 Framework - Autenticación y sesiones 9 lecciones
  1. Introducción
  2. Temas puntuales
  3. Continuación del proyecto - Sesiones
  4. Session Server - Servidor de manejo de sesiones
  5. Creación de sesión de usuario
  6. Cerrar sesión
  7. Solución a la tarea - Cerrar sesión
  8. Credenciales incorrectas - Login
  9. Código fuente
09 Framework - Chat y despliegues 14 lecciones
  1. Introducción
  2. Temas puntuales
  3. Continuación de proyecto - Usuario conectado
  4. Indicador de transición
  5. useLoaderData - Información del loader más cercano
  6. Formatear fechas
  7. Mostrar y crear mensajes de chat
  8. Prevenir carga del cliente en posteo
  9. Estrategias de renderizado
  10. Pre-renderizado de rutas dinámicas.
  11. Carga a GitHub
  12. Generar imagen de docker del proyecto
  13. Despliegue de la aplicación
  14. Código fuente
10 Fin del curso 2 lecciones
  1. Más información sobre nuestros otros cursos
  2. Despedida
React Router: Navegación declarativa y framework
Video introductorio
Obtener en:
DevTalles   Curso gratuito