Aqui tienes una lista de mejoras, te dejo sin marcar solamente aquellas que puedes añadir para mejorar el proyecto.
Como sugerencia general, comprueba continuamente tu aplicación en Chrome y el terminal dónde arrancas la app con npm start. Si algo falla, hay que arreglarlo antes de continuar.
[x] Si utilizas SASS, recuerda instalarlo y grabarlo en el package.json con --save
[x] En el componente del listado hay que recorrer el array de pokemons que le llega por props y pintar una tarjeta por cada uno.
[x] Termina de añadir los componentes finales: recuerda que PokeList suele contener la lista de elementos y Pokemon tendrá solo la tarjeta
[x] Termina de añadir los elementos finales de la tarjeta de cada Pokemon: un div o article que la englobe (mira el error que tienes en consola) y una imagen para mostrar el Pokemon
[x] Termina de añadir los elementos finales de la tarjeta de cada Pokemon: los tipos tienen que ser una lista, no pueden ser h3 sueltos, recuerda que son elementos relacionados. Un OL o UL es lo suyo.
[x] Utiliza el nombre del Pokemon para el Alt de la imagen
[x] Mueve el li fuera del componente 'Pokemon', de esta manera Pokemon es un componente con una tarjeta que podemos usar en diferentes sitios y no solo dentro de un ul
[x] Añade un título a la página (Mi lista de Pokemons)
[ ] Usa el id de cada pokemon para el key de react cuando mapeas y creas un listado de componentes
[x] Elimina el código comentado y los console.log()
[x] Añade estilos (un archivo sass o css por componente)
[ ] Usa propTypes para comprobar el tipo de dato de las props
[ ] Revisa los metadatos en index.html (lang, title...)
[x] Limpia e indenta el código, a veces hay espacios innecesarios
[ ] Publica en Github Pages
[x] Elimina archivos sin usar y sus referencias
Cuando tengas esto puedes añadir cierta funcionalidad para practicar:
Añadir un click a Pokemon que: marca o desmarca el pokemon como favorito en el array del estado de App.
Pasar este dato al componente Pokemon por props
Pintar Pokemon con otros estilos cuando por props nos llegue la info de que el pokemon es favorito
Genial Laura, buen ejercicio!
Aqui tienes una lista de mejoras, te dejo sin marcar solamente aquellas que puedes añadir para mejorar el proyecto.
npm start
. Si algo falla, hay que arreglarlo antes de continuar.--save
li
fuera del componente 'Pokemon', de esta manera Pokemon es un componente con una tarjeta que podemos usar en diferentes sitios y no solo dentro de unul
id
de cada pokemon para elkey
de react cuando mapeas y creas un listado de componentesCuando tengas esto puedes añadir cierta funcionalidad para practicar:
Si tienes cualquier duda, avisa!
Al turrón