Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。 Express 是基于Node.js 平台,快速、开放、极简的 web 开发框架。
Nodejs+Express可以让前端人员自定义API接口并实现调用。 这样写项目就方便多了，数据想怎么写就怎么写。
1.新建项目文件夹
mkdir nodejs-express-react
2.初始化package.json
cd nodejs-express-react && npm init
3.安装需要的依赖
全局安装babel webpack webpack-dev-server
npm install babel webpack webpack-dev-server -g
项目安装webpack webpack-dev-server html-webpack-plugin（在build里生成自动引用bundle.js的html文件）
npm install webpack webpack-dev-server html-webpack-plugin –save
项目安装express框架
npm install express –save
项目安装react和react-dom
npm install react react-dom –save
项目安装Babel转换器，解析jsx
npm install babel babel-loader babel-core babel-preset-react babel-preset-latest –save
项目安装jquery
npm install jquery –save
4.创建项目文件
webpack.config.js var webpack = require('webpack'); var path = require('path'); var HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry:'./entry.js', output:{ path:path.join(__dirname, '/build'), filename:"bundle.js" }, devServer:{ inline:true, port:3000 }, module:{ loaders:[ { test:/\.js?$/, loader:'babel-loader', query: { presets: ['react', 'latest'] } } ] }, plugins:[ new HtmlWebpackPlugin({ template:'./index.html' }), new webpack.HotModuleReplacementPlugin()//热加载 ], resolve: { modules: [path.resolve(__dirname,'node_modules')] } } .babelrc（jsx=>js配置） { "presets": [ "latest", "react" ] } index.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>demo</title> </head> <body> <div id="app"></div> </body> </html> entry.js （react入口文件） import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; ReactDOM.render(<App />, document.getElementById('app')); server.js （express服务器文件） var express = require('express'); var app = express(); var _data = { "id":"1", "name":"zysoft", "sex":"男", "age":"23" } app.get('/introduce',function(req,res){ res.send(_data); }) app.listen(8888,function(){ console.log('listening on *:8888'); }); app.js（react组件文件） import React,{Component} from 'react'; import $ from 'jquery'; export default class App extends Component { componentDidMount(){ $.get('http://localhost:8888/introduce',function(data){ console.log(data); }) } render(){ return( <p style={{ margin:'20px', fontFamily:'幼圆' }}>按F12查看获取到的数据</p> ) } }1.运行配置：在package.json中找到scripts标签，若没有则添加
"scripts": { "dev": "webpack-dev-server --devtool eval --progress --colors --hot --content-base build", "build": "webpack", "server": "node server.js", "start": "start http://localhost:3000" },2.运行过程：（dev和server需要保留所以要开不止一个终端）
npm run build
相当于执行webpack命令，会自行查找webpack.config.js，根据配置生成build文件夹，并在该目录下生成bundle.js和自行引用bundle.js的index.html文件
npm run server
相当于执行node server.js 打开设定好的8888端口/开启服务。
npm run dev
相当于执行webpack-dev-server –devtool eval –progress –colors –hot –content-base build，这句话可以使页面有热更新的功能，即更改完代码，不用重新打包并执行webpack-dev-server，在页面自行刷新查看更改后的结果。
npm start
相当于执行start http://localhost:3000，自行打开浏览器并访问localhost:3000，查看结果。
打开F12查看控制台信息。
注意这里的报错：
很明显的跨域问题！
有人说使用$.ajax() 把dataType属性设置为”jsonp”就可以解决，但是这样实行后会报错“Unexpected token :”，这是因为你写入的明明是json格式，用jsonp来解析当然会有格式的问题。这里不推荐使用此方案。
主要的解决方案还是要在header上下功夫
理解header原理： http://www.w3.org/Protocols/rfc2616/rfc2616-sec14.html http://kb.cnblogs.com/page/92320/
Access-Control-Allow-Origin 允许的域 Access-Control-Allow-Headers 允许的header类型
打开我们的server.js，加入以下代码设置跨域访问：
//设置跨域访问 app.all('*', function(req, res, next) { res.header("Access-Control-Allow-Origin", "*"); res.header("Access-Control-Allow-Headers", "X-Requested-With"); res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS"); res.header("X-Powered-By",' 3.2.1') res.header("Content-Type", "application/json;charset=utf-8"); next(); });重新生成
刷新页面
获取到自定义的api数据就可以任意的在前端页面上展示了~
github源码地址：https://github.com/zhaoyu69/nodejs-express-react
有问题欢迎指出，如果有用 欢迎star★。
