一直在做后端，最近由于前端資源緊張不得不學(xué)習(xí)一下前端知識(shí)崇棠，前端目前比較火的就是React咽袜，所以自己也嘗試了一下，先從環(huán)境搭建開始吧枕稀。
1.首先到http://nodejs.cn/download/ 下載安裝询刹，然后試試node -v ?和 npm -v 命令是否正常
? ? 這樣我們就安裝好了nodejs和npm。
? ? nodejs是JS允許的容器萎坷，可以理解為后端的tomcat和java的關(guān)系凹联，npm是一個(gè)前端的包管理工具，這個(gè)類似于maven哆档，maven依賴pom.xml蔽挠，npm是依賴package.json文件。
2.初始化React開發(fā)環(huán)境：
首先在本地機(jī)器創(chuàng)建目錄【testdir】，進(jìn)入該目錄（cd testdir）澳淑，執(zhí)行【npm init】然后一路默認(rèn)下去比原，這樣會(huì)自動(dòng)生成好package.json文件。
3.引入material-ui庫(kù)（google的前端庫(kù)）
npm install --save-dev material-ui（這樣會(huì)自動(dòng)添加到package.json文件的devDependencies）杠巡，別人用的時(shí)候只需要npm install就可以了量窘。
npm install --save-dev jquery
npm install --save-dev react
npm install --save-dev react-tap-event-plugin
npm install -g webpack
npm install --save-dev webpack
npm install --save-dev babel
npm install --save-dev css-loader
npm install --save-dev style-loader
npm install --save-dev react-flexbox-grid
這樣在node_modules目錄下就生成了依賴的庫(kù)
4.由于采用的是webpack打包，所以我們需要在根目錄新建webpack.config.js氢拥，內(nèi)容參照后面的樣例工程
5.我的源碼文件都放在src目錄下蚌铜，頁(yè)面文件在src/page目錄，自定義組件在src/compenents目錄嫩海，最后編譯后的文件在build目錄冬殃，只有page中的js文件才需要到webpack.config.js中添加對(duì)應(yīng)的編譯配置，components是不需要添加的叁怪，直接在page中引用即可审葬。
6.寫好代碼以后執(zhí)行webpack打包到build，開發(fā)階段可以通過(guò)webpack -w來(lái)監(jiān)聽文件變化自動(dòng)build
7.同時(shí)開啟另外一個(gè)窗口執(zhí)行webpack-dev-server來(lái)啟動(dòng)服務(wù)
樣例代碼：https://github.com/zrlwoaini/materialUi
gulp其實(shí)是沒有使用的
