He usado como librerías React y React Router para crear módulos y especificar rutas entre ellos, y npm como gestor de paquetes de dependencias. Para instalar las dependencias debe utilizarse el comando npm install y para lanzar la aplicación en local npm start. El preprocesador CSS que he usado es SCSS.
La página web consiste en un listado de personajes de Rick and Morty, que podemos filtrar por el nombre del personaje.
En primer lugar, he utilizado el servicio de https://raw.githubusercontent.com/Adalab/rick-y-morty/master/data/rick-y-morty.json que me ha devuelto información sobre los primeros 20 personajes de la serie y he pintado la foto, el nombre y la especie de cada uno de ellos. He utilizado props para pasar desde App a CharacterCard la información del fetch que después he pintado usando grid.
En la segunda parte he filtrado los personajes para buscarlos por nombre. Para ello, he añadido un a la interfaz, de forma que al ir escribiendo un nombre queden en la interfaz solo los personajes cuyo nombre contiene las letras escritas.
- Al entrar en el detalle de un personaje y a continuación pulsar atrás, en el input se muestra el texto que tenía anteriormente.
- He añadido un preventDefault al formulario para impedir que recargue la página o cambie de ruta al presionar la tecla intro.
- Aparece un mensaje de error cuando no el texto del input con ningún personaje.
- Los personajes se filtran independientemente de que se introduzca el texto en mayúsculas o minúsculas.
La última funcionalidad implementada es que al hacer click sobre la tarjeta de un personaje, su información aparece a pantalla completa: la foto, nombre, especie, el planeta de origen y si está vivo o muerto. Para hacer esto he usado rutas y React router.
- Si se visita la URL directamente en el navegador se ve el detalle del personaje.
- Al cambiar la url del personaje aparece un mensaje de error.
This project was bootstrapped with Create React App.