使用 ReactJS 的 JSON 服务器

使用 ReactJS 的 JSON 服务器

由 Mux 主办的 DEV 全球展示挑战赛：展示你的项目！

使用 ReactJS 的 JSON 服务器

JSON Server 可以帮助您轻松快捷地搭建 REST API。正如他们在 GitHub 代码库中所述，您可以在 30 秒内完成创建。本文将介绍如何安装和部署 JSON 文件。

项目启动

1 - 我们使用 created-react-app 创建了该项目。

$ npx create-react-app my-app
$ cd my-app


2 - 我们安装了 jSON 服务器

$ npm install -g json-server


创建 JSON 文件

在 my-app 文件夹内，我们将创建一个名为“db.json”的文件，其中包含以下数据：

{
  "posts": [
    {
      "title": "CopyRight Automatico",
      "tags": "[JS]"
    },
    {
      "title": "HtmlWebpackPlugin Multiples HTML files",
      "tags": "[JS, webpack]"
    }
  ]
}

然后，让我们运行以下命令来运行“json-server”和“react-app”：

$ json-server --watch db.json --port 3001


$ npm run start


配置 App.js 文件

现在我们的“json-server”已经在“localhost:3001/posts”下运行了，我们可以进行查询了。因此，在App.js文件中插入以下代码，其中在React组件挂载时，我们使用“fetch”执行查询，并按顺序使用“map”返回每个条目。

结果

现在，如果我们查看“React App”页面，我们将得到以下结果。

结论

按照本文中的步骤，您可以为您的应用程序创建一个优秀的 ReactJS 和 JSON 服务器开发环境。
代码中使用的主题是我受 Vue.js 启发而创建的，您可以在 VS Code 中搜索“ Vue Theme”进行安装。

谢谢！！！