React工程實踐：基於React、Redux、React-Router的前端腳手架

項目地址: https://github.com/YutHelloWo...

基於React、Redux、React-Router@3.x、webpack和reactstrap的前端腳手架。

目錄

• 前言
• 特性
• 環境
• 開始
• 工程結構
• 開發調試
• 單元測試
• 靜態部署
• 相關文檔
• 致謝

前言

若是你是一個Reat初學者，這個項目能夠是很好的教程。若是你在計劃使用React技術棧建立一個大型SPA，那麼這個項目正好適合你。若是這個項目對你有幫助，請不吝嗇的給於star或者watch支持。

特性

• ES2015
• Webpack
• Redux
• React-router
• reactstrap
• Eslint
• Express
• Babel
• Karma

數據流

環境

• node ^5.0.0
• yarn ^0.23.0 or npm ^3.0.0

開始

在確認你的開發環境是以上環境配置，就開始能夠基於這個腳手架建立你的應用了:

首先，克隆這個工程。

$ git clone https://github.com/yuthelloworld/vortex-react.git <my-project-name>
$ cd <my-project-name>

而後，安裝工程依賴。推薦使用cnpm或Yarn，這樣能夠節約你安裝依賴的所需的時間，避免出現一些莫名奇妙的錯誤。

$ yarn  # Install project dependencies (or `npm install` or `cnpm install`)

最後，使用命令yarn start或者npm start來啓動該應用。

$ yarn start  # Start the development server (or `npm start`)

這裏還有一些其餘的處理命令:

yarn <script>	描述
start	啓動並熱更新 http://localhost:3000
build	構建到目錄 ./dist
test	經過Karma執行單元測試
test:watch	代碼改變時經過監控模式從新執行單元測試
lint	代碼檢查
lint:fix	代碼檢查並修復

工程結構

.
├── build                    # 打包配置
├── public                   # 公共靜態資源
├── server                   # express服務
│   └── main.js              # 服務入口js
├── src                      # 應用源文件
│   ├── index.html           # html模板
│   ├── main.js              # 程序啓動和渲染
│   ├── normalize.js         # 瀏覽器的兼容和墊片
│   ├── components           # 全局可複用組件
│   ├── layouts              # 主頁佈局
│   │   └── PageLayout       # 導航
│   ├── routes               # 動態路由
│   │   ├── index.js         # 主路由
│   │   ├── Home             # 子路由Home
│   │   │   ├── index.js     # 路由定義和異步加載
│   │   │   ├── assets       # 組件的靜態文件
│   │   │   ├── components   # 展現組件
│   │   │   └── routes **    # 子路由
│   │   └── Counter          # 子路由Couner
│   │       ├── index.js     # 路由定義
│   │       ├── container    # 容器組件
│   │       ├── modules      # module(reducers/constants/actions)
│   │       └── routes **    # 子路由
│   ├── store                # Redux相關模塊
│   │   ├── createStore.js   # 建立和使用redux store
│   │   └── reducers.js      # Reducer的註冊和注入
│   └── styles               # 樣式表
└── tests                    # 單元測試

開發調試

在開發環境，採用了web-dev-middleware和web-hot-middleware。代碼實時熱更新。

Redux DevTools

強烈推薦安裝谷歌瀏覽器插件Redux DevTools Chrome Extension,來查看整個應用的狀態時光穿梭。

路由

咱們使用React-router的plainRoute來定義應用的邏輯單元。

單元測試

新增一個單元測試，你只需在./tests中建立.spec.js文件。

靜態部署

若是你經過nginx web 服務來啓動應用，請確保路由指向~/dist/index.html，而後讓react-router處理剩下的事，更多參考這個文檔。Express在腳手架中用於擴展服務和代理API。

相關文檔

知識地圖

致謝

歡迎給這個項目提PR或者issues