主页.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 (
    

      

        
        
      
      
    
  )
}

搜索栏.js

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

import react from 'react';

export default function searchbar({ setquery }) {
  return (
    

      
       setquery(e.target.value.tolowercase())}
        type="text"
        placeholder="search for a country..."
      />
    
  )
}

选择菜单.js

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

import react from 'react';

export default function selectmenu({ setquery }) {
  return (
     setquery(e.target.value.tolowercase())}>
      
      africa
      americas
      asia
      europe
      oceania
    
  )
}

国家列表.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 ;
  }

  return (
    

      {countriesdata
        .filter((country) =>
          country.name.common.tolowercase().includes(query) || country.region.tolowercase().includes(query)
        )
        .map((country) => (
          
        ))}
    
  )
}

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 (
      

        
country not found
        back to home
      
    );
  }

  if (!countrydata) {
    return ;
  }

  return (
    

      
        
         back
      
      

        @@##@@
        

          
{countrydata.name}
          

            
native name: {countrydata.nativename}
            
population: {countrydata.population}
            
region: {countrydata.region}
            
subregion: {countrydata.subregion}
            
capital: {countrydata.capital}

							

								
								

									PHP经典实例(第二版)
									
PHP经典实例（第2版）能够为您节省宝贵的Web开发时间。有了这些针对真实问题的解决方案放在手边，大多数编程难题都会迎刃而解。《PHP经典实例(第2版)》将PHP的特性与经典实例丛书的独特形式组合到一起，足以帮您成功地构建跨浏览器的Web应用程序。在这个修订版中，您可以更加方便地找到各种编程问题的解决方案，《PHP经典实例(第2版)》中内容涵盖了：表单处理；Session管理；数据库交互；使用We
								
								下载 
							
						
            
top level domain: {countrydata.tld}
            
languages: {countrydata.languages}
            
currencies: {countrydata.currencies}
            
border countries: {countrydata.borders.join(', ') || 'none'}
          
        
      
    

  );
}

countrydetailshimmer.js

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

import react from 'react';

export default function countrydetailshimmer() {
  return (
    

      

      

        

        

        

        

        

      
    
  );
}

countrycard.js

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

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

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

      @@##@@
      
{name}
      
population: {population}
      
region: {region}
      
capital: {capital}
      
        more details
      
    
  );
}

国家列表shimmer.js

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

import React from 'react';

export default function CountriesListShimmer() {
  return (
    

      {Array.from({ length: 10 }).map((_, index) => (
        

      ))}
    
  );
}

现场演示

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

结论

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

制作人员

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

作者

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