Curso de React Router

Aprende a trabajar con React Router de manera práctica con el desarrollo de una SPA
Material disponible
Intermedio
19 Clases 2 h
React es una de las librerías más populares en la actualidad para el desarrollo frontend con Javascript. Hemos abordado en diversos cursos el uso de esta librería, a modo general, que se pueden consultar en la materia React.

Una de las principales áreas de trabajo de React son las aplicaciones SPA (Single Page Application), las cuales deben implementar un sistema de routing para dirigir las URLs profundas de la aplicación a los componentes o vistas adecuadas. Para ello la librería de routing más popular que usamos con la librería es React Router.

En la versión de React Router 6 introdujeron diversos cambios con respecto a versiones anteriores, por lo que hemos realizado un este Curso de React Router, específico para esta nueva versión.

Qué aprenderé en el Curso de React Router

  • Crear un proyecto de SPA con React
  • Entender cómo funciona React Router
  • Estructurar componentes de una página
  • Crear componentes de navegación
  • Navegación y redirecciones con el sistema de routing
  • Enviar datos entre rutas de la aplicación
  • Gestionar rutas anidadas con cualquier número de parámetros

Objetivos del curso

Ofrecer al estudiante el conocimiento necesario para trabajar con React Router 6, la librería más usada para implementar un sistema de routing completo en aplicaciones basadas en React.

A lo largo del curso el estudiante podrá aprender a crear una aplicación con diversas rutas, simples y anidadas, que permitirá experimentar con las posibilidades que nos ofrece React Router para el desarrollo de sitios web con el modelo de SPA.

Por qué debes aprender React Router

El Curso de React Router te será de utilidad si ya trabajas con React y quieres aplicar tus conocimientos en el desarrollo de aplicaciones modernas. En este caso necesitarás usar un sistema de routing y React Router es la alternativa más usada para crear y gestionar las rutas de las aplicaciones.

Si ya usabas React Router en versiones anteriores este curso te permitirá actualizar tus conocimientos rápidamente para poder usar todas las novedades que vienen con React Router 6.

Qué tengo que saber

Para la realización de este curso los estudiantes deben conocer la librería React.

Clases y contenidos

Introducción: Creando proyecto con Vite

En esta clase realizamos nuestro proyecto de curso, usando Vite como herramienta frontend.

Diferencias de React Router 5 y 6

Diferencias de React Router en versiones 5 y 6.

Estructura básica en React Router 6

Conociendo los aspectos básicos de React Router

Componente Link

Qué es un componente Link, o elemento link en React Router.

Reestructurando en componentes: Páginas

Creando diversos componentes para las distintas páginas de la aplicación React

Reestructurando en componentes: Cabecera

Creando un componente visible en todas las páginas o vistas de la aplicación, en este caso realizaremos la cabecera.

Reestructurando en componentes: Menú

Separamos el menú de navegación a un componente independiente.

Componente NavLink

Conocemos el componente NavLink de React Router, un componente de link para navegación especializado en indicar cuál es la página activa.

Rutas inexistentes

Cómo crear páginas especiales para las rutas que no existen dentro de la aplicación, para marcar el típico error 404.

Redirecciones

Cómo realizar redirecciones en React Router usando Navigate.

Paso de parámetros: Creando una sección dinámica

Creando una sección dinámica

Paso de parámetros: Creando ruta y enlaces dinámicos

Cómo hacer las URLs dinámicas, pasando parámetros variables a las páginas de destino y la creación de patrones en las URLs con elementos dinámicos.

Paso de parámetros: Creando página de detalle

Haciendo un componente que es capaz de obtener los parámetros que se han enviado mediante la URL dinámica.

Paso de parámetros: Controlando el historial de navegación

Cómo usar el Hook de React Router DOM useNavigate, que permite controlar el historial de navegación.

Paso de parámetros VI: Refactorizando código con el uso del estado

En este vídeo vamos a mejorar el código de los componentes de la aplicación con el hook useState.

Rutas Anidadas I : Definición de Rutas y componente Outlet

En este bloque vamos a comenzar con el uso de rutas anidades haciendo uso del componente Outlet.

Rutas Anidadas II: Anidamiento de Subrutas

Como anidar las rutas internas

Rutas Anidadas III: Anidamiento de rutas y paso de parámetros

Cómo pasar los parámetros a las rutas anidadas en React Router.

Cierre del curso

Despedida y cierre del curso de React Router 6

¿Conoces nuestra tarifa plana?

Toda la formación de EscuelaIT, con más de 200 cursos completos para aprender las más variadas tecnologías de programación, diseño y marketing online. Todo! con tu suscripción.

Suscríbete