Clonación de React Router en Componentes React

¿Cuál es el reto máximo de este curso?

En este fascinante y desafiante curso de Platzi, se te invita a sumergirte completamente en el mundo de React desarrollando tus propias versiones de funcionalidades esenciales que ofrece React Router. Este no es un ejercicio cualquiera; es un reto que te llevará un paso más allá en tu camino para convertirte en un desarrollador profesional efectivo.

¿Cómo se clona un router en React?

La tarea inicial de este reto consiste en replicar lo que ya has aprendido sobre la creación de un router en JavaScript vainilla. Ahora, te toca llevar esa experiencia al entorno de React y crear un hash router. Este proceso implica transformar los elementos mágicos de un router manual en componentes de React con las siguientes indicaciones:

1. Crea un hash router: A partir de los conocimientos previos, construye un componente de 'hash router' en React que use location.hash para renderizar el componente correspondiente.

2. Desarrolla un componente Route: Implementa un componente Route que se encargue de verificar si el hash actual coincide con el path o propiedad que determines, y renderice los componentes correspondientes.

3. Implementa un componente Link: Crea un componente Link que permita realizar la navegación utilizando JavaScript, en lugar de una etiqueta a convencional, asegurando que la URL actualice adecuadamente sin tener que recargar la página.

¿Cómo replicar los hooks de React Router DOM?

Si hay quienes buscan llevar su aprendizaje al siguiente nivel, eres invitado a replicar los hooks personalizados como useLocation, useNavigate o cualquier otro que creas necesario. Estos permitían ejecutar funciones desde JavaScript, cambiando tanto la URL como el contenido de la aplicación. Esto, aunque suene complejo, es un excelente ejercicio para mejorar tus habilidades en JavaScript y React.

Consejos para llevar a cabo este reto

• No te preocupes por la estética inicial del código: Tu prioridad debe ser que funcione, sin importar que el código no sea bonito al principio. Gradualmente podrás refactorizarlo para mejorar su estructura.

• Aprovecha la comunidad React: No estás solo en este proyecto, puedes buscar apoyo y compartir experiencias con otros estudiantes. Aprende de sus implementaciones y busca inspiración en otras librerías y proyectos open source.

• Itera y mejora constantemente: El desarrollo se trata de iterar. Prueba, falla, mejora y comparte tus aprendizajes. Cada nueva versión que desarrolles te acercará más a la maestría en React, especialmente en cuanto a la gestión de rutas.

Te animamos a que te lances a este reto con confianza y entusiasmo. Al completar esta actividad, no solo habrás profundizado en tus habilidades técnicas, sino que además te sentirás más satisfecho y seguro de tu capacidad para enfrentar y superar desafíos en programación. ¡Buena suerte, y sigue avanzando en tu ruta de aprendizaje con determinación!