react前端搭配express后端搭建

后端搭建"/>

react前端搭配express后端搭建

react前端搭配express后端简单搭建

前言

确保电脑上已经安装了node环境，可以执行npm命令。

搭建react环境

• 安装 create-react-app
  简介：create-react-app是快速创建react项目的一个工具。
  命令：

• npm install -g create-react-app(安装create-react-app工具)

• create-react-app my-app (创建react项目)

如果安装出现问题的话，很可能是你全局安装的create-react-app版本不匹配，建议先把目前全局安装的create-react-app给卸载掉：npm uninstall -g create-react-app。到nodejs安装目录下，确认全局安装的create-react-app是否没了，如果还有的话给手动删除掉。然后再回到本项目根目录下，运行全局安装命令:npm install -g create-react-app。这时候应该成功了。

• 创建react项目
  先创建一个文件夹：react_client吧，用来存放react项目。然后在这个新创建的文件夹里运行命令: npx create-react-app react_client。现在react项目已经创建好了。不出意外在react_client文件夹里应该有一个react项目了。

搭建express环境

• 安装express-generator
  简介：express-generator是快速创建express项目的一个工具。
  命令
• npm install -g express-generator(安装express-generator工具)
• npx express-generator project_name（使用express-generator创建项目）
  如果有问题可能是express-generator版本问题，解决方法参照上面的。
• 创建express项目
  现在我们另外新建一个文件夹:express_server，待会新建的项目就存放在里面。进到express_server文件夹，运行命令：npx express-generator express_server ,现在express_server里面已经有一些文件了，但是项目的依赖包还没有，我们继续运行命令:npm install。现在express项目已经创建完。运行命令:npm start就可以运行项目了
  （默认是打开3000端口）。

现在我们让react前端跟express后端联系起来

1. 修改express后端的打开的端口
   现在我们既要运行react前端项目，又要打开express后端项目。由于这两个默认都是打开3000端口，所以我们要修改其中一个的端口，使用这两个能同时运行在电脑上。现在我们来修改刚刚创建的express_server项目的端口吧：打开express_server/bin/www文件，将第15行语句：var port = normalizePort(process.env.PORT || '3000');改为var port = normalizePort(process.env.PORT || '3001');，这样我们就将端口改为3001了。
2. 现在我们可以同时运行两个项目了。现在分别在两个项目的根目录处运行:npm start吧，这样前端跟后端都跑起来了。
3. 现在只剩最后一个问题了：cors问题。相信这个问题困扰过很多人，想了解cors问题的自己去搜索吧，这只介绍怎么解决。其实只要引入cors就可以了，先在express后端项目根木库下运行命令:npm install --save cors，这样就安装了cors包。现在我们引入cors吧。只需加两行代码就可以了。打开express_server/app.js，进行如下修改：

• var cors = require("cors");
• app.use(cors());
  这两行加上后，现在就解决了cors跨域问题。

4. 现在来测试一下吧。打开react前端项目，在任意需要发出请求的地方添加这一句代码：fetch(“http://localhost:3001/users”)
   .then(res => {console.log(res)});
   如果express后端也在运行的话，应该会输出请求的返回结果了。