189 8069 5689
本篇内容介绍了“如何连接React和Node”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！
站在用户的角度思考问题，与客户深入沟通，找到汇川网站设计与汇川网站推广的解决方案，凭借多年的经验，让设计与互联网技术结合，创造个性化、用户体验好的作品，建站类型包括：成都做网站、成都网站设计、企业官网、英文网站、手机端网站、网站推广、主机域名、网站空间、企业邮箱。业务覆盖汇川地区。
创建项目主目录
在终端，导航到你要保存项目的目录。现在为您的项目创建一个新目录并导航到它：
mkdir my_awesome_project cd my_awesome_project
创建一个 React 应用
这个过程非常简单。
我们将使用 Facebook 的 create-react-app 来... 你猜对了，简单的创建一个名为 client 的应用程序：
npx create-react-app client cd client npm start
让我们看看这里做了什么：
1.使用 npm 的 npx 创建一个 React 应用，并将其命名为 client。
2.cd （更改目录）到客户端目录中。
3.启动了应用程序。
在浏览器中，访问：http://localhost:3000/
如果一切正常，您将看到 React 欢迎页面。恭喜！这意味着您现在在本地计算机上运行了一个基本的 React 应用程序。是不是很简单？
要停止您的 React 应用程序，只需在终端按下 Ctrl + c 即可。
创建一个 Express 应用
好的，这将与前一个示例同样简单。不要忘记回到项目的根文件夹。
我们将使用 Express Application Generator 快速生成应用的框架，并将其命名为 api ：
npx express-generator api cd api npm install npm start
让我们看看这里做了什么：
1.使用 npm 的 npx 在全局安装 express-generator 。
2.使用 express-generator 快速创建一个 express 应用，并将其命名为 ： api。
3.进入 API 目录。
4.安装所有依赖项。
5.启动应用。
在浏览器中，访问：http://localhost:3000/
如果一切正常，您将看到 Express 欢迎页面。恭喜！这意味着您现在在本地计算机上运行了一个基本的 Express 应用程序。是不是很简单？
要停止您的 Express 应用程序，只需在终端按下 Ctrl + c 即可。
在 Express 中配置新的路由
好啦，接下来就是动手时间。是时候打开你最喜欢的代码编辑器（我正在使用 VS Code）并导航到你的项目文件夹。
如果您将 React应用 命名为 client，Express应用 命名为 api，你讲找到两个主要文件夹：client 和 api。
1.在 api 目录中，打开 bin/www 并将第15行的端口号由 3000 改为 9000。我们将同时运行两个应用程序，这样做可以避免问题。修改结果如下：
// my_awesome_project/api/bin/www var port = normalizePort(process.env.PORT || '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行插入新路由：
app.use("/testAPI", testAPIRouter);4.并在第9行引入新的路由文件
var testAPIRouter = require("./routes/testAPI");5.恭喜您！您已经创建了新的路由。
如果您启动 api 应用程序（在终端中，导航到 api 目录，输入 npm start），并在浏览器中访问 http://localhost:9000/testAPI ，您将看到以下消息：API is working properly 。
译注：可以使用 npm 模块 forever来守护你的进程，方便你之后在其他机器上部署服务。
将 React Client 连接到 Express API
1.让我们使用代码编辑器打开 client 目录，编辑 app.js 。
2.我将会使用 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(); }3.在 render 方法中，你会找到一个
标签。让我们用它来展示 API 的内容。
