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