Part 1: Building Components
To create the pokedex, you should use 3 components:App
This should just render a single Pokedex.
(It’s common for the top-level app to not have direct logic in it, but to render the top application object — this becomes useful when you build sites that compose several different parts together.)PokecardShows a single Pokemon, with their name, image, and type.PokedexIs provided, via props, an array of objects describing different pokemon, and renders a series of Pokecard components.
Use the defaultProps feature of Pokecard to provide a default list of Pokemon characters to show. You can use this list for a good set of defaults:
[
{id: 4, name: 'Charmander', type: 'fire', base_experience: 62},
{id: 7, name: 'Squirtle', type: 'water', base_experience: 63},
{id: 11, name: 'Metapod', type: 'bug', base_experience: 72},
{id: 12, name: 'Butterfree', type: 'flying', base_experience: 178},
{id: 25, name: 'Pikachu', type: 'electric', base_experience: 112},
{id: 39, name: 'Jigglypuff', type: 'normal', base_experience: 95},
{id: 94, name: 'Gengar', type: 'poison', base_experience: 225},
{id: 133, name: 'Eevee', type: 'normal', base_experience: 65}
]
For each pokemon, their image source should be:
https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${id}.png
Use this alternate source for nicer looking images: https://assets.pokemon.com/assets/cms2/img/pokedex/detail/${id}.png
Note that the pokemon id for these images must be padded with zeros to three places, like: 001, 002, 034, 199, etc. Try writing a function to take an id like 4 and turn it into 004.
