如何连接express和react

介绍一下如何将express和react连接起来

这里是基于已经安装node.js的，首先先创建一个主文件目录

> mikdir my-project
> cd my-project

然后可以通过脚手架create-react-app快速的创建出一个简单的react项目

> create-react-app client
> cd client
> npm start

成功的话可以在localhost:3000出现欢迎界面

关闭client，回到我们的主目录，再通过express-generator快速的构建出一个express应用

> npx express-generator // 安装express-generator
> express api
> cd api
> npm start

成功的话可以在localhost:3000出现欢迎界面，这时候我们就成功的创建出了express应用，现在将两个项目连接起来

在 Express 中配置新的路由

首先可以将express的bin/www文件的端口改为9000，避免我们运行react项目时，端口号产生冲突

var port = normalizePort(process.env.PORT || '9000'); // 改为9000

在routes文件夹下创建testApi.js的文件，创建新的路由，回调函数来处理对站点目录（'/'或'/about'）的 HTTP GET 请求

var express = require('express');
var router = express.Router();

router.get("/", function(req, res, next) {
    res.send("API is working properly");
});

//可以通过/testApi/about访问
router.get("/about", function(req, res, next) {
    res.send("about API is working properly");
});
  
module.exports = router;

再在app.js中，将新创建的路由引入

var testAPIRouter = require("./routes/testAPI");
...
app.use("/testAPI", testAPIRouter);

最后，为了避免跨域，我们需要在api中安装CORS依赖，来允许我们跨域，在app.js中引入cors

> npm install --save cors

//app.js
var cors = require("cors");
...
app.use(cors());

再启动项目，在浏览器中访问localhost:9000/testAPI，可以看到"API is working properly"

将client 连接到api

在client中创建文件，可以在componentDidMount中去请求，请求可以用fetch，如下

fetch("http://localhost:9000/testAPI")
        .then(res => res.text())
        .then(res => this.setState({ apiResponse: res }));

再npm start两个项目，就可以成功的连接client和api了。