Bootcamp
Search…
7.ICE.2: Pokedex

Introduction

Render an array of Pokemon using JSX.

Setup

  1. 1.
  2. 2.
    Follow the instructions in Module 7.1: JSX to set up Webpack for React.
  3. 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.