Universal React Starter Kit
服務端渲染的React手腳架
這個啟動包的設計是為了讓你使用一整套最新最酷的前端技術，所有都是可配置，富特性，基於webpack已經提供程式碼熱載入，使用sass預處理css，單元測試，程式碼覆蓋率報告，程式碼分割等等更多。
這個專案最主要的目的是儘可能果斷的保留。目的不是要你一定按照這個結構去完成你的專案，諧在使前端開發更健壯，更簡單還有最重要的是更快樂。你可以獲得以下的所有特性！
最後，如果沒有大家的貢獻，這個專案是不可能如此健壯的，所以，謝謝大家。
覺得不錯的話，請Star一下本專案，這是對作者最大的支援。
所有相關庫已準備好，隨時等待呼叫。
特性
需求配置
-
node
^4.5.0 -
npm
^3.0.0
開始
確認好你的環境配置，然後就可以開始以下步驟。
$ git clone https://github.com/bodyno/react-starter-kit.git
$ cd react-starter-kit
$ npm install # Install project dependencies
$ npm start # Compile and launch如果一切順利，你會看到如下:
<img src=”http://i.imgur.com/zR7VRG6.pn… />
開發過程中，你用得最多的會是npm start，但是這裡還有很多其它的處理：
npm run <script> |
解釋 |
|---|---|
start |
服務啟動在3000埠，程式碼熱替換開啟。 |
compile |
編譯程式到dist目錄下（預設目錄~/dist）。 |
dev |
與npm start相同, 但是啟動nodemon守護程式。 |
dev:no-debug |
與npm run dev 但是禁用devtool（開發工具）。 |
test |
開啟Karma測試並生成覆蓋率報告。 |
test:dev |
開啟Karma測試並監聽改變隨時重新測試，但是生成覆蓋率報告。 |
deploy |
啟動程式碼檢查，測試，如果成功，編譯到dist目錄下。 |
deploy:dev |
與deploy相同，但是NODE_ENV值為”development”。 |
deploy:prod |
與deploy相同，但是NODE_ENV值為”production”。 |
lint |
檢查所有.js檔案是否規範。 |
lint:fix |
檢查所有.js檔案是否規範並修復它們。 更多 |
程式目錄
這個專案的結構使用的是 fractal(不規則碎片形：適合大型專案)*，方法的分組主要是依照特性而不是檔案型別。注意，這個目錄結構只是一個指引，並不一定要按這個來。這種結構諧在讓程式更容易擴充套件，想了解更多請點選這裡。
.
├── bin # 啟動指令碼
├── blueprints # redux-cli的藍圖
├── build # 所有打包配置項
│ └── webpack # webpack的指定環境配置檔案
├── config # 專案配置檔案
├── server # Koa 程式 (使用 webpack 中介軟體)
│ └── main.js # 服務端程式入口檔案
├── src # 程式原始檔
│ ├── main.js # 程式啟動和渲染
│ ├── components # 全域性可複用的表現元件(Presentational Components)
│ ├── containers # 全域性可複用的容器元件
│ ├── layouts # 主頁結構
│ ├── static # 靜態檔案(不要到處imported原始檔)
│ ├── styles # 程式樣式
│ ├── store # Redux指定塊
│ │ ├── createStore.js # 建立和使用redux store
│ │ └── reducers.js # Reducer註冊和注入
│ └── routes # 主路由和非同步分割點
│ ├── index.js # 用store啟動主程式路由
│ ├── Root.js # 為上下文providers包住元件
│ └── Home # 不規則路由
│ ├── index.js # 路由定義和程式碼非同步分割
│ ├── assets # 元件引入的靜態資源
│ ├── components # 直觀React元件
│ ├── container # 連線actions和store
│ ├── modules # reducers/constants/actions的集合
│ └── routes ** # 不規則子路由(** 可選擇的)
└── tests # 單元測試樣式
所有的css和sass都支援會被預處理。只要被引入，都會經過PostCSS壓縮，加字首。在生產環境下會提取到一個css檔案下。
服務端
這個專案的服務端使用Koa。需要注意的是，只有一個目的那就是提供了webpack-dev-middleware 和 webpack-hot-middleware（程式碼熱替換）。使用自定義的Koa程式替換webpack-dev-server，讓它更容易實現universal 渲染和為了不使這個包過於龐大。
打包優化
Babel被配置babel-plugin-transform-runtime可以讓程式碼更優化。另外，在生產環境，我們使用react-optimize來優化React程式碼。
在生產環境下，webpack會匯出一個css檔案並壓縮Javascript，並把js模組優化到最好的效能。
靜態部署
如果你正在使用nginx處理程式，確保所有的路由都直接指向 ~/dist/index.html 檔案，然後讓react-router處理剩下的事。如果你不是很確定應該怎麼做，文件在這裡。Express在腳手架中用於擴充套件服務和代理API，或者其它你想要做的事，這完全取決於你。
謝謝大家
如果沒有大家的貢獻，這個專案是不可能誕生的， 感謝所有為這個專案做出貢獻的人。