React.js Pokémon App.

Last Updated : 14 Dec, 2023

In this article, we will be going to see how to Build a Pokémon App using React JS and Pokémon API. We will get all these data using a free API resource https://pokeapi.co/.

Prerequisite:

Approach to create React Pokemon App:

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/.

Open App.js in the src folder, define loadPoke, use useState for initial data fetching and loading more Pokémon.
Create a Components folder in src, with PokemonThumbnail.js and Description.js files.
In PokemonThumbnail.js, use props for rendering Pokémon thumbnails and useState for toggling Description.js visibility.
In Description.js, use props for Pokémon details, and implement “Know More” button functionality in the thumbnail for expanded information.

Steps to Create React Application And Installing Module:

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:

file explorer

The updated dependencies in package.json file will look like:

"dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4",
}

Example: Below is the above code example of the pokemon app

Javascript

//App.js
import React, { useEffect, useState } from "react";
import PokemonThumbnail from "./Components/PokemonThumbnail";
 
function App() {
    const [allPokemons, setAllPokemons] = useState([]);
    const [loadPoke, setLoadPoke] = useState(
"https://pokeapi.co/api/v2/pokemon?limit=20"
    );
    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;

Javascript

//PokemonThumbnail.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;

Javascript

//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 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

Suggest improvement

Create a Line Chart using Recharts in ReactJS

What is currying function in JavaScript ?

Share your thoughts in the comments

React.js Pokémon App.

Prerequisite:

Approach to create React Pokemon App:

Steps to Create React Application And Installing Module:

Javascript

Javascript

Javascript

Please Login to comment...

Similar Reads

What kind of Experience do you want to share?