Olvídense de npx create-react-app. Con ViteJS con el comando npm create [email protected] name-project-here --template react lo instalan en 10 s, como maximo y con codigo mas limpio al empezar.
Fundamentos de navegación en la web
¿Cuándo necesitas React Router?
SSR vs. Single Page Applications
Versiones de React Router: ¿Por qué son tantas? ¿Cuál elegir?
Introducción a React Router DOM 6
Instalación de React Router DOM 6
BrowserRouter vs. HashRouter
Route: componentes de navegación
Link vs. NavLink
useParams: rutas dinámicas
useNavigate: historial de navegación
Outlet: nested routes
Fake authentication con React Router DOM 6
useAuth: login y logout
Menú con rutas públicas y privadas
Navigate y redirects: protegiendo rutas privadas
Roles y permisos
Reto: composición de componentes con navegación
Reto: UX de login y logout
Reto: roles complejos
React Router en TODO Machine
Integrando React Router a proyectos en React
Creando las rutas de TODO Machine
Botón de editar TODOs
Generador automático de IDs
Cambiando modales por navegación
Obtener y editar TODOs
useLocation: transferencia de datos por navegación
Deploy con React Router en GitHub Pages
Próximos pasos
Reto: página de búsquedas con navegación
Reto: TODO Machine con React Router DOM 5
Reto: PlatziMovies con React Router
Reto: crea tu propio React Router
Espera más cursos de React.js
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Si ya tienes una cuenta,
Iniciar sesiónAportes 9
Preguntas 3
Ordenar por:
Instalación de React Router DOM 6
Si deseas consultar la documentación oficial de React Router puedes hacerlo en esta página, donde hay documentación detallada.
Instalación
Para esto en nuestra terminal vamos a crear un nuevo proyecto en React con tu método de preferencia, yo prefiero hacerlo con Vite.js
npm create [email protected]
# Pasos
name-proyect || ./
template react
Luego de esto, vamos a introducir el siguiente comando para instalar React Router DOM.
# Instalar React DOM versión actual
npm install --save react-router-dom
# Instalar React DOM 6
npm install --save [email protected]
Luego como es Vite vamos a introducir el comando:
npm run dev
Luego abrimos el puerto indicado en el navegador y ya tendríamos nuestro proyecto listo para que empecemos.
React Router
React Router v6
GitHub React-Router
npm install react-router-[email protected]6
Cada version de react-router-dom tiene breaking changes. Aunque los conceptos son los mismos. Asegurate de usar las mismas versiones de la clase.
Like. Si tampoco sabes cual es el curso de npm para hacer npm audit fix --force
me encanta la conversación del profe mientras se instala react
npm install [email protected]6.3.0
Hola Juan, una pregunta. ¿Por qué siguen sacando cursos nuevos de React usando CRA en vez de Vite, por ejemplo?
.
Creo que no hay razón alguna en la CRA tenga algo mejor que Vite para estas clases de miniproyectos educativos. abrazo!
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?
o inicia sesión.