在 React JS 中使用 JSON 占位符的Web 简易应用程序

朋友们大家好，今天我将向您展示如何使用名为 JSON Placeholder 的免费伪造 rest API 创建一个简单的 Web 应用程序。

如果您不知道 JSON Placeholder 网站，可以查看下面的链接。这是一个非常好的资源，可以在您需要为您的应用程序测试一些虚假数据时使用。

JSON 占位符

先决条件

• 熟悉 Javascript 和循环

• React 基础知识（组件、挂钩（useState 和 useEffect））。

• CSS 模块

让我们来建造

启动板

使用 create-react-app 工具创建我们的应用程序非常容易。CRA是 Facebook 提供的 React 应用程序样板。

我们可以在命令行中使用一个命令来完成。首先，通过命令行导航到您要在其中安装应用程序的文件夹，然后运行以下命令：

npx create-react-app api-sample-search

该过程成功完成后，您应该准备好包含应用程序的文件夹！让我们现在开始申请吧！

启动应用程序

让我们使用以下命令启动应用程序：

cd api-sample-search

npm start

第一个命令用于进入我们应用程序的文件夹，第二个命令启动我们的应用程序。默认情况下，应用程序在 localhost:3000 打开，但我们可以在设置中更改端口。应用启动后，会弹出浏览器窗口，您会在浏览器中看到如下图：

您的命令行将如下所示：

使用的库

• 公理

• 方框图标

• 谷歌字体 - Poppins

安装

要安装 axios 库，您可以使用

npm install axios

要添加 Boxicons CDN，请转到索引.html并添加这个

<linkhref='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css'rel='stylesheet'>

要添加 Poppins 字体，请转到应用程序.css，删除所有的样式并把这个

@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap");

代码清理

删除这些文件：

• 标志.svg

• 报告WebVitals.js

• setupTests.js

• 索引.css

注意：您会收到一些关于路径的错误，只需从代码中删除这些行并重新启动应用程序

文件夹结构

我们的 will 的文件夹结构如下所示：

服务

在 Web 应用程序中，您在页面上显示的所有数据都应该位于某个地方，例如数据库、缓存等。您应该从不同的来源获取数据并在 UI 上呈现数据。所有数据都可以通过 API 访问，大多数情况下，格式为 JSON 格式。

我们将从 JSON Placeholder 中获取 10 个 JSON 格式的用户数据，如下图所示：

当您将此API 链接放入浏览器时，响应将如下所示：

我们正在创建一个服务来使用 JSON Placeholder 的用户 API。为 API 调用创建服务不是强制性的，但在编写模块化代码时这是一件好事，它易于阅读和管理。

因此，我们将创建一个服务文件夹并将所有 API 服务保存在该文件夹中

首先，我们将创建一个 userService.js 文件，我们在其中调用用户的 API

我们必须在 UI 中调用getUser函数以从 JSON Placeholder 获取用户。

现在让我们创建卡片来显示用户的信息。

注意：在本文中，我们的主要重点是构建组件，而不是它们的样式部分。对于所有 CSS，请访问 GitHub 存储库

👉github.com/Vasant-Mestry-11/api-sample-sear..👈 _

注意：我们将为每个组件及其 module.css 文件创建一个单独的文件夹

卡片组件

我们的用户卡看起来像这样，它将显示用户的信息，如姓名、用户名、电子邮件、城市、电话号码、网站、公司名称

要创建 Card 组件，将创建 Card.js 并在 Card.module.css 中设置该组件的样式

卡片组件将接收三个道具加载、错误和数据。加载道具用于显示加载程序。

如果 getUsers 函数在发送 API 请求时抛出任何错误，则使用 Error 属性。

Data prop 是所有用户对象的数组，我们将遍历它并显示详细信息。

所以整个 Card 组件看起来像这样

现在我们将添加一个搜索组件以根据搜索到的值过滤出卡片

搜索组件

在这里，搜索组件包含唯一的输入框，以及所有其他搜索实现，例如匹配键及其在其父组件（即 App 组件）中的值。

这种行为背后的原因是卡片组件的数据取决于输入框的值，因此我们将搜索组件的状态提升到其父组件。

搜索组件分为两部分，一个是输入框，一个是下拉框。

搜索将基于在下拉列表中选择的值。下拉选项是根据 API 响应键动态创建的。

所以我们的整个组件看起来像这样

下拉值将是这样的

现在让我们检查搜索是如何实现的。

对于搜索，我们将使用 javascript includes() 函数。

要在公司和地址中搜索文本，我们将在他们的对象中进入一个级别，因为他们都没有其他属性。

对于地址，我们将根据城市属性搜索，对于公司，搜索将基于其名称属性，因此它看起来像这样

结论

我希望你会发现这篇文章对你的编码生涯有所帮助和一些价值。

如果您愿意，可以向此应用程序添加更多功能，例如浅色/深色主题。你可以在这里

查看完整的源代码👈

如果您有任何建议、想法或疑问，请通过我的社交账号与我联系。

下次再见，祝你编码愉快！🤙🤘