目錄結構
.
├── build # Webpack 打包檔案到這裡
│ └── public # Express server 靜態檔案的路徑
│ └── favicon.ico # 和 src/utils/html.js 裡的 favicon.ico 一樣的位置
├── locales # 多國語系
│ ├── en-US # 英文語系
│ │ └── common.json # 英文語系 common 命名空間
│ └── zh-CN # 簡中語系
│ └── common.json # 簡中語系 common 命名空間
├── src # App source code
│ ├── actions # Redux 的 action
│ ├── components # 展示元件
│ │ ├── home # 舉例來說,views/ 中有一個名為 home 的 view,則在 components/ 中就有一個名為 home 的資料夾
│ │ │ └── todo # 這是 home 下的元件
│ │ │ ├── index.js # 元件主檔案
│ │ │ ├── redux.js # 和這元件相關的 reducer、action creater 和 action type,都整合在一個檔案
│ │ │ └── todo-test.js # 元件的測試 ( 都以 -test.js 結尾 )
│ │ └── shared # 不歸屬於任何 view 的元件,如一些公共元件等
│ ├── constants # 常數
│ ├── i18n # 多國語系相關設定
│ │ ├── index.js # i18n 的實體
│ │ └── initOption.js # 初始化語系用的設定
│ ├── layouts # 大佈局上的元件
│ │ ├── language # 切換語系的元件
│ │ └── DevTools.js # Redux 的工具 ( 開發時,出現在畫面上的工具 )
│ ├── pugs # Express server 用的模版
│ ├── reducers # Redux 的 reducer
│ ├── redux # Redux related configuration scripts
│ │ ├── middlewares # Redux 中間件
│ │ ├── configure-store.js # 生產 Redux store 的 function
│ │ └── reducers.js # 整個 App 的 reducer 整理
│ ├── routes # App 的路由
│ │ ├── private-route # 登入後才可訪問的路由元件
│ │ └── index.js # 路由主檔案
│ ├── server # Express server
│ │ ├── init.js # 初始化 server
│ │ ├── server.dev.js # 開發的 server
│ │ └── server.prod.js # 產品的 server
│ ├── styles # App 共用 SCSS,使用 Bootstrap 3
│ │ ├── bootstrap # SCSS 變數
│ │ │ ├── customizations.scss # 自定義變數
│ │ │ └── pre-customizations.scss # 定義 Bootstrap 變數
│ │ ├── fonts # 字型
│ │ ├── app.scss # 主入口 SCSS 檔案
│ │ ├── base.scss # SMACSS base,只會對標籤元素本身做設定
│ │ ├── layout.scss # SMACSS layout,指整個網站的「大架構」的外觀
│ │ ├── module.scss # SMACSS module,會被重複使用的元件模組
│ │ ├── partial.scss # 比 Layout 的範圍小,它是特定單一領域下特別的設定
│ │ ├── sass-resources.scss # 公開一些功能,給其它 SCSS 檔案
│ │ ├── state.scss # SMACSS state,負責定義元素不同的狀態下,所呈現的樣式
│ │ └── theme.scss # SMACSS theme,畫面上所有「主視覺」的定義
│ ├── test # 測試
│ │ └── .setup.js # 測試環境設定
│ ├── utils # 工具
│ │ ├── getCDNUrl.js # 用來組合出 cdn 的位置
│ │ ├── html.js # 產品中,server side rendering 用的 React 模版
│ │ └── validations.js # 給 form 驗證的 function
│ ├── views # App 中某個頁面的入口檔案,一般為路由元件
│ │ └── home # 舉例來說,首頁的入口就是 home
│ │ ├── index.js # home 主元件
│ │ ├── redux.js # 與這個入口元件的相關的 redux 整理
│ │ └── styles.scss # 與這個入口元件的 SCSS
│ ├── webpack
│ │ ├── config.js # 共用設定檔,比如放置 verdors 的地方
│ │ ├── webpack.common.prod.js # 產品通用設定
│ │ ├── webpack.dev.config.js # 給開發 server 用的
│ │ ├── webpack.prod.config.js # build client app
│ │ └── webpack.server.config.js # build server
│ └── app # React client app 入口
├── index.js # App 入口點
└── config.js # App configuration ( 設定檔 )