利用react-redux-tpl快速開發react-redux-webpack項目

我的學習使用react已經有一段時間了，雖然沒有在真正的產品項目中大規模使用react，可是在本身的博客、小網站、一些開源項目中已經使用過好幾回了，使用react建立項目我的也有了一些心得而且通過嘗試驗證，總結了這個能夠用於起步的框架模版react-redux-tpl。

將它開源出來，但願能給某些同窗帶來幫助，若是有設計的很差的地方，也但願能及時指出，共同進步。

宏觀解讀

在如今，咱們其實有不少腳手架可使用，例如create-react-app就是業界比較優秀的應用開發工具之一，筆者也使用過，可是個人感受是因爲它已經將全部的工具集成好了，可控性反而不那麼強，有些內容也不必定會了解的很透徹，可是本身從0開始配置呢，又會比較麻煩，每次重新開一個項目又須要作不少前置工做，比較麻煩。

react-redux-tpl這個模版就是爲了解決這個問題，它基於Express，集成了ES六、react、redux(以及redux-dev-tool)、react-router、webpack熱更新，而且按照必定的規則和最佳實踐進行文件組織和代碼組織，可使開發人員幾乎無需寫一行配置代碼就能夠直接開發業務。

如今它的使用方式是這樣的：

npm install react-redux-tpl -g
react-redux-tpl FileName
cd FileName
npm install
npm run start

以後再chrome中打開localhost:7777便可看到效果(注：若是網速較慢，特別是在使用教育網的狀況下，執行第二個命令以後可能要稍微等幾分鐘)。

或者你也能夠直接git clone https://github.com/aircloud/react-redux-tpl將整個模版項目下載下來，到這個文件夾裏：

npm install
npm run start

一樣能夠達到效果

文件組織

我認爲，一個一百個文件以上的項目，最重要的事情就是文件組織，文件組織對開發效率、維護效率、多人協做甚至代碼重用，都有很重要的意義，而如今隨着組件化開發的流行和更精確的粒度控制，咱們的文件很容易變得很是多。

我在文件組織方式是這樣的，這裏面主要列出重點目錄並着重突出一下前端文件:

-bin
-common //react核心文件目錄
 |- actions
 |- components
     |- Common
     |- HomePage
     |- SubPage
     ......
 |- containers
 |- enter
 |- reducers
 |- routes
 |- store
 |- Utils
-controller
-public //靜態資源目錄
 |- images
 |- javascripts
 index.html
-routes
-views
app.js
webpack.config.js
......

這裏面首先說一下目錄命名規則，目錄出了最末端只有jsx的文件目錄採用大駝峯命名規則，而且和裏面的首要jsx文件同名以外，一概採用小寫，而且儘可能控制不出現複合單詞。

react核心文件目錄之因此命名common，是由於考慮到若是使用服務端渲染，這便至關於一個公共資源目錄，服務端渲染咱們能夠考慮在routes目錄下的路由層進行配置(該模版框架沒有采用服務端渲染，須要自行配置，但比較簡單)。

common下的actions、reducers、store都是和redux有關的文件目錄，enter爲入口目錄，enter目錄下的文件一般爲webpack配置時候的入口文件。

containers和components爲組件，containers下的文件通常爲直接配合路由使用的包裝組件，components爲具體業務組件，這個地方有的規範將組件分爲三層，我我的認爲這個必要性不大。

另外，除了一些公共樣式須要放在公共文件，我建議每個組件搭配一個同名樣式文件:

-HomePage.js
-HomePage.less

這樣控制起來會比較方便，另外咱們能夠嘗試採用css-modules，我的認爲雖然解決了class衝突問題，可是卻不利於代碼調試，並且也有必定遷移成本，故不用。

Webpack配置

關於webpack配置優化的問題，網上的教程和博客都很是的多，我在react-redux-tpl進行了一部分優化配置，而且利用了express的插件進行了熱更新的配置。考慮到模版框架的通用和簡潔性，而且考慮到編譯速度優化的選擇多樣性，我在這裏簡化了配置。

若是對編譯時間要求比較高的話，僅僅作這些是無論用的，咱們應當進行更多的性能優化。關於webpack性能調優，我在這裏總結了一些內容，能夠進行嘗試。

另外這裏面值得一提的是使用的webpack-hash-sync這個插件，關於引用的js文件名同步的問題，雖然已經有html-webpack-plugin這個插件，可是我認爲它是不符合個人編程習慣的，它是經過咱們的配置，直接生成html文件，而實際上咱們的html文件都是一般先寫好，而且作不少個性化配置內容，方便又簡潔，直接使用html-webpack-plugin不少時候是沒法作到的。

而使用webpack-hash-sync咱們能夠給定正則表達式，每次webpack的時候都會一個一個的去匹配正則表達式而且把hash值或者chunkhash進行改變：

new WebpackHashSync({
            file:["output.*?js","common.*?js"],
            path:path.join(__dirname, 'public/'),
            html:["index.html"],
            hash:true,
            chunkhash:false
}),

使用redux

項目中引入了redux-devtools這個調試功能插件(可關閉，最簡單的辦法就是不在common/enter/index.js中引入了)，而且默認引入redux-thunk和react-router-redux這兩個中間件，前者是能夠直接在action中發異步請求，後者是能夠加強一些react-router的功能。

我建議你們能夠看看他們的GitHub主頁，講的都挺不錯的，特別是前者，十來行代碼的一個插件，近5000個star，不得不說，是牛逼。

在common/actions/index.action.js裏，我寫了一些示例的同步的和異步的action，你們能夠參考這個寫法，直接上手。

另外，我關於一個redux的使用原則是：

• 只有被共享數據纔會被用在redux中，組件的非共享數據(好比一些展現列表)，不要放在redux中，而是隨着組件生命週期被請求、構造、消失...

react組件

寫react的項目，最重要最耗時的，仍是react組件開發，我關於組件粒度劃分的幾個原則以下(固然這在這個模版框架中可能沒有體現出來)：

• 若是列表中的元素存在動態交互，便儘量地將元素作成一個獨立的組件。

• 爲了提升效率和保持整站用戶體驗的統一，咱們儘量複用低級組件，好比定製的按鈕、列表、標籤等，而且都統一放在Common文件夾下。

在react組件開發中，我通常是給每個模塊(或者一個頁面)一個文件夾，好比HomePage，這個文件夾下只有HomePage.js是須要被別的目錄下文件引入的，而HomePage須要的一些公共組件在Common目錄下，私有組件在HomePage本文件目錄下。

另外，咱們能夠在HomePage.js中利用ES7中的裝飾者模式配置react-redux：

@connect(state => {
    return {
        Info:state.rootReducer.getInfo.info
    };
}, {
    getAllClass,updateInfo
})
class HomePage extends Component{
 //...
}

其餘的子組件的數據經過props傳入(固然，若是是子組件的私有數據，仍是在子組件內自行處理)

總結

以上是我梳理的關於構建這個模版框架的一些思考，因爲某些內容還未深思熟慮，所以目前沒有寫入，我也會在接下來的一段時間內，繼續打磨這個內容，爭取整理出一套還不錯的實踐。

若是有些許認同，歡迎給star鼓勵。

若是有bug或者設計很差的地方，請在這裏提出，我會在24小時以內回覆而且嘗試解決問題。

[注1]本文中提到的一些對比的例子，都是我的角度的一些片面看法和我的習慣問題，實際上我我的仍是認爲這些項目十分優秀的，成熟度也比較高，向前輩致敬。