7.ICE.2: Pokedex

Introduction
Render an array of Pokemon using JSX.
Setup
1.Begin with the Rocket's base Webpack Express repo​
2.Follow the instructions in Module 7.1: JSX to set up Webpack for React.
3.Get a copy of the Pokedex here: https://raw.githubusercontent.com/rocketacademy/bootcamp-docs/master/fixture-data/react-pokedex.json​
4.Automatically include the JSON using this import statement:
import pokemon from './react-pokedex.json';
​
console.log(pokemon);
console.log(pokemon.pokedex);
Base
Render 20 Pokemon onto the screen.
Pokemon Component
Create a component for a single Pokemon.
<Pokemon pokemon={pokemonData} />
pokedex_entries Component
Create a component that contains the list of Pokedex entries. Pokedex entries are a property of each pokemon, not a list containing all the pokemon components.
<PokedexEntries pokedexEntries={pokedexEntriesArray} />
Comfortable
Pokemon types component
Create a component for the types of a Pokemon. Use these icons to display an icon for a given type.

7.ICE.1: Product Rendering

7.ICE.3: React Cards

Last modified 3mo ago

Copy link

Outline

pokedex_entries Component

Comfortable

Pokemon types component