Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

React.js Pokémon App.

  • Difficulty Level : Medium
  • Last Updated : 19 Oct, 2021

Introduction: In this article, we will be going to see how to Build a Pokémon App using React.js and Pokémon API.

Pre-requisite:

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

Approach: This web app is going to be a one-paged web app where we are going show to different types of Pokémon and some of their features will also be mentioned there, we will get all these data using a free API resource https://pokeapi.co/. We will set a Load More button, clicking that button the page will load more Pokémon on our webpage (no. of  Pokémon will depend on the limit value that we would have set in our API call ).

Now let’s see the step-by-step implementation of the above approach.



 

Creating the react app and installing all the required packages:

Step 1: Create a React application using the following command:

npx create-react-app foldername

Step 2: After creating your project folder i.e. foldername, move to it using the following command:

cd foldername

Project Structure: It will look like the following.

file explorer

Ignore the build folder for now, when you will be done with making this app, if you want to deploy your app somewhere then you have to run “npm run build” in your terminal which will create a build folder. Then you just simply need to drag and drop that build folder in your deploying website https://www.netlify.com/.

Step 3: Now inside src folder, edit your App.js. For loadPoke you can set any limit that you want, here I have set the limit as 20. In this file we are using two useState hooks container one for fetching all the data with their name using https://pokeapi.co/api/v2/pokemon/${pokemon.name} within the useEffect and and another one is for loading more Pokémon on onClick event of More Pokemons button fetching the API https://pokeapi.co/api/v2/pokemon?limit=20. Then within the  Pokémon app container, we are structuring the whole Pokémon card with required characteristics and setting the props for other components. 

App.js






import React, { useEffect, useState } from "react";
import PokemonThumbnail from "./Components/PokemonThumbnail";
  
function App() {
  const [allPokemons, setAllPokemons] = useState([]);
  const [loadPoke, setLoadPoke] = useState(
  );
  const getAllPokemons = async () => {
    const res = await fetch(loadPoke);
    const data = await res.json();
    setLoadPoke(data.next);
  
    function createPokemonObject(result) {
      result.forEach(async (pokemon) => {
        const res = await fetch(
          `https://pokeapi.co/api/v2/pokemon/${pokemon.name}`
        );
        const data = await res.json();
        setAllPokemons((currentList) => [...currentList, data]);
      });
    }
    createPokemonObject(data.results);
    await console.log(allPokemons);
  };
  useEffect(() => {
    getAllPokemons();
  }, []);
  
  return (
    <div className="app-container">
      <h1>Pokemon Kingdom .</h1>
  
      <div className="pokemon-container">
        <div className="all-container">
          {allPokemons.map((pokemon, index) => (
            <PokemonThumbnail
              id={pokemon.id}
              name={pokemon.name}
              image=
      {pokemon.sprites.other.dream_world.front_default}
              type={pokemon.types[0].type.name}
              key={index}
              height={pokemon.height}
              weight={pokemon.weight}
              stat1={pokemon.stats[0].stat.name}
              stat2={pokemon.stats[1].stat.name}
              stat3={pokemon.stats[2].stat.name}
              stat4={pokemon.stats[3].stat.name}
              stat5={pokemon.stats[4].stat.name}
              stat6={pokemon.stats[5].stat.name}
              bs1={pokemon.stats[0].base_stat}
              bs2={pokemon.stats[1].base_stat}
              bs3={pokemon.stats[2].base_stat}
              bs4={pokemon.stats[3].base_stat}
              bs5={pokemon.stats[4].base_stat}
              bs6={pokemon.stats[5].base_stat}
            />
          ))}
        </div>
        <button className="load-more" 
          onClick={() => getAllPokemons()}>
          More Pokemons
        </button>
      </div>
    </div>
  );
}
  
export default App;

Step 4: Now inside the src folder, make a Components folder, make two files within this folder one for the Pokémon thumbnail and another one is  for the description.  In your src/Components/PokemonThumnail.js(or whatever name you like to give) paste the code given below. In this file, we are using all the required props which have been passed by the App.js and creating the whole Pokémon thumbnail structure. Here we have useState for show to show the Description.js component on clicking the Load More buttons by default it has been set as false .

PokemonThumnail.js




import React, { useState } from "react";
import Description from "./Description";
  
const PokemonThumbnail = ({
  id,
  name,
  image,
  type,
  height,
  weight,
  stat1,
  stat2,
  stat3,
  stat4,
  stat5,
  stat6,
  bs1,
  bs2,
  bs3,
  bs4,
  bs5,
  bs6,
}) => {
  const style = `thumb-container ${type}`;
  const [show, setShow] = useState(false);
  return (
    <div className={style}>
      <div className="number">
        <small>#0{id}</small>
      </div>
      <img src={image} alt={name} />
      <div className="detail-wrapper">
        <h3>{name.toUpperCase()}</h3>
        <small>Type : {type}</small>
        <button className="pokeinfo" 
          onClick={() => setShow(!show)}>
          {show === true ? "Know less..." : "Know more..."}
        </button>
        {show === true ? (
          <Description
            weightpok={weight}
            heightpok={height}
            pokstat1={stat1}
            pokstat2={stat2}
            pokstat3={stat3}
            pokstat4={stat4}
            pokstat5={stat5}
            pokstat6={stat6}
            posbs1={bs1}
            posbs2={bs2}
            posbs3={bs3}
            posbs4={bs4}
            posbs5={bs5}
            posbs6={bs6}
          />
        ) : (
          <></>
        )}
      </div>
    </div>
  );
};
  
export default PokemonThumbnail;

Step 5: Paste the code given below in your src/Components/Description.js(or whatever name you will give). In this file, we are making a component for giving the description about the Pokémon, here also we are using props that have been passed by App.js. There is a know more button in our Pokémon thumbnail, on clicking that particular button this description will be shown in our Thumbnail UI, and on clicking Know less thumbnail will show its initial state.   

Description.js




import React from "react";
  
const Description = ({
  heightpok,
  weightpok,
  pokstat1,
  pokstat2,
  pokstat3,
  pokstat4,
  pokstat5,
  pokstat6,
  posbs1,
  posbs2,
  posbs3,
  posbs4,
  posbs5,
  posbs6,
}) => {
  return (
    <div className="desc">
      <p>
        <b>Height</b> is <b>{heightpok * 10} cm.</b>
      </p>
  
      <p>
        <b>Weight</b> is <b>{weightpok * 0.1} kg</b>
      </p>
  
      <h3>Stat</h3>
  
      <p>
        <b>
          {pokstat1} : {posbs1}
        </b>
      </p>
  
      <p>
        <b>
          {pokstat2} : {posbs2}
        </b>
      </p>
  
      <p>
        <b>
          {pokstat3} : {posbs3}
        </b>
      </p>
  
      <p>
        <b>
          {pokstat4} : {posbs4}
        </b>
      </p>
  
      <p>
        <b>
          {pokstat5} : {posbs5}
        </b>
      </p>
  
      <p>
        <b>
          {pokstat6} : {posbs6}
        </b>
      </p>
    </div>
  );
};
  
export default Description;

Step 6: Go to your src/index.css , paste the code given below , this will add styling to your Pokémon web app for all the components.

src/index.css




body {
  margin: 0;
  font-family: "Satisfy", cursive;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-image: linear-gradient(
    to right,
    #eea2a2 0%,
    #bbc1bf 19%,
    #57c6e1 42%,
    #b49fda 79%,
    #7ac5d8 100%
  );
}
  
code {
  font-family: "Satisfy", cursive;
}
  
.rock {
  background-image: linear-gradient(
    to top, #c79081 0%, #dfa579 100%);
}
  
.ghost {
  background-image: linear-gradient(
    to top, #cfd9df 0%, #e2ebf0 100%);
}
  
.electric {
  background-image: linear-gradient(
    to right, #f83600 0%, #f9d423 100%);
}
  
.bug {
  background-image: linear-gradient(
    to top, #e6b980 0%, #eacda3 100%);
}
  
.poison {
  background-image: linear-gradient(
    to top, #df89b5 0%, #bfd9fe 100%);
}
  
.normal {
  background-image: linear-gradient(
    -225deg, #e3fdf5 0%, #ffe6fa 100%);
}
  
.fairy {
  background-image: linear-gradient(
    to top,
    #ff9a9e 0%,
    #fecfef 99%,
    #fecfef 100%
  );
}
  
.fire {
  background-image: linear-gradient(
    120deg, #f6d365 0%, #fda085 100%);
}
  
.grass {
  background-image: linear-gradient(
    120deg, #d4fc79 0%, #96e6a1 100%);
}
  
.water {
  background-image: linear-gradient(
    120deg, #89f7fe 0%, #66a6ff 100%);
}
  
.ground {
  background-image: linear-gradient(
    315deg, #772f1a 0%, #f2a65a 74%);
}
  
.app-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 3rem 1rem;
}
  
.app-container h1 {
  width: 0ch;
  color: rgb(16, 166, 236);
  overflow: hidden;
  white-space: nowrap;
  animation: text 4s steps(15) infinite alternate;
}
  
@keyframes text {
  0% {
    width: 0ch;
  }
  50% {
    width: 15ch;
    color: rgb(218, 55, 5);
  }
}
  
.pokemon-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
  
.all-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}
  
.thumb-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 0.2rem;
  margin: 0.3rem;
  border: 1px solid #efefef;
  border-radius: 2rem;
  min-width: 160px;
  text-align: center;
  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.089);
}
  
.thumb-container :hover {
  margin: 0.7rem 0;
}
  
h3 {
  margin-bottom: 0.2rem;
}
  
.thumb-container .number {
  border-radius: 1rem;
  padding: 0.2rem 0.4rem;
  background-color: rgba(255, 255, 255, 0.3);
}
  
.thumb-container img {
  width: 120px;
  height: 120px;
}
  
.thumb-container small {
  text-transform: capitalize;
}
  
.detail-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
}
  
.detail-wrapper button {
  color: rgb(22, 22, 22);
  padding: 0.5rem;
  margin-top: 1rem;
  border: none;
  border-radius: 0.2rem;
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0.185);
}
  
.load-more {
  background-color: #76daff;
  background-image: linear-gradient(
    315deg, #76daff 0%, #fcd000 74%);
  border-radius: 6px;
  border: 1px solid #c6c6c6;
  color: #444;
  padding: 0.5rem 1.5rem;
  min-width: 20%;
  margin-top: 1rem;
  font-family: "Satisfy", cursive;
}
  
button:hover {
  background-color: #ff0000;
  background-image: linear-gradient(
    315deg, #ff0000 0%, #ffed00 74%);
}
  
.pokeinfo {
  margin: 0 25px;
  font-family: "Satisfy", cursive;
  background-image: linear-gradient(
    180deg, #2af598 0%, #009efd 100%);
}
  
.pokeinfo:hover {
  background-image: linear-gradient(
    -20deg,
    #ddd6f3 0%,
    #faaca8 100%,
    #faaca8 100%
  );
}
  
h3 {
  text-decoration: underline;
}

Step to Run Application: Run the application using the following command from the root directory of the project:

npm start

Output: Now open your browser and go to http://localhost:3000/, you will see the following output:




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!