在之前学习的React开发中，一直使用create-react-app脚手架创建和开发Web项目，通过搭配ReactRouter路由实现静态页面的交互，然后通过yarn start或npm start来启动项目，这个启动过程是由客户端处事器执行的。使用express脚手架生成的应用可以作为后台处事器，默认监听3000端口，该后台处事器可以监听React项目，与React应用进行数据交互。

二、安置

必需先安置过node，express安置法式如下：

//1、安置Express脚手架 sudo npm install -g express-generator /* * 安置功效如下： /usr/local/bin/express -> /usr/local/lib/node_modules/express-generator/bin/express-cli.js + [email protected] added 10 packages from 13 contributors in 1.036s */ //2、检察Express脚手架是否安置告成 express --version //功效：4.16.1
//3、进入本身指定的目录下 cd /Users/xiayuanquan/Desktop/开发案例/React-Express //4、在该目录下使用Express脚手架创建项目 express expressApp /* * 项目创建功效如下： create : expressApp/ create : expressApp/public/ create : expressApp/public/javascripts/ create : expressApp/public/images/ create : expressApp/public/stylesheets/ create : expressApp/public/stylesheets/style.css create : expressApp/routes/ create : expressApp/routes/index.js create : expressApp/routes/users.js create : expressApp/views/ create : expressApp/views/error.jade create : expressApp/views/index.jade create : expressApp/views/layout.jade create : expressApp/app.js create : expressApp/package.json create : expressApp/bin/ create : expressApp/bin/www change directory: $ cd expressApp install dependencies: $ npm install run the app: $ DEBUG=expressapp:* npm start */ //5、进入到创建的项目 cd expressApp //6、安置express脚本库 npm install express --save /* * 安置功效如下： npm notice created a lockfile as package-lock.json. You should commit this file. + [email protected] added 53 packages from 36 contributors in 3.33s */ //7、启动处事 npm start /* * 处事器启动功效如下： > [email protected] start /Users/xiayuanquan/Desktop/开发案例/React-Express/expressApp > node ./bin/www GET / 200 389.361 ms - 170 GET /stylesheets/style.css 200 6.045 ms - 111 */

三、布局

WebStorm检察整体布局

package.json和www文件中处事启动的配置分袂如下：

//package.json "scripts": { "start": "node ./bin/www" }, //www，默认是3000端口 var port = normalizePort(process.env.PORT || ‘3000‘); app.set(‘port‘, port);

四、功效

在处事启动后，在浏览器地点栏输入: :3000/，运行功效如下：

五、React

在当前项目下，使用create-react-app脚手架创建React的web项目。

//创建react项目 create-react-app react_client

WebStorm检察整体布局

具体的其他配置和运行请参考这篇文章，本人已亲测：https://www.jianshu.com/p/b7324042db7d 。

Node: 使用Express脚本库搭建本地的Web处事器