React.js 神奇宝贝应用程序

本应用程序使用 React.js 构建，旨在提供一个交互式的神奇宝贝图鉴。

功能

• 神奇宝贝列表：以卡片形式展示神奇宝贝列表，每个卡片包含宝贝图片和名称。
• 宝贝详情：点击神奇宝贝卡片可跳转至该宝贝详情页面，显示宝贝属性、进化链、能力值和技能信息。
• 宝贝搜索：提供一个搜索框，允许用户按名称搜索宝贝，搜索结果将实时显示。
• 随机宝贝：提供一个“随机宝贝”按钮，点击将随机展示一个神奇宝贝详情。

技术栈

• React.js：页面组件化开发
• React Router：路由管理
• Axios：异步数据请求
• Bootstrap：美化页面

数据来源

本应用程序使用 PokeAPI 提供的神奇宝贝数据。

示例代码

import React, { useState, useEffect } from 'react';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import axios from 'axios';
import PokemonList from './components/PokemonList';
import PokemonDetail from './components/PokemonDetail';
import SearchBar from './components/SearchBar';
import RandomBtn from './components/RandomBtn';

function App() {
  const [pokemonData, setPokemonData] = useState([]);
  const [searchTerm, setSearchTerm] = useState('');

  useEffect(() => {
    const fetchPokemonData = async () => {
      try {
        const response = await axios.get('https://pokeapi.co/api/v2/pokemon?limit=150');
        setPokemonData(response.data.results);
      } catch (error) {
        console.error(error);
      }
    };
    fetchPokemonData();
  }, []);

  const filteredPokemonData = pokemonData.filter((item) => item.name.includes(searchTerm));

  return (
    <Router>
      <div className="container mt-5">
        <h1 className="text-center mb-4">React.js 神奇宝贝应用程序</h1>
        <SearchBar searchTerm={searchTerm} setSearchTerm={setSearchTerm} />
        <RandomBtn />
        <Switch>
          <Route exact path="/">
            <PokemonList pokemonData={filteredPokemonData} />
          </Route>
          <Route path="/pokemon/:id">
            <PokemonDetail />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

export default App;

屏幕截图

宝贝列表

宝贝详情

宝贝搜索

随机宝贝