實戰react技術棧+express前後端部落格專案（1）– 整體專案結構搭建

Neal_yang發表於2019-02-27

本想等專案做完再連載一波系列部落格，隨著開發的進行，也是的確遇到了不少坑，請教了不少人。遂想，何不一邊記錄踩坑，一邊分享收穫呢。分享當然是好的，
如果能做到集思廣益，那豈不是更美。我們的口號是：堅決不會爛尾

本部落格為連載程式碼部落格同步更新部落格，隨著專案往後開發可能會遇到前面寫的不合適的地方會再回頭修改。如有不妥~歡迎兄弟們不嗇賜教。謝謝！

專案目錄

專案目錄大致如下：

.
├── README.md                   //專案說明檔案
├── app                         //前端原始碼資料夾
│   ├── components              //前端元件資料夾
│   ├── configureStore.js       //配置store檔案
│   ├── containers              //前端容器元件資料夾
│   ├── fetch                   //封裝get/post請求資料夾
│   ├── index.js                //APP輸出檔案
│   ├── lib                     //存放第三方引入檔案資料夾
│   ├── reducers                //reducer資料夾，包含actions、actionTypes
│   └── sagas                   //saga資料夾,非同步action處理
├── config                      
│   └── config.js               //總應用配置檔案
├── db                          //存放資料庫的資料夾
├── modules                     //存放mongoose model資料夾
│   └── user.js                 //存放user model檔案
├── package.json
├── postcss.config.js           //postcss配置檔案
├── record                      //存放一些記錄檔案的資料夾
├── schemas                     //mongoose schema資料夾
│   └── users.js
├── server                      // server端原始碼資料夾
│   ├── api                     //server端 api介面資料夾
│   ├── index.js                //server啟動檔案
│   ├── server.js               //server檔案
│   └── util.js                 //server端工具類檔案
├── static                      //靜態資源託管資料夾
│   └── favicon.ico
├── webpack.dev.js              //開發環境下webpack配置檔案
└── webpack.prod.js             //生產環境下webpack配置檔案複製程式碼

簡單說下app裡面react的專案結構。對於component，container這裡不必多說了。saga用於對所有非同步action的處理。
reducers裡面存放了container對應所有的reducer、action、actionTypes。

比如：

const initialState = {};

export const actionTypes = {
    HOME_LOAD:`HOME_LOAD`,
};


export function reducer(state=initialState,action) {
    switch (action.type){
        default:
            return state;
    }
}

export const action = {
  getArticleList:function () {
      return actionTypes.HOME_LOAD
  }
};複製程式碼

對於這種寫法，可以參照我上一篇大眾點評demo關於react專案結構的說明.