實戰react技術棧+express先後端博客項目（1）-- 總體項目結構搭建

時間 2019-11-24

標籤實戰 react 技術 express 後端博客項目總體結構搭建欄目 React 简体版

原文原文鏈接

本想等項目作完再連載一波系列博客，隨着開發的進行，也是的確遇到了很多坑，請教了很多人。遂想，何不一邊記錄踩坑，一邊分享收穫呢。分享固然是好的，若是能作到集思廣益，那豈不是更美。咱們的口號是：堅定不會爛尾前端

本博客爲連載代碼博客同步更新博客，隨着項目日後開發可能會遇到前面寫的不合適的地方會再回頭修改。若有不妥~歡迎兄弟們不嗇賜教。謝謝！react

項目目錄

項目目錄大體以下：webpack

.
├── 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。git

好比：github

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項目結構的說明.web