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/.
Prerequisites:
Approach to creating 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 explorerThe 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;
//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;
//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