Migración de Todo Machine a React Router 6

¿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:

1. 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}.

2. 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.

3. 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:

1. Clona el repositorio Curso React Router Proyecto 2 desde GitHub usando el comando:

   git clone https://github.com/nombre-del-repositorio
   

2. Accede a la carpeta del proyecto y abrelo en tu editor de código favorito:

   cd Curso-React-Router-Proyecto-2
   

3. 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:

1. 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.

2. 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.