Pokemon API using React JS

React with React Hooks

I’m not a really good programmer but I have some kind of stuff to share with you. Still remember with Pokemon mobile game that really funs a few years ago. This is how to display the pokemon list using Pokemon API or poke API with React JS.

To begin with, Create react app

“ npx create-react-app pokeapi”

Open your project directory just to make sure that the terminal is working. Then open your editor and the directory within. I’m using VS code because it’s free :) you can use any other editor.

I usually delete some files that I don’t need just to make it more simple. So the final look like this :

I’m just going to show the code in order because I already made it before. Before start, create some folder 1. Assets, 2. Pages, 3. Services. Next, you have to make the App.js like this

For the responsive grid, I’m using a CSS grid container

We have to create a function that basically handles the fetching pokemon API data. Go to the Services folder and create file pokeService.js and write this code.

Next, we create one page that we display the list of the Pokemon and it is up to you whatever you want way to display your pokemon. So create pokemonList.js inside Pages folder and write this code.

For the grid to every each pokemon I use the different color based on the pokemon name “backgroundColor: pokeColor[pokemon.name]”. Create file pokeColor.js also inside Pages folder with this code in it.

And the final step this is the most fun part, time to styling it so create file style.css inside the Assets folder but also I create folder SCSS just incase there gonna be more than one file SCSS. I’m using SASS so you can install it with code “npm install node-sass --save “. I think SASS is more easier to use but it is fine if you prefer using CSS. for the font I use Roboto and here the codes

I put some transition for the image so if you hover the pokemon image it will be like a spinner and you can put more styles and make it more pretty :) use your own creativity for the design. Here is the final look

I think it’s quite responsive if I shrink the screen then the display is still looks good.

So that’s all for now, see you in the next Story.