演示应用程序

让我们来看一个使用我们讨论过的部分端点的 React 应用。该应用程序将提供以下功能：

• 根据国家名称搜索国家
• 根据货币名称搜索国家
• 根据语言搜索国家
• 根据首都城市搜索国家
• 根据地区名称搜索国家
• 根据子区域名称搜索国家

应用程序工作流程

从用户的角度来看，应用程序的工作流程如下：

1. 当应用程序启动时，我们首先看到主页。该页面显示顶部导航栏，包含欢迎文字和一个输入表单。
2. 从下拉菜单中选择一项，指定我们用于搜索的参数。
3. 选定搜索参数后，在搜索框中输入搜索关键词。
4. 点击“搜索”按钮，获取与我们输入匹配的国家列表。
5. 结果列表将显示以下国家信息：
   • 国家的常用名称（附带国旗表情符号）
   • 国家所属地区
   • 国家首都城市
   • 国家边界国家列表
   • 国家的 Google 地图链接
   • 国家国旗图片
   • 国家官方名称

如果没有任何国家匹配我们的查询，应用将显示“未找到国家”。

演示应用

下方的组件包含了我们应用程序的代码。点击“运行”按钮，即可查看应用的实际效果。

代码说明

在我们的 React 应用中，index.js 文件将 App 组件（即 App.js）渲染为根组件。

让我们看看应用中的各个组件：

• SearchSelector：该组件负责渲染用于输入查询条件的表单。
• CountriesList：该组件用于展示国家列表。它会根据表单输入生成相应的 URL。当我们点击“搜索”按钮时，它将调用该 URL，并将返回的数据通过 map 函数处理，最终在页面上呈现结果。该函数使用 if 语句判断响应是国家列表还是 404 错误。