服務端渲染的React手腳架。完美使用 React, Redux, and React-Router！最好用的腳手架

時間 2020-02-06

標籤服務渲染 react 腳架完美使用 redux router 最好用的腳手架欄目 React 简体版

原文原文鏈接

Universal React Starter Kit

服務端渲染的React手腳架css

這個啓動包的設計是爲了讓你使用一整套最新最酷的前端技術，全部都是可配置，富特性，基於webpack已經提供代碼熱加載，使用sass預處理css，單元測試，代碼覆蓋率報告，代碼分割等等更多。html

這個項目最主要的目的是儘量果斷的保留。目的不是要你必定按照這個結構去完成你的項目，諧在使前端開發更健壯，更簡單還有最重要的是更快樂。你能夠得到如下的全部特性！前端

最後，若是沒有你們的貢獻，這個項目是不可能如此健壯的，因此，謝謝你們。node

以爲不錯的話，請Star一下本項目，這是對做者最大的支持。react

全部相關庫已準備好，隨時等待調用。webpack

特性

需求配置

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

若是一切順利，你會看到以下:

開發過程當中，你用得最多的會是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 渲染和爲了避免使這個包過於龐大。