For this homework assignment we'll be creating an app that fetches information about a pokemon based on user input and displays it.
- Fork this repo
- Create a folder with your first and last name (e.g.
arya-stark
) - Run
create-react-app
in that folder. This is where your app will live.
- Create a header component that should read
Gotta Fetch em all!
through props - Create a Pokemon display component that displays the image of the Pokemon and it's name
- Create a text input component
- Create a button component
- Use all of the components to make an API call based on what the user input's into the component when the button is clicked
You will be updating your pokemon app to do the following two things:
-
Gracefully handle errors
For example invalid searches, or what if there is no internet connection? (you can test this by turning off your wifi)
-
Handle the empty input search
The pokemon API returns a list of pokemons on the results attribute when you search https://pokeapi.co/api/v2/pokemon/ ie (`https://pokeapi.co/api/v2/pokemon/${''}\`) lets have your pokemon app render something like:
<li>bulbasaur</li>
<li>ivysaur</li>
...
</ul>
- Redux thunk middleware to handle pokemon api requests
- Use redux to store all application state. ie do not use React's native setState method
- Your solution can build off your original work, or you can create this app from scratch. If it is from scratch, it should have all the criteria of Part 1 and Part 2 (bonus is not necessary)
We'll be leveraging the fetch
API and the pokeapi to get our Pokemon data. You can use the name
prop to display the name and the pokemon.sprites.front_default
to display the picture.
The endpoint we're going to be using is https://pokeapi.co/api/v2/pokemon/:nameOrId
where nameOrId
should come from the user input field.