介绍
在这篇博文中,我们将探索如何使用 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:路由的错误处理组件。安装
克隆存储库:1
2
git clone https://github.com/abhishekgurjar-in/country-finder.git
cd country-finder
1
npm install
1
npm start
用法
搜索国家:在搜索栏中输入国家/地区专业系统搭建点我wcqh.cn名称以过滤国家列表。按地区过滤:从下拉菜单中选择一个地区以查看该地区的国家/地区。 查看详细信息:点击国家卡即可查看该国家/地区的详细信息。代码说明
应用程序.jsapp 组件将 header 和 outlet 组件包装在 themeprovider 中,管理整个应用程序的主题状态。
1
2
3
4
5
6
7
8
9
10
11
12
import header from “./components/header”;
import { outlet } from “react-router-dom”;
import “./app.css”;
import { themeprovider } from “./contexts/t专业系统搭建点我wcqh.cnhemecontext”;
const app = () => {
return (
<themeprovider><header></header><outlet></outlet></themeprovider>
);
};
export default app;
标题组件允许用户在浅色和深色主题之间切换并显示应用程序标题。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import { usetheme } from “../hooks/usetheme”
export default function header() {
const [isdark,专业系统搭建点我wcqh.cn setisdark] = usetheme();
return (
<header classname=”{`header-container” :><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专业系统搭建点我wcqh.cn” fa- :></i>
{isdark ? light : dark} mode
</p>
</div>
</header>
)
}
主页组件包含搜索栏、筛选菜单,并根据搜索和筛选条件列出国家/地区。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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 (
<main classname=”{`${isdark” :><div classname=”search-filter-container”>
<searchbar setquery=”{setquery}”></searchbar><selectmenu setquery=”{setquery}”></selectmenu>
</div>
<co专业系统搭建点我wcqh.cnuntrieslist query=”{query}”></countrieslist></main>
)
}
searchbar 组件处理搜索国家/地区的用户输入。
1
2
3
4
5
6
7
8
9
10
11
12
13
import react from react;
export default function searchbar({ setquery }) {
return (
<div classname=”search-container”>
<i classname=”fa-solid fa-magnifying-glass”></i>
<input onchange=”{(e)”> setqu专业系统搭建点我wcqh.cnery(e.target.value.tolowercase())}
type=”text”
placeholder=”search for a country…”
/>
</div>
)
}
selectmenu 组件提供了一个下拉菜单,用于按地区过滤国家/地区。
1
2
3
4
5
6
7
8
9
10
11
12
13
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=”asia”>asia</option>
<option value=”europe”>europe</option>
<option value=”oceania”>oceania</option></select>
)
}
countr专业系统搭建点我wcqh.cnieslist 组件获取并显示国家/地区列表。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
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 (
<div classname=”countries-container”>
{count专业系统搭建点我wcqh.cnriesdata
.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.r专业系统搭建点我wcqh.cnegion}” capital=”{country.capital?.[0]}” data=”{country}”></countrycard>
))}
</div>
)
}
countrydetail 组件获取并显示有关所选国家/地区的详细信息。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
86
87
88
89
90
91
92
93
94
95
96
97
98
99
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 (
<div classname=”{`error-container” :>
<h3>country not found</h3>
<link to=”/”>back to home
</div>
);
}
if (!countrydata) {
return <co专业系统搭建点我wcqh.cnuntrydetailshimmer></countrydetailshimmer>;
}
return (
<div classname=”{`country-detail-container” :>
<link to=”/” classname=”back-button”>
<i classname=”fa-solid fa-arrow-left”></i>
back
<div classname=”country-detail-content”>
@@##@@
<div classname=”country-detail-info”>
<h1>{countrydata.name}</h1>
<div clas专业系统搭建点我wcqh.cnsname=”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专业系统搭建点我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>
</div>
</div>
</div>
);
}
countrydetailshimmer 组件在获取国家/地区详细信息时显示加载占位符。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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”>专业系统搭建点我wcqh.cn</div>
<div classname=”shimmer-line”></div>
<div classname=”shimmer-line”></div>
<div classname=”shimmer-line”></div>
<div classname=”shimmer-line”></div>
</div>
</div>
);
}
countrycard 组件显示每个国家/地区的简要概述。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import react from react;
import { link } from react-router-dom;专业系统搭建点我wcqh.cn
export default function countrycard({ name, flag, population, region, capital, data }) {
return (
<div classname=”country-card”>
@@##@@
<h3>{name}</h3>
<p><strong>population:</strong> {population}</p>
<p><strong>region:</strong> {region}</p>
<p><strong>capital:</strong> {capital}</p>
<link to=”{`/country/${专业系统搭建点我wcqh.cnname}`}” state=”{data}”>
<button>more details</button>
</div>
);
}
countrieslistshimmer 组件在获取国家/地区列表时显示加载占位符。
1
2
3
4
5
6
7
8
9
10
11
import React from react;
export default function CountriesListShimmer() {
return (
<div classname=”countries-list-shimmer”>
{Array.from({ length: 10 }).map((_, index) =专业系统搭建点我wcqh.cn> (
<div key=”{index}” classname=”shimmer-card”></div>
))}
</div>
);
}
现场演示
您可以通过访问国家/地区查找器演示来观看国家/地区查找器应用程序的实时演示。
结论
在这个项目中,我们使用 react 构建了一个国家/地区查找应用程序,允许用户搜索国家/地区、按地区过滤并查看详细信息。我们与 rest country api 集成,并使用 react 的钩子和上下文来管理状态和主题。
制作人员
反应:反应 rest 国家/地区 api:rest 国家/地区 很棒的字体:很棒的字体作者
abhishek gurjar是一位专注的 web 专业系统搭建点我wcqh.cn开发人员,热衷于创建实用且功能性的 web 应用程序。在github 上查看他的更多项目。
以上就是使用 React 构建国家/地区查找应用程序的详细内容,更多请关注青狐资源网其它相关文章!
暂无评论内容