极客教程如何使用React.js和Pokémon API构建一个Pokémon应用
介绍： 在这篇文章中，我们将看到如何使用React.js和Pokémon API构建一个Pokémon应用。
先决条件：
- JavaScript Es6
- React Hooks
- React组件
- 获取API数据
- CSS
方法： 这个Web应用程序将是一个单页Web应用程序，在这里我们将展示不同类型的Pokémon和一些相关特征，我们将使用一个免费的API资源来获取所有这些数据，网址是https://pokeapi.co/。我们将设置一个 加载更多 按钮，点击该按钮页面将在我们的网页上加载更多的Pokémon（所加载的Pokémon数量将取决于我们在API调用中设置的限制值）。
现在让我们逐步实现上述方法。
创建React应用程序并安装所有必需的包：
步骤1： 使用以下命令创建React应用程序：
npx create-react-app foldername
步骤2： 创建项目文件夹（即文件夹名称），然后使用以下命令进行切换：
cd foldername
项目结构：
将会如下所示。
现在先忽略build文件夹，完成应用程序后，如果您想将应用部署在某个地方，您需要在终端中运行“ npm run build ”，该命令会创建一个 build 文件夹。然后，您只需将 build 文件夹拖放到您要部署的网站https://www.netlify.com/中。
步骤3： 现在在src文件夹下，编辑您的App.js。对于 loadPoke ，您可以设置任何您想要的限制，这里我将限制设置为20。在这个文件中，我们使用了两个useState hooks，一个用于在useEffect中通过 https://pokeapi.co/api/v2/pokemon/${pokemon.name} 获取所有带有名称的数据，另一个用于在 More Pokemons 按钮的 onClick 事件中加载更多的宝可梦数据，使用 API https://pokeapi.co/api/v2/pokemon?limit=20。 然后，在Pokémon应用程序容器中，我们使用所需的特性构建整个Pokémon卡，并为其他组件设置props属性。
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;
步骤 4： 现在在 src 文件夹中，创建一个Components文件夹，在这个文件夹中创建两个文件，一个用于宝可梦的缩略图，另一个用于描述。在 src/Components/PokemonThumnail.js （或者你想要取的任何名称）中，粘贴下面给出的代码。在这个文件中，我们使用了App.js传递的所有所需的props，并创建了整个宝可梦缩略图的结构。在这里，我们使用useState来控制 show ，以便在单击“加载更多”按钮时显示Description.js组件，默认情况下它被设置为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;
步骤5： 将下面提供的代码粘贴到 src/Components/Description.js （或您给出的任何名称）。在这个文件中，我们正在创建一个组件来描述宝可梦，这里也使用了由App.js传递的props。在我们的宝可梦缩略图中有一个 了解更多 的按钮，单击该按钮将在我们的缩略图UI中显示此描述，并且在单击 了解更少 的缩略图后将显示其初始状态。
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;
步骤6： 转到 src/index.css ，粘贴下面给出的代码，这将为所有组件添加样式，为你的宝可梦网络应用增添风格。
src/index.css
@import url("https://fonts.googleapis.com/css2?family=Satisfy&display=swap");
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;
}
运行应用的步骤： 从项目的根目录中使用以下命令运行应用：
npm start
输出: 现在打开你的浏览器并访问 http://localhost:3000/ ，你将看到以下输出：
