Migración de Todo Machine a React Router 6

Clase 18 de 30 • Curso de React.js: Navegación con React Router

Resumen

¿Cómo manejar la migración de un proyecto heredado en React Router?

La práctica de migrar un proyecto heredado es una habilidad esencial para cualquier desarrollador de software. Muchas veces, cuando ingresas a trabajar a una empresa o una startup, no empiezas proyectos desde cero, sino que necesitas adaptarte a una estructura y arquitectura preexistente. En este caso, veremos cómo añadir rutas a un proyecto en React que ya existe, llamado "Todo Machine".

¿Qué es Todo Machine y cuáles son sus características?

El proyecto Todo Machine se centra en el manejo de tareas pendientes. Actualmente, cuenta con las siguientes funcionalidades:

Contador de tareas: Muestra cuántas tareas has completado.
Buscador de tareas: Permite filtrar la lista de tareas.
Gestión de tareas: Puedes marcar tareas como completadas o borrarlas.
Agregar tareas: Se usa un portal HTML para abrir un modal y agregar nuevas tareas.

El objetivo ahora es convertir esta aplicación en una que maneje rutas. Queremos que, en vez de abrir un modal, el botón de agregar tareas nos redirija a una nueva ruta.

¿Qué cambios se realizarán?

Pasaremos de manejar interactividad mediante estados y portales a manejar rutas en la aplicación. Los cambios incluyen:

Nuevas rutas:
- Slash new ("/new"): Será la nueva ruta para agregar tareas.
- Rutas dinámicas: Para editar una tarea específica, usaremos una ruta de la forma /edit/{todoId}.
Identificación con IDs:
- Todas las tareas ahora tendrán un ID único ya que identificar tareas por su texto no es viable si se permite la edición.
Actualización del flujo:
- Implementaremos navegación entre rutas. Al cancelar la adición o edición de una tarea, el usuario debe retornar a la página inicial.

¿Cómo empezar con el código?

Para obtener el código del proyecto Todo Machine y comenzar a trabajar con él, sigue estos pasos:

Clona el repositorio Curso React Router Proyecto 2 desde GitHub usando el comando:
```
git clone https://github.com/nombre-del-repositorio
```
Accede a la carpeta del proyecto y abrelo en tu editor de código favorito:
```
cd Curso-React-Router-Proyecto-2
```
Instala las dependencias necesarias para que el proyecto funcione correctamente utilizando:
```
npm install
```
Si encuentras errores durante la instalación, podrías necesitar eliminar las carpetas node_modules, package.lock.json, y yarn.lock, y volver a intentar la instalación.

¿Cómo integrar las rutas con React Router?

Para utilizar React Router en nuestra aplicación, debes realizar lo siguiente:

Instalar React Router: Instala la versión 6 del paquete con:
```
npm install -S react-router-dom@6
```
Esta herramienta nos permitirá definir y gestionar la navegación entre las diferentes rutas en nuestra aplicación.
Configurar las Rutas:
- Siéntate cómodo con la estructura de React Router 6. Define rutas usando componentes como BrowserRouter, Routes y Route.

Este proceso de migración y adaptación no solo mejorará tu comprensión de los proyectos heredados, sino que también te equipará con habilidades esenciales para trabajar en equipo y adaptar tus desarrollos a nuevas tecnologías y requisitos en el futuro. ¡Ánimo! Tu habilidad para manejar estos cambios te hace un desarrollador más versátil y preparado.

Diana Florez

student•

npm i -S react-router-dom@6

Felipe Morales Torres

student•

Instrucciones que yo seguí:

Ir a la carpeta en donde trabajaremos el proyecto.
Ahí en terminal, clonar el repositorio, yo tuve que clonarlo sin la branch porque me daba error

git clone https://github.com/platzi/curso-react-router-proyecto2

Después, desde terminal, ir a la carpeta en donde está todo el proyecto:

cd curso¬-react-router-proyecto2

Después en VS Code, borrar los archivos package-lock.json y yarn.lock para que no nos de errores al instalar las dependencias
Instalar dependencias

npm i

Inicializar nuestro proyecto

npm start

Listo, debes tener tu proyecto corriendo, a programar, que esos programas no se van a hacer solos, get fun!

Juan Camilo Lentino Villalba

student•

si al levantar el servidor sigue presentando errores podemos auditar el proyecto

npm audit fix --force

y debería dejar correrlo sin problemas

Juan Pico

student•

Para los que usan la versión de node 20 y les sale como 200 vulnerabilidades y falla el npm start, para no bajar la versión de nodejs es mejor ejecutar los siguientes comandos.

npm update

npm audit fix --force

Jose Ever Muñoz Muñoz

student•

muchas gracias, estaba perdido sin ti

Israel Hernández Galicia

student•

Despues de los retos anteriores :(((

Orangel Brito

student•

Repositorio para iniciar : https://github.com/platzi/curso-react-router-proyecto2/tree/inicio-curso-rr

Jvalencia

student•

cuando lo descargue no funciono, me toco ejecutar "npm audit fix --force" y ya al volver a lanzar el proyecto funciono en mi equipo

Carlos Daza

student•

Tenia el error: ERR_OSSL_EVP_UNSUPPORTED

Y se soluciona escribiendo en la consola, en la ruta donde tienes clonado el repositorio(Ejemplo: /Documentos/GitHub/Navegacion_con_React_Router/curso-react-estado-2): NODE_OPTIONS='--openssl-legacy-provider' npm run build

Gilbert Ardila

student•

perdóname la pregunta, ¿al dar npm init me crea la carpeta node modules y el package.json?

Juan Castro

teacher•

npm init crea el package.json y npm install crea o actualiza los nod_modules. :D

Gilbert Ardila

student•

ahh muchas gracias juan estaba buscando ese comando!!

Juan Camilo Lentino Villalba

student•

npm i react-router-dom@6.3.0

Diego Andres Jimenez Quintero

student•

Hola, si al ejecutar el comando npm start

siguen los problemas solo ejecuta esta linea en la terminal

npm audit fix --force

El comando npm audit fix --force se utiliza para corregir automáticamente las vulnerabilidades de seguridad detectadas en los paquetes que forman parte de un proyecto Node.js.

npm audit: Este comando escanea las dependencias de tu proyecto en busca de vulnerabilidades de seguridad conocidas.
npm audit fix: Intenta corregir automáticamente estas vulnerabilidades actualizando los paquetes involucrados, manteniendo en la medida de lo posible las versiones especificadas en el archivo package.json.
--force: Fuerza la actualización de los paquetes, incluso si eso implica hacer cambios importantes, como actualizaciones a versiones mayores (que pueden introducir cambios incompatibles o romper el funcionamiento de la aplicación).

Usar --force puede resolver algunas vulnerabilidades más severas, pero conlleva el riesgo de introducir errores o incompatibilidades, ya que puede actualizar las dependencias a versiones que no hayan sido probadas con el resto del código.

Es importante tener cuidado al usarlo y probar tu proyecto después de ejecutarlo para asegurarte de que todo sigue funcionando correctamente.

Harold Zurita Simon

student•

Integrando React Router a proyectos en React

. Vamos a agarrar un proyecto que ya empezamos hace mucho tiempo y vamos a aplicarle rutas. El proyecto es TodoMachine y vamos a remplazar el portal de editar TODO con una nueva ruta /new. . Vamos a tener que hacer navegación entre rutas. Por ejemplo, el Cancelar nos debe devolver al Home, el Añadir también pero antes debe agregar el TODO y validar si todo está bien. . También vamos a implementar una ruta /edit/:id donde tendremos un formulario para editar los TODOs. Ruta a la cual accederemos por medio de un botón de editar. Será el mismo formulario con un texto diferente y en el text area tendremos el texto o tarea pendiente que teníamos antes para ese TODO en particular, el que tiene ese Id. . Anteriormente el Id de los TODOs era el texto; pero el texto cambia y entonces nos rompería muchas cosas, por lo que vamos a agregarle Ids. . Por medio de este identificador vamos a encontrar al TODO que queremos empezar a editar. A partir de esa información debemos poder ir al LocalStorage o nuestra fuente de información, hallar el TODO, tomar su texto y ponerlo por defecto en nuestro text area para que los usuarios no tengan que escribirlo desde cero para que editen el TODO desde la versión anterior. . Lo primero que vamos hacer es clonar el repositorio del proyecto y luego instalar las dependencias que necesitamos para correr nuestro proyecto con: .

npm install

. En caso de tener algún error es aconsejable eliminar el package-lock.json y el yarn-lock, luego vuelve a correr el npm install. . Corremos el proyecto con el comando npm start y nos dirigimos al localhost:3000. El único error que talvez puede tener la app se encuentra en el directorio App en el archivo index.js donde completeTodo no pertenece a state sino que a stateUpdaters. Por lo que solo lo movemos de lugar. .

...
function App() {
  const { state, stateUpdaters } = useTodos();

  const {
    error,
    loading,
    searchedTodos,
    totalTodos,
    completedTodos,
    openModal,
    searchValue,
  } = state;

  const {
    setOpenModal,
    addTodo,
    completeTodo,
    deleteTodo,
    setSearchValue,
    sincronizeTodos,
  } = stateUpdaters;
  
  ...
}
export default App;

. Finalmente, instalamos React Router DOM con el siguiente comando. .

npm i -S react-router-dom@6

Jonathan Stiven Colorado Largo

student•

HOy siendo 4 de enero de 2024 si deseas no tener problemas con el código como en este mensaje

at SU_RUTA\curso-react-router-proyecto2\node_modules\babel-loader\lib\index.js:59:103 {

opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],

library: 'digital envelope routines',

reason: 'unsupported',

code: 'ERR_OSSL_EVP_UNSUPPORTED'

Ejecute

npm install package@latest --save

Wilson Dev

student•

¿Por qué no están los recursos?