在这篇文章里,我将引导你创建简单的 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,则会找到两个主文件夹:clientapi

1、在 API 目录中,转到 bin/www,然后将第 15 行的端口号从 3000 更改为 9000。稍后我们将同时运行两个应用程序,因此这样做可以避免出现问题。结果应该是这样的:

m7e3LsFolz6988HgYjgdDuP3DPY1Ix3F8u5u
my_awesome_project/api/bin/www

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 行。它应该是这样的:

hG-IcH7kyM8nj1VO43Mgo1nZGI0hsVhvAfFi
my_awesome_project/api/app.js

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>

最后,这个文件应该是这样的:

dswag4EEuA3vcVmZ9cs7rxJwOayb-SW6HiI8

我知道内容有点多!你可以复制粘贴代码,但是你必须了解自己在做什么。让我们看看我在这里做了什么:

  • 在第 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 文件应该是这样:

NOuexIhM99Tn-eKYJ0wJjRJUCbIwww8Lyr61
my_awesome_project/api/app.js

很棒,我们完成了!

现在,使用 npm start 命令在两个不同的终端中启动你的应用程序(client 和 API)。

如果你在浏览器中导航到 http://localhost:3000/,则应该看到类似的内容:

Fwq4HE7hMM2Z5Um3U9xuwCVzlZSAeSvr9U1c

当然,这个项目没有实现很多,但它是全栈应用的开始。你可以在这个仓库中找到我为教程创建的所有代码。

接下来,我将研究一些补充教程,例如如何将其连接到 MongoDB 数据库,甚至如何在 Docker 容器中运行它们。

正如我的一个好朋友说的:

Be Strong and Code On!!!

每天都要变得更好哦;)

原文:How to create a React frontend and a Node/Express backend and connect them,作者:João Henrique