使用 React 构建国家/地区查找应用程序-青狐资源网

介绍

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

项目概况

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

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

特征

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

使用的技术

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

项目结构

该项目分为几个组件：

app.js：主要组件，包括用于路由的 header 和 outlet。 header.js：显示应用程序标题和主题切换按钮。 home.js：带有搜索和过滤选项的主页，以及国家/地区列表。 searchbar.js：搜索国家/地区的组件。 selectmenu.js：用于按地区过滤国家/地区的下拉菜单。 countrieslist.js专业系统搭建点我wcqh.cn：根据搜索和过滤条件显示国家/地区列表。 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

登录后复制

用法

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

代码说明

应用程序.js

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

import header from “./components/header”;

import { outlet } from “react-router-dom”;

import “./app.css”;

import { themeprovider } from “./contexts/t专业系统搭建点我wcqh.cnhemecontext”;

const app = () => {

return (

);

};

export default app;

登录后复制

header.js

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

import { usetheme } from “../hooks/usetheme”

export default function header() {

const [isdark,专业系统搭建点我wcqh.cn setisdark] = usetheme();

return (

<a href=”/”>country finder</a>

</h2>

<p classname=”theme-changer” onclick=”{()”> {

setisdark(!isdark);

localstorage.setitem(isdarkmode, !isdark);

}}>

{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 } f专业系统搭建点我wcqh.cnrom ../hooks/usetheme;

export default function home() {

const [query, setquery] = usestate();

const [isdark] = usetheme();

return (

</div>

<co专业系统搭建点我wcqh.cnuntrieslist query=”{query}”></countrieslist></main>

)

}

登录后复制

搜索栏.js

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

import react from react;

export default function searchbar({ setquery }) {

return (

<input onchange=”{(e)”> setqu专业系统搭建点我wcqh.cnery(e.target.value.tolowercase())}

type=”text”

placeholder=”search for a country…”

</div>

)

}

登录后复制

选择菜单.js

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

import react from react;

export default function selectmenu({ setquery }) {

return (

<select classname=”filter-by-region” onchange=”{(e)”> setq专业系统搭建点我wcqh.cnuery(e.target.value.tolowercase())}>

<option hidden>filter by region</option>

<option value=”africa”>africa</option>

<option value=”americas”>americas</option>

<option value=”europe”>europe</option>

<option value=”oceania”>oceania</option></select>

)

}

登录后复制

国家列表.js

countr专业系统搭建点我wcqh.cnieslist 组件获取并显示国家/地区列表。

import react, { useeffect, usestate } from react;

import countrycard from ./countrycard;

import countrieslistshimmer from ./countrieslistshimmer;

export default function countrieslist({ query }) {

const [countriesdata, setcountr专业系统搭建点我wcqh.cniesdata] = usestate([]);

useeffect(() => {

fetch(https://restcountries.com/v3.1/all)

.then((res) => res.json())

.then((data) => {

setcountriesdata(data);

});

}, []);

if (!countriesdata.length) {

return <countrieslistshimmer></countrieslistshimmer>;

}

return (

{count专业系统搭建点我wcqh.cnriesdata

.filter((country) =>

country.name.common.tolowercase().includes(query) || country.region.tolowercase().includes(query)

)

.map((country) => (

))}

</div>

)

}

登录后复制

countrydetail.js

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

8专业系统搭建点我wcqh.cn5

100

101

102

103

104

105

106

107

108

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 专业系统搭建点我wcqh.cndefault 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) {

setcountr专业系统搭建点我wcqh.cnydata({

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(, ),

curre专业系统搭建点我wcqh.cnncies: 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]) => 专业系统搭建点我wcqh.cnbordercountry.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.jso专业系统搭建点我wcqh.cnn())

.then(([data]) => {

if (!data) {

setnotfound(true);

} else {

updatecountrydata(data);

}

})

.catch(() => setnotfound(true));

}, [countryname, state]);

if (notfound) {

return (

<h3>country not found</h3>

</div>

);

}

if (!countrydata) {

return <co专业系统搭建点我wcqh.cnuntrydetailshimmer></countrydetailshimmer>;

}

return (

back

@@##@@

<h1>{countrydata.name}</h1>

<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专业系统搭建点我wcqh.cn>

<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>

);

}

登录后复制

countrydet专业系统搭建点我wcqh.cnailshimmer.js

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

import react from react;

export default function countrydetailshimmer() {

return (

<div classname=”shimmer-line name”>专业系统搭建点我wcqh.cn</div>

</div>

);

}

登录后复制

countrycard.js

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

import react from react;

import { link } from react-router-dom;专业系统搭建点我wcqh.cn

export default function countrycard({ name, flag, population, region, capital, data }) {

return (

@@##@@

<p><strong>population:</strong> {population}</p>

<p><strong>region:</strong> {region}</p>

<p><strong>capital:</strong> {capital}</p>

<button>more details</button>

</div>

);

}

登录后复制

国家列表shimmer.js

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

import React from react;

export default function CountriesListShimmer() {

return (

{Array.from({ length: 10 }).map((_, index) =专业系统搭建点我wcqh.cn> (

))}

</div>

);

}

登录后复制

现场演示

您可以通过访问国家/地区查找器演示来观看国家/地区查找器应用程序的实时演示。

结论

在这个项目中，我们使用 react 构建了一个国家/地区查找应用程序，允许用户搜索国家/地区、按地区过滤并查看详细信息。我们与 rest country api 集成，并使用 react 的钩子和上下文来管理状态和主题。

制作人员

反应：反应 rest 国家/地区 api：rest 国家/地区 很棒的字体：很棒的字体

作者

abhishek gurjar是一位专注的 web 专业系统搭建点我wcqh.cn开发人员，热衷于创建实用且功能性的 web 应用程序。在github 上查看他的更多项目。

以上就是使用 React 构建国家/地区查找应用程序的详细内容，更多请关注青狐资源网其它相关文章！

1.如需技术支持联系QQ：1339833655 2. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！ 3. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！ 4. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！ 5. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！ 6. 如有链接无法下载、失效或广告，请联系管理员处理！ 7. 本站资源售价只是摆设，本站源码仅提供给会员学习使用！ 8. 如遇到加密压缩包，请使用360解压,如遇到无法解压的请联系管理员！

THE END