Olvídense de npx create-react-app. Con ViteJS con el comando npm create vite@latest 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
Navegación Web con React Router: Fundamentos y Prácticas Avanzadas
Server-side Rendering vs Single Page Applications: Ventajas y Desventajas
Uso de React Router DOM 6 en Proyectos React
Introducción a React Router DOM 6
Instalación de React Router DOM 6 en un proyecto React
Uso de Hash Router en Aplicaciones Web con React Router DOM
Creación de Rutas Dinámicas con React Router DOM 6
Navegación en React Router: Uso de Link y NavLink
Rutas dinámicas con React Router DOM y useParams
Uso de useNavigate en React Router DOM para navegación dinámica
Uso de Outlet y Nested Routes en React Router DOM 6
Fake authentication con React Router DOM 6
Autenticación y Autorización en Apps con React Router y Hooks
Control de Acceso en Menú con Autenticación React
Protección de Rutas con React Router y Hooks
Roles y permisos en aplicaciones web: Autenticación y autorización
Retos avanzados en React: manejo de estado y composición de componentes
Mejorando la Redirección Post-Login en Aplicaciones Web
Roles y Permisos Avanzados en React Router v6
React Router en TODO Machine
Migración de Todo Machine a React Router 6
Organización de carpetas y rutas en React con React Router DOM 6
Maquetación de Botón Editar en Lista de Tareas con React
Generación de IDs únicos para gestionar tareas en React
Migración de modales a rutas en React: implementación práctica
Editar ToDos en React con Custom Hook y URL Parameters
Mejora de la Experiencia del Usuario al Editar To Do's en React
Implementación de React Router en Proyectos Legacy
Próximos pasos
Filtrado de Búsquedas en URL con React Router
Migración de React Router: de la versión 6 a la 5 en proyectos empresariales
Clonación de Platzi Movies usando React y React Router
Clonación de React Router en Componentes React
Navegación Avanzada con React Router DOM 6
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Instalar React Router DOM 6 en tu proyecto de React puede parecer una tarea desafiante al inicio, pero con las instrucciones adecuadas, el proceso se vuelve mucho más manejable. React Router DOM es una herramienta esencial para gestionar la navegación de un proyecto en React, permitiendo estructurar tu aplicación en múltiples rutas y vistas. A continuación, exploraremos cómo instalar y configurar React Router DOM 6 en un proyecto creado con Create React App, asegurando la correcta compatibilidad entre versiones.
Instalar la versión 6 de React Router DOM es altamente recomendado, incluso si existen versiones más actualizadas o si estás trabajando con un equipo que utiliza otra versión. React Router DOM 6 ofrece una API robusta y estandarizada que es útil para entender los fundamentos de los routers en React. Además, más adelante, podrás realizar una migración a una versión diferente o a otro router si así lo deseas, pero teniendo una base sólida en la versión 6.
El primer paso es crear un nuevo proyecto con Create React App, una herramienta que facilita la creación de proyectos en React al entregar una estructura básica y configuraciones predeterminadas.
npx create-react-app nombre-del-proyecto
Si ya tienes un repositorio, puedes usar:
npx create-react-app ./
Esto instalará las dependencias necesarias y organizará tu proyecto en una carpeta específica. Si encuentras errores al ejecutar este comando, sigue las instrucciones que proporciona el terminal o busca soluciones en foros como Stack Overflow.Una vez creado tu proyecto, es momento de añadir React Router DOM 6:
npm install react-router-dom@6
Aquí estamos asegurando la instalación de la versión 6, lo que permitirá usar todas sus funcionalidades sin problemas de compatibilidad.Durante la instalación, NPM puede indicarte vulnerabilidades en las dependencias. Puedes utilizar los comandos npm audit
o npm audit fix --force
para corregir posibles inconsistencias y asegurarte de que tu proyecto esté utilizando versiones seguras.
Para asegurarte de que todo está funcionando correctamente, inicia el servidor de desarrollo con:
npm start
Esto abrirá la aplicación en tu navegador predeterminado, generalmente en localhost:3000
.
Es fundamental verificar que todas las dependencias de tu proyecto sean compatibles. Por ejemplo, React Router DOM 5 podría no ser compatible con React 18, por lo tanto, deberías asegurarte de que estás utilizando versiones compatibles para evitar problemas.
Con estos pasos, tendrás React Router DOM 6 listo para ser utilizado en tu proyecto. Este conocimiento te proporcionará una base sólida para comenzar a trabajar con rutas y componentes, permitiéndote estructurar mejor tu aplicación React. ¡No dudes en explorar más y experimentar! Aprender y adaptarse a nuevas tecnologías es crucial en el mundo del desarrollo web.
Aportes 17
Preguntas 5
Olvídense de npx create-react-app. Con ViteJS con el comando npm create vite@latest name-project-here --template react lo instalan en 10 s, como maximo y con codigo mas limpio al empezar.
Si deseas consultar la documentación oficial de React Router puedes hacerlo en esta página, donde hay documentación detallada.
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 vite@latest
# 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 react-router-dom@6
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-dom@6
Like. Si tampoco sabes cual es el curso de npm para hacer npm audit fix --force
.
Cada version de react-router-dom tiene breaking changes. Aunque los conceptos son los mismos. Asegurate de usar las mismas versiones de la clase.
.
Vamos a instalar la versión de React Router DOM 6. Existen muchas versiones, Sin embargo utilizaremos la versión 6.
.
Creamos un proyecto de React con Create React App
,
.
npx create-react-app nombre-de-tu-proyecto
.
Es importante notar que estamos utilizando React en su versión 18. Esto porque React Router DOM de la versión 5 hacia atrás no soporta React 18 por los cambios en la forma en el que creaba el root
por lo que se debería utilizar React 17 para abajo en ese caso.
.
Instalamos React Router DOM y luego corremos la aplicación en el localhost:3000.
.
npm install --save react-router-dom@6
npm start
.
Podemos notar que React Router DOM se guarda en dependencies
y no en devDependencies
. Esto porque la vamos a necesitar incluso si desplegamos a producción.
Hola a todos, para un proyecto con React + Vite + React Router DOM + TypeScript ( sin miedo al éxito, papui)
Mi package.json queda de la siguiente form:
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.14.0"
},
"devDependencies": {
"@types/react": "^18.0.37",
"@types/react-dom": "^18.0.11",
"@types/react-router-dom": "^5.3.3",
"@typescript-eslint/eslint-plugin": "^5.59.0",
"@typescript-eslint/parser": "^5.59.0",
"@vitejs/plugin-react": "^4.0.0",
"eslint": "^8.38.0",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.3.4",
"typescript": "^5.0.2",
"vite": "^4.3.9"
}
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!
npm install react-router-dom@6.3.0
me encanta la conversación del profe mientras se instala react
Con tantas advertencias creí que llagaba un par de años tarde para esto, pero al ver la fecha de los comentarios puede respirar en paz, actualmente está la versión 6.14 y la versión 6.4 se promociona con entusiasmo.
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?