最近開發乙個全新ab測試平台，思考了下正好可以使用react技術開發。
首先遇到乙個概念，redux。這貨還真不好理解，大體的理解：store包含所有資料，檢視觸發乙個action，store收到action後，返回乙個新的 state，這樣檢視就發生變化，state計算過程叫做 reducer，reducer其實就是乙個處理資料的函式，接受 action和 當前state作為引數，返回乙個新的 state。
明白這個後，就可以開始實踐了。
對於我這方面沒搞過的菜鳥，還真是不容易。接下來說下作為新手如何實踐的。
第一步：依賴包
"devdependencies": ,"dependencies":dependencies 中引入的依賴包，是react的標配了，不用解釋。
devdependencies 中引入了 webpack，babel，babel外掛程式，eslint語法檢測，eslint配置包airbnb，html模板資源替換外掛程式 html-webpack-plugin，css提取外掛程式 extract-text-webpack-plugin，less編譯相關外掛程式，等靜態資源路徑處理外掛程式 url-loader。
這裡作為新手，一般都是參考網上的配置，比如我就是github上找了個專案，摸索一下。推薦一本教程書《react全棧》，作者寫的很詳細，對入門絕對有幫助。
至此，基本依賴包已載入完。
第二步：webpack配置 這裡不得不說，新手真不容易。 首先介紹下專案結構：
views/entry.html（靜態模板）,
src/entry.jsx（入口檔案），
src/actions（redux概念中actions所在的資料夾） ,
src/reducers（redux概念中reducers所在的資料夾） ,
src/store（redux概念中store所在的資料夾） ,
src/pages（存放頁面的資料夾,jsx），
src/compinents（存放業務元件的資料夾,jsx），
src/style（公共樣式資料夾,less），
src/utils（幫助類資料夾），
src/constants（常量所在資料夾，儲存各自的actions的type），
src/plugins（第三方外掛程式資料夾），
build/（編譯後檔案），
webpack/（webpack編譯配置所在資料夾）,
.eslintrc（eslint配置檔案），
.gitignore（git配置檔案），
package.json
接下來就是webpack的配置了，先上**
entry: ,
output: ,
devtool: 'eval-source-map', module: ]]}}
]},
),exclude: /node_modules/
},),
include: /node_modules/},,
]},
resolve:
},devserver: ,
plugins: [ new webpack.optimize.commonschunkplugin(), new extracttextplugin('commons.css', ), new htmlwebpackplugin(), // 加署名
]};第一次接觸配置，真的找不到北，太多外掛程式，太多功能。作為新手，那需要怎麼個思路，我總結：按專案需求來配置。不要認為其他人配置的就適合自己專案，要不然給自己帶來各種麻煩。 摸索這個過程還挺長的：
a. 首先需求還是明確的：less編譯、jsx編譯、公共檔案單獨打包、html靜態模板中插入編譯後的檔案路徑、css提取。 上面這些對應配置：
entry: ,
output: ,
devtool: 'eval-source-map', module: }]
},),
exclude: /node_modules/},,
]},
plugins: [ new webpack.optimize.commonschunkplugin(), new extracttextplugin('commons.css', ), new htmlwebpackplugin()
]};b. 配置到這步後，就能滿足基本開發了。試用之後，這時候對自己提出了幾個問題：
命名css，開發的時候能不能不用擔心命名衝突的問題。
css中引入後，編譯失敗問題。
第三方外掛程式 載入效果pace元件，引入問題。
現在檔案過大，有根據路由按需載入需求。
針對上面4個問題，重新配置：
第2個和3個解決方案一致：即宣告別名
resolve:當中第3個問題，網上找了好多資料，都沒有結果，後來請教了前端群的同行，才解決該問題。}
解決第1個問題過程中，我學習到了cssmodule的概念，一開始菜鳥還不好理解，實踐了後，還真是個好東西。
),只要css-loader啟動modules就好了。為了支援 react，引入了 react-css-modules 依賴包。exclude: /node_modules/
},
網易雲免費體驗館，0成本體驗20+款雲產品
react技術棧實踐（1）
最近開發乙個全新ab測試平台，思考了下正好可以使用react技術開發。首先遇到乙個概念，redux。這貨還真不好理解，大體的理解 store包含所有資料，檢視觸發乙個action，store收到action後，返回乙個新的 state，這樣檢視就發生變化，state計算過程叫做 reducer，re...
深入React技術棧 筆記
1.初入react世界 可以說，函式式程式設計才是react的精髓。react的生命週期可以分為兩類，當元件在掛載或解除安裝時，當元件接收新組建時，即元件更新時。react的生命週期 2.漫談react react基於virtual dom實現了乙個syntheticevent 合成事件 react...
深入react技術棧記錄（一）
1.react.component react 的所有元件都繼承自頂層類 react.component。它的定義非常簡潔，只是初始化了 react.component 方法，宣告了 props context refs 等，並在原型上定義了 setstate 和 forceupdate 方法.2....