当前位置：首页 > 文章列表 > 文章 > 前端 > 使用 React 构建国家/地区查找应用程序

使用 React 构建国家/地区查找应用程序

来源：dev.to 2024-09-17 18:57:57 0浏览收藏

推广推荐

支持 PC / 移动端，安全直达

IT行业相对于一般传统行业，发展更新速度更快，一旦停止了学习，很快就会被行业所淘汰。所以我们需要踏踏实实的不断学习，精进自己的技术，尤其是初学者。今天golang学习网给大家整理了《使用 React 构建国家/地区查找应用程序》，聊聊，我们一起来看看吧！

介绍

在这篇博文中，我们将探索如何使用 react 构建国家/地区查找应用程序。该应用程序允许用户搜索国家/地区、按地区过滤它们以及查看有关每个国家/地区的详细信息。我们将利用 react 的钩子和上下文来管理状态和主题，并将与 rest 国家/地区 api 集成以获取国家/地区数据。

项目概况

国家/地区查找应用程序提供了一个交互式界面，用户可以：

按名称搜索国家。
按地区筛选国家。
查看每个国家/地区的详细信息，包括国旗、人口等。

特征

搜索栏：允许用户按名称搜索国家。
按地区过滤：下拉菜单可根据地区过滤国家/地区。
国家/地区详细信息：显示所选国家/地区的详细信息。
主题切换：在浅色和深色主题之间切换。

使用的技术

react：用于构建用户界面的 javascript 库。
rest 国家/地区 api：提供有关国家/地区的数据。
css：用于设计应用程序的样式。
react router：用于在页面之间导航和传递状态。

项目结构

该项目分为几个组件：

app.js：主要组件，包括用于路由的 header 和 outlet。
header.js：显示应用程序标题和主题切换按钮。
home.js：带有搜索和过滤选项的主页，以及国家/地区列表。
searchbar.js：搜索国家/地区的组件。
selectmenu.js：用于按地区过滤国家/地区的下拉菜单。
countrieslist.js：根据搜索和过滤条件显示国家/地区列表。
countrycard.js：显示每个国家/地区的摘要。
countrydetail.js：显示有关所选国家/地区的详细信息。
countrydetailshimmer.js：加载国家详细信息的占位符。
error.js：路由的错误处理组件。

安装

克隆存储库：

   git clone https://github.com/abhishekgurjar-in/country-finder.git
   cd country-finder

安装依赖项：

   npm install

启动开发服务器：

   npm start

用法

搜索国家：在搜索栏中输入国家/地区名称以过滤国家列表。
按地区过滤：从下拉菜单中选择一个地区以查看该地区的国家/地区。
查看详细信息：点击国家卡即可查看该国家/地区的详细信息。

代码说明

应用程序.js

app 组件将 header 和 outlet 组件包装在 themeprovider 中，管理整个应用程序的主题状态。

import header from "./components/header";
import { outlet } from "react-router-dom";
import "./app.css";
import { themeprovider } from "./contexts/themecontext";

const app = () => {
  return (
    <themeprovider>
      <header />
      <outlet />
    </themeprovider>
  );
};

export default app;

header.js

标题组件允许用户在浅色和深色主题之间切换并显示应用程序标题。

import { usetheme } from "../hooks/usetheme"

export default function header() {
  const [isdark, setisdark] =  usetheme();

  return (
    <header classname={`header-container ${isdark ? 'dark' : ''}`}>
      <div classname="header-content">
        <h2 classname="title">
          <a href="/">country finder</a>
        </h2>
        <p classname="theme-changer" onclick={() => {
          setisdark(!isdark);
          localstorage.setitem('isdarkmode', !isdark);
        }}>
          <i classname={`fa-solid fa-${isdark ? 'sun' : 'moon'}`} />
          &nbsp;&nbsp;{isdark ? 'light' : 'dark'} mode
        </p>
      </div>
    </header>
  )
}

主页.js

主页组件包含搜索栏、筛选菜单，并根据搜索和筛选条件列出国家/地区。

import react, { usestate } from 'react';
import searchbar from './searchbar';
import selectmenu from './selectmenu';
import countrieslist from './countrieslist';
import { usetheme } from '../hooks/usetheme';

export default function home() {
  const [query, setquery] = usestate('');
  const [isdark] = usetheme();

  return (
    <main classname={`${isdark ? 'dark' : ''}`}>
      <div classname="search-filter-container">
        <searchbar setquery={setquery} />
        <selectmenu setquery={setquery} />
      </div>
      <countrieslist query={query} />
    </main>
  )
}

搜索栏.js

searchbar 组件处理搜索国家/地区的用户输入。

import react from 'react';

export default function searchbar({ setquery }) {
  return (
    <div classname="search-container">
      <i classname="fa-solid fa-magnifying-glass"></i>
      &lt;input
        onchange={(e) =&gt; setquery(e.target.value.tolowercase())}
        type="text"
        placeholder="search for a country..."
      />
    </div>
  )
}

选择菜单.js

selectmenu 组件提供了一个下拉菜单，用于按地区过滤国家/地区。

import react from 'react';

export default function selectmenu({ setquery }) {
  return (
    &lt;select classname=&quot;filter-by-region&quot; onchange={(e) =&gt; setquery(e.target.value.tolowercase())}>
      <option hidden>filter by region</option>
      <option value="africa">africa</option>
      <option value="americas">americas</option>
      <option value="asia">asia</option>
      <option value="europe">europe</option>
      <option value="oceania">oceania</option>
    &lt;/select&gt;
  )
}

国家列表.js

countrieslist 组件获取并显示国家/地区列表。

import react, { useeffect, usestate } from 'react';
import countrycard from './countrycard';
import countrieslistshimmer from './countrieslistshimmer';

export default function countrieslist({ query }) {
  const [countriesdata, setcountriesdata] = usestate([]);

  useeffect(() => {
    fetch('https://restcountries.com/v3.1/all')
      .then((res) => res.json())
      .then((data) => {
        setcountriesdata(data);
      });
  }, []);

  if (!countriesdata.length) {
    return <countrieslistshimmer />;
  }

  return (
    <div classname="countries-container">
      {countriesdata
        .filter((country) =>
          country.name.common.tolowercase().includes(query) || country.region.tolowercase().includes(query)
        )
        .map((country) => (
          <countrycard
            key={country.name.common}
            name={country.name.common}
            flag={country.flags.svg}
            population={country.population}
            region={country.region}
            capital={country.capital?.[0]}
            data={country}
          />
        ))}
    </div>
  )
}

countrydetail.js

countrydetail 组件获取并显示有关所选国家/地区的详细信息。

import react, { useeffect, usestate } from 'react';
import { link, uselocation, useparams } from 'react-router-dom';
import { usetheme } from '../hooks/usetheme';
import countrydetailshimmer from './countrydetailshimmer';
import './countrydetail.css';

export default function countrydetail() {
  const [isdark] = usetheme();
  const params = useparams();
  const { state } = uselocation();
  const countryname = params.country;

  const [countrydata, setcountrydata] = usestate(null);
  const [notfound, setnotfound] = usestate(false);

  function updatecountrydata(data) {
    setcountrydata({
      name: data.name.common || data.name,
      nativename: object.values(data.name.nativename || {})[0]?.common,
      population: data.population,
      region: data.region,
      subregion: data.subregion,
      capital: data.capital,
      flag: data.flags.svg,
      tld: data.tld,
      languages: object.values(data.languages || {}).join(', '),
      currencies: object.values(data.currencies || {})
        .map((currency) => currency.name)
        .join(', '),
      borders: [],
    });

    if (!data.borders) {
      data.borders = [];
    }

    promise.all(
      data.borders.map((border) =>
        fetch(`https://restcountries.com/v3.1/alpha/${border}`)
          .then((res) => res.json())
          .then(([bordercountry]) => bordercountry.name.common)
      )
    ).then((borders) => {
      settimeout(() =>
        setcountrydata((prevstate) => ({ ...prevstate, borders }))
      );
    });
  }

  useeffect(() => {
    if (state) {
      updatecountrydata(state);
      return;
    }

    fetch(`https://restcountries.com/v3.1/name/${countryname}?fulltext=true`)


 .then((res) => res.json())
      .then(([data]) => {
        if (!data) {
          setnotfound(true);
        } else {
          updatecountrydata(data);
        }
      })
      .catch(() => setnotfound(true));
  }, [countryname, state]);

  if (notfound) {
    return (
      <div classname={`error-container ${isdark ? 'dark' : ''}`}>
        <h3>country not found</h3>
        <link to="/">back to home</link>
      </div>
    );
  }

  if (!countrydata) {
    return <countrydetailshimmer />;
  }

  return (
    <div classname={`country-detail-container ${isdark ? 'dark' : ''}`}>
      <link to="/" classname="back-button">
        <i classname="fa-solid fa-arrow-left" />
        &nbsp;back
      </link>
      <div classname="country-detail-content">
        <img src={countrydata.flag} alt={`${countrydata.name} flag`} />
        <div classname="country-detail-info">
          <h1>{countrydata.name}</h1>
          <div classname="details">
            <p><strong>native name:</strong> {countrydata.nativename}</p>
            <p><strong>population:</strong> {countrydata.population}</p>
            <p><strong>region:</strong> {countrydata.region}</p>
            <p><strong>subregion:</strong> {countrydata.subregion}</p>
            <p><strong>capital:</strong> {countrydata.capital}</p>
            <p><strong>top level domain:</strong> {countrydata.tld}</p>
            <p><strong>languages:</strong> {countrydata.languages}</p>
            <p><strong>currencies:</strong> {countrydata.currencies}</p>
            <p><strong>border countries:</strong> {countrydata.borders.join(', ') || 'none'}</p>
          </div>
        </div>
      </div>
    </div>
  );
}

countrydetailshimmer.js

countrydetailshimmer 组件在获取国家/地区详细信息时显示加载占位符。

import react from 'react';

export default function countrydetailshimmer() {
  return (
    <div classname="country-detail-shimmer">
      <div classname="shimmer-img"></div>
      <div classname="shimmer-info">
        <div classname="shimmer-line name"></div>
        <div classname="shimmer-line"></div>
        <div classname="shimmer-line"></div>
        <div classname="shimmer-line"></div>
        <div classname="shimmer-line"></div>
      </div>
    </div>
  );
}

countrycard.js

countrycard 组件显示每个国家/地区的简要概述。

import react from 'react';
import { link } from 'react-router-dom';

export default function countrycard({ name, flag, population, region, capital, data }) {
  return (
    <div classname="country-card">
      <img src={flag} alt={`${name} flag`} />
      <h3>{name}</h3>
      <p><strong>population:</strong> {population}</p>
      <p><strong>region:</strong> {region}</p>
      <p><strong>capital:</strong> {capital}</p>
      <link to={`/country/${name}`} state={data}>
        <button>more details</button>
      </link>
    </div>
  );
}

国家列表shimmer.js

countrieslistshimmer 组件在获取国家/地区列表时显示加载占位符。

import React from 'react';

export default function CountriesListShimmer() {
  return (
    <div className="countries-list-shimmer">
      {Array.from({ length: 10 }).map((_, index) => (
        <div key={index} className="shimmer-card"></div>
      ))}
    </div>
  );
}