在这篇文章里,我将引导你创建简单的 React 应用和简单的 Node / Express API,并将两者连接起来。
这篇教程中提到的各种技术,我不会详细介绍如何使用它们。但是我会留下链接,你可以了解更多信息,
你可以在我为教程制作的仓库中找到所有代码。
教程的目的是为你提供有关如何设置和连接前端 client 和后端 API 的实用指南。
在开始之前,请确保你的电脑正在运行 Node.js。
创建主项目目录
在你的终端中,导航到你要保存项目的目录。现在为你的项目创建一个新目录,并导航到其中:
mkdir my_awesome_project
cd my_awesome_project
创建一个 React App
这个过程真的很简单。
我将使用 Facebook 的 create-react-app 来……你猜对了,轻松创建一个名为 client 的 react 应用:
npx create-react-app client
cd client
npm start
让我们看看我做了什么:
- 使用 npm 的 npx 来创建 react 应用并将其命名为 client。
- cd(change directory 更改目录)进入 client 目录。
- 启动应用程序。
在浏览器中,导航到 http://localhost:3000/。
如果一切正常,你将看到 react 欢迎页面。恭喜你!这意味着你现在已经在本地计算机上运行了一个基本的 react 应用程序。容易吧?
要停止运行你的 react 应用,只需在终端中按 Ctrl + c
。
创建一个 Express App
好的,这将与前面的示例一样简单。不要忘记导航到你的项目顶部文件夹。
我将使用 Express 应用生成器快速创建应用程序框架,并将其命名为 api:
npx express-generator api
cd api
npm install
npm start
让我们看看我做了什么:
- 使用 npm 的 npx 来全局安装 express-generator。
- 使用 express-generator 创建一个 Express 应用并将其命名为 api。
- cd 进入 API 目录。
- 安装所有依赖项。
- 启动应用程序。
在浏览器中,导航到 http://localhost:3000/。
如果一切正常,你将看到 Express 欢迎页面。恭喜你! 这意味着你现在已经在本地计算机上运行了基本的 Express 应用程序。容易吧?
要停止运行你的 react 应用,只需在终端中按 Ctrl + c
。
在 Express API 中配置新 route
我们开始吧。打开你喜欢的代码编辑器(我正在使用 VS Code),导航到你的项目文件夹。
如果你将 react app 命名为 client,将 express app 命名为 api,则会找到两个主文件夹:client 和 api。
1、在 API 目录中,转到 bin/www,然后将第 15 行的端口号从 3000 更改为 9000。稍后我们将同时运行两个应用程序,因此这样做可以避免出现问题。结果应该是这样的:
2、在 api/routes 上,创建一个 testAPI.js 文件,粘贴以下代码:
var express = require(“express”);
var router = express.Router();
router.get(“/”, function(req, res, next) {
res.send(“API is working properly”);
});
module.exports = router;
3、在 api/app.js 文件中,在第 24 行插入新的 route:
app.use("/testAPI", testAPIRouter);
4、你正在“告诉” express 使用该 rout。但是,你仍然要求它。让我们在第 9 行进行操作:
var testAPIRouter = require("./routes/testAPI");
唯一的变化是在第 9 行和第 25 行。它应该是这样的:
5、恭喜你!你已经创建了一个新的 route。
如果你启动 API 应用程序(在终端中,导航到 API 目录并运行 “npm start”),然后在浏览器中访问 http://localhost:9000/testAPI,你将看到以下消息:API is working properly(API 正常运行中)。
将 React Client 连接到 Express API
- 在你的代码编辑器上,找到 client 目录,打开位于 my_awesome_project/client/app.js 中的 app.js 文件。
- 在这里,我将使用 Fetch API 从 API 检索数据。只需在 Class 声明之后和 render 方法之前粘贴以下代码:
constructor(props) {
super(props);
this.state = { apiResponse: "" };
}
callAPI() {
fetch("http://localhost:9000/testAPI")
.then(res => res.text())
.then(res => this.setState({ apiResponse: res }));
}
componentWillMount() {
this.callAPI();
}
- 在 render 方法内部,你将找到一个 <; p> 标记。让我们对其进行更改,以使其渲染 apiResponse:
<p className="App-intro">;{this.state.apiResponse}</p>
最后,这个文件应该是这样的:
我知道内容有点多!你可以复制粘贴代码,但是你必须了解自己在做什么。让我们看看我在这里做了什么:
- 在第 6 至 9 行中,我们插入了一个构造函数,用于初始化默认状态。
- 在第 11 至 16 行,我们插入了方法 callAPI(),该方法将从 API 中获取数据并将响应存储在 this.state.apiResponse 上。
- 在第 18 至 20 行,我们插入了一个 react 生命周期方法 componentDidMount(),该方法将在组件安装后执行 callAPI() 方法。
- 最后,在第 29 行,我使用<; p>标记在 client 页面上显示了一个段落,其中包含我们从 API 中检索到的文本。
什么?CORS?
我们快完成了! 但是,如果我们同时启动应用程序(client 和 API),并导航至http:// localhost:3000 /,页面仍然不会显示预期结果。如果你打开 chrome 开发工具,就会找到原因。在控制台中,你将看到此错误:
Failed to load http://localhost:9000/testAPI: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:3000' is therefore not allowed access. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.
这很容易解决。我们只需将 CORS 添加到我们的 API 中,即可允许跨域请求。你可以在此处查看有关 CORS 的更多信息。
- 在你的终端中,导航到 API 目录,并安装 CORS 软件包:
npm install --save cors
- 在你的代码编辑器中,访问 API 目录,打开 my_awesome_project/api/app.js 文件。
- 在第 6 行,require CORS:
var cors = require("cors");
- 在第 8 行,“告诉” express 使用 CORS:
app.use(cors());
现在,API app.js 文件应该是这样:
很棒,我们完成了!
现在,使用 npm start 命令在两个不同的终端中启动你的应用程序(client 和 API)。
如果你在浏览器中导航到 http://localhost:3000/,则应该看到类似的内容:
当然,这个项目没有实现很多,但它是全栈应用的开始。你可以在这个仓库中找到我为教程创建的所有代码。
接下来,我将研究一些补充教程,例如如何将其连接到 MongoDB 数据库,甚至如何在 Docker 容器中运行它们。
正如我的一个好朋友说的:
Be Strong and Code On!!!
每天都要变得更好哦;)
原文:How to create a React frontend and a Node/Express backend and connect them,作者:João Henrique