What is this app?
This is my first major React.js project that I worked on in order to learn the framework. I found out about a free pokemon API that I thought would be a cool thing to use in a project.
The application allows users to choose from a list of pokemon from the first generation and show their stats by calling the PokéAPI. The stats are shown in a custom made pokedex using CSS and each pokemon that is hovered will display a shadow highlight so that users know their selection is acknowledged. Chosen pokemon will have a blue outline around the square image to show users that their option was chosen.
API Features
The pokedex app calls the PokéAPI to retrieve the sprite, id, name, type, height, and weight of any pokemon that is clicked. Initially I only called for the ID and name but wanted to expand on the app to retrieve more information.
Pokemon Class
A class called Pokemon was created to help manage fetched data much easier from the api.
Within this class we create a constructor to help fetch the id, name, sprite, height, weight, and type of pokemon. The values to the right of the equal sign are given from the api itself to fetch certain information that someone may want.
handleOnClick Function
Within the App.js file, I created a function called handleOnClick which makes a fetch request to the api.
A Pokemon instance is created for the fetched data. A console.log is used so that in an inspection tool, users can see Pokemon data when a Pokemon is clicked.
Displaying the Fetched Data
A component called DetailView is used to help display the fetched information on clicked pokemon. The DetailView is what is shown on the right side of the pokedex.
Here, I simply added an image tag to get of the sprite images. The Pokemon variables are passed to h1 and p tags to display the id, name, type, height, and weight of a clicked pokemon.
Conclusion
This project was my first big react app that I have created in order to learn the framework. This was also a good opportunity to work with css in react by creating the pokedex.
Some issues that I faced included figuring out how to make the pokedex with css and how to call the PokéAPI to retrieve the data that I wanted. I was unable to get the type call to work the way I wanted as it only shows the first type a pokemon has. Some pokemon have more than 1 type which would not display in the app. At first I only retrieved the ID and name of the pokemon, but then I ended up adding the type, height, and weight to understand how the API works and display more information for users.
Thanks for reading!