Pokedex 4

Stepping through the Pokedex app, we will learn about routing with React Router. This workshop takes at minimum 30 minutes.

Learning Objectives

• Fetch data from an API and render it
• Update state on input changes
• Conditionally render UI based on state
• Control form inputs with state

Requirements

This workshop is to practice building a React app from scratch. By now, you will have built an application that displays information about Pokemon. It’s a staged workshop which can be run over multiple weeks. This stage focuses on creating multi-page apps with routing, which is covered in the prep work for this sprint. If you haven’t done the prep or the previous workshops, you will find this workshop hard to understand.

Routing

https://v5.reactrouter.com/web/example/basic

React Router provides some default React components that you can use to enable routing in your application. Examine the sandbox above. First, notice the top level <BrowserRouter> component which wraps everything else. Then, the <Routes> component which will choose one <Route> based on the current path. Each route is defined with the <Route> component which maps a path (defined with the path props) to a React component. You can pass an entire component including its properties to the element={...} prop. Finally, the Link component can be used to create links to navigate to different routes.

Pokedex Multi-Page App

Open the pokedex React application. Instead of displaying all your components in the same page, we will use React Router to define different pages in the pokedex application. Set a whole class timer for 20 minutes.

URL parameters

https://v5.reactrouter.com/web/example/url-params

In this exercise, we will create a new component to display a Pokemon information. The Pokemon name will be passed through the URL and displayed on the screen. Set a whole class timer for 10 minutes.

Stretch goal

If you have finished early:

Instead of passing the name of the Pokemon in the URL parameter, now pass an ID. The ID passed correspond to the ID of the Pokemon in the Poke API. For example, the ID 1 corresponds to the Pokemon Bulbasaur (https://pokeapi.co/api/v2/pokemon-species/1/). In the PokemonInfo component, use the Pokemon ID from the URL to load the corresponding Pokemon data from the Poke API and display the following Pokemon information on the screen: name, color.name, shape.name, base_happiness and capture_rate.

Acceptance Criteria

• Fetches and displays a Pokemon’s moves
• Updates moves when a new Pokemon is selected
• Renders a user-entered city name
• Allows user to enter a caught Pokemon name

Note: inspiration for this workshop came from Kent Dodd’s Beginner React course