這是一個(gè)整合react express 實(shí)現(xiàn)前后臺(tái)交互，并且采用webpack進(jìn)行打包和解析文件。其實(shí)react官方有一個(gè)腳手架create react app，也可以看那個(gè)，但是這個(gè)腳手架webpack.config.js這個(gè)在文件夾中并沒有，應(yīng)該是整合到安裝包里面去了。總的來說還是自己弄一個(gè)腳手架比較好，想添加什么功能都可以。

一、需要提前安裝的：

node npm?

二、需要下載的包：

npm install --save-dev react react-router react-dom

npm install --save-dev express

npm install --save-dev webpack

新建一個(gè)webpack.config.js文件，這個(gè)文件是針對(duì)打包用的

三、項(xiàng)目結(jié)構(gòu)

四、簡(jiǎn)要說一下思路

安裝好基本的包之后。新建上面說的那些文件和文件夾，我們就需要更改package.json中命令，設(shè)置一個(gè)npm start對(duì)應(yīng)的是執(zhí)行dev-server.js文件，這個(gè)文件里面，引入webpack.config.js和寫監(jiān)聽端口的代碼，這時(shí)候我們就需要編寫webpack.config.js了，我們?cè)O(shè)置一個(gè)app.jsx作為入口文件，在webpack.config.js中，引入解析js jsx css文件的包（先弄基本的文件）。最后再src中寫一個(gè)jsx文件，將這個(gè)文件中的組件用es6 modules輸出到app.jsx文件中。

其實(shí)上面已經(jīng)實(shí)現(xiàn)了，但是我們需要實(shí)現(xiàn)熱更新，這里面我們需要用到引入webpack-dev-middleware和webpack-hot-middleware進(jìn)行熱更新，具體可以看下面

這就是基本的實(shí)現(xiàn)的思路，其實(shí)有個(gè)大概的思路了，一步一步的走，然后遇到不會(huì)的了，谷歌百度就查吧（強(qiáng)烈建議用谷歌，百度我都要放棄了，什么都查不出來，找個(gè)vpnFQ去）

五、具體介紹（一到具體就不知道該寫啥。。。按照上面思路來吧）

1.package.json 這個(gè)文件放的主要需要咱們看的是一開始執(zhí)行的命令：

"scripts": {"build": "webpack",//這是走的是webpack.config.js文件，這是開始上線了 我們需要將文件全部構(gòu)建打包"start": "node ./dev-server.js",//這個(gè)是我們開發(fā)的時(shí)候需要執(zhí)行的文件 執(zhí)行的命令是npm start"test": "echo \"Error: no test specified\" && exit 1"},

2，因?yàn)槲覀冮_發(fā)的時(shí)候執(zhí)行的是npm start，所以我們開始看dev-server.js文件，這個(gè)幾個(gè)工作是：（1）監(jiān)聽端口 （2）引入webpack.config.js （3）引入后臺(tái)的api

var express=require('express');
var app=express();
var api=require('./server/api.js');
var bodyParser=require('body-parser');
//獲取到客戶端傳的參數(shù)
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended:false}));
//獲取到后臺(tái)的api
app.use(api);
app.use('/',require('connect-history-api-fallback')());
app.use('/',express.static('public'))
//如果是開發(fā)模式的話
if(process.env.NODE_ENV!=='production'){//引入webpack模式var webpack=require('webpack');var webpackConfig=require('./webpack.config.js');var webpackCompiled=webpack(webpackConfig);var webpackDevMiddleware=require('webpack-dev-middleware');//webpack-dev-middleware結(jié)合webpack-hot-middleware實(shí)現(xiàn)熱重載開發(fā)服務(wù)器，但是這個(gè)是直接將代碼放在內(nèi)存中的
    app.use(webpackDevMiddleware(webpackCompiled,{publicPath:'/',stats:{color:true},lazy:false,watchOptions:{aggregateTimeout:300,poll:true},}));//配置熱更新var webpackHotMiddleware=require('webpack-hot-middleware');app.use(webpackHotMiddleware(webpackCompiled));
}
//監(jiān)聽端口
var server=app.listen(2000,function(){var port=server.address().port;console.log(port)console.log('http://localhost:%s',port);
})

3.然后我們看到引入了webpack.config.js文件，開始看webpack.config.js文件。這個(gè)文件主要是引入入口文件，和進(jìn)行打包，在loader里面針對(duì)不同文件進(jìn)行文件解析，還有就是需要加一個(gè)引入webpack-dev-middleware和webpack-hot-middleware進(jìn)行熱更新(熱更新)

4.在webpack.con里面我們需要有一個(gè)入口文件，因?yàn)閷⒔M件渲染到頁面中，需要將組件和根元素獲取到，這個(gè)里面就是將路由和根元素放在ReactDOM.render()里面，根元素就不用說了，就是你的html模板文件里面自己設(shè)置的，然后就是我們需要看看路由文件

5.路由文件我使用的是React-router4.2.0這個(gè)和之前的有區(qū)別，路由知道之后我們就需要根據(jù)路由創(chuàng)建對(duì)應(yīng)的組件

=======到此是前臺(tái)代碼，下面我們說一下后臺(tái)代碼

6.server文件夾里面放的就是后臺(tái)代碼，后臺(tái)用的是express 數(shù)據(jù)庫用的是mongodb,我們先看db.js

下載一個(gè)mongoose這個(gè)模塊，鏈接上mongodb,然后，創(chuàng)建模型和對(duì)象，輸出到api.js

7.現(xiàn)在看一下api.js文件，這個(gè)文件是設(shè)置后臺(tái)接口的文件，我們從db.js里面獲取到數(shù)據(jù)庫中集合的對(duì)象，然后通過express的路由中間件，設(shè)置對(duì)象功能的接口。

8.我們將api.js文件引入到dev-server.js文件中，app.use(api)

======到此是后臺(tái)代碼

======自己寫一個(gè)項(xiàng)目，源代碼在：https://github.com/GainLoss/react-webpack-express

項(xiàng)目中遇到的情況：

1.父組件發(fā)生事件，重新渲染子組件：

　　父組件點(diǎn)擊事件，將state中的key值改變，進(jìn)行賦值；并且在子組件中的componentWillReceiveProps(nextProps)中進(jìn)行需要的操作。這樣就開始重新渲染子組件了

?

?

轉(zhuǎn)載于:https://www.cnblogs.com/GainLoss/p/7753154.html

總結(jié)

以上是生活随笔為你收集整理的react-webpack-express的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。