? 基於 react + react-router + redux 構建的移動端微應用

react-mobile-starter

項目地址

基於 react + redux + react-router 構建的移動端單頁微應用，適合於react、redux、react-router核心概念的理解與掌握。

前言

這個項目是介於 vue-mobile-starter(vue版本) 以後而且徹底仿照 vue-mobile-starter 功能、設計的 react版本。這個版本里引進了 dva 做爲開發腳手架，跟 vue-cli new XXX 出來是同一律念。使用 dva 做爲開發框架主要緣由之一是我司的 react 項目 大部分由 dva 框架 搭建，並且所有都經受住了線上壓力的考驗，有興趣的同窗能夠深刻研究，能夠帶入到公司項目的生產中去。如下是 dva 的官方說法：

通過一段時間的自學或培訓，你們應該都能理解 redux 的概念，並承認這種數據流的控制可讓應用更可控，以及讓邏輯更清晰。

但隨之而來一般會有這樣的疑問：概念太多，而且 reducer, saga, action 都是分離的（分文件）。

這帶來的問題是：

編輯成本高，須要在 reducer, saga, action 之間來回切換

不便於組織業務模型 (或者叫 domain model) 。好比咱們寫了一個 userlist 以後，要寫一個 productlist，須要複製不少文件。

還有一些其餘的：

saga 書寫太複雜，每監聽一個 action 都須要走 fork -> watcher -> worker 的流程

entry 書寫麻煩

...

而 dva 正是用於解決這些問題。

本項目雖然說是一個十來個頁面的小型項目，不過卻涉及到 react 模塊的全局和局部應用配置、第三方UI組件的使用、react-router、react-redux 的合理化配置和使用，很是適合於新手對 react 開發核心理念的掌握。

同一個項目用兩種框架作最大的感觸就是能明顯感受到兩個框架之間的差別性,當你切身的體會了二者的差別性後，天然可以在不一樣的應用場景下選擇合適的開發框架?

以爲此項目對您有幫助，能夠點右上角 star 支持一下?

歡迎提 issue

開源技術支持

1. react：一個用於構建用戶界面的 JAVASCRIPT 庫
2. react-router：react 官方路由庫.
3. react-redux：react 狀態管理框架.
4. dva：支付寶 開發的基於 react + redux + react-router 的輕型框架
5. roadhog：與 dva 搭配的命令行工具，包含 webpack，自帶數據 mock 功能
6. jsonplaceholder：一個簡單的在線模擬 REST API 服務器
7. axios：基於 Promise 的 HTTP 請求客戶端,可同時在瀏覽器和 node.js 中使用
8. Material-UI：Google 使用 React 構建的設計UI組件

如何開發

# 克隆本倉庫
git clone https://github.com/JohnsenZhou/react-mobile-starter.git

# 進入倉庫目錄
cd react-mobile-starter

# 安裝依賴
npm install

# 啓動項目，本地瀏覽地址 => localhost:8080
npm start

# 打包壓縮
npm run build

Dva 框架

如下能幫你更好地理解和使用 dva：

1. 理解 dva 的 8 個概念 ，以及他們是如何串起來的
2. 掌握 dva 的 全部 API
3. 查看 dva 知識地圖 ，包含 ES6, React, dva 等全部基礎知識
4. 查看 更多 FAQ，看看別人一般會遇到什麼問題
5. 若是你基於 dva-cli 建立項目，最好了解他的 配置方式

dva 框架中對數據流向的處理(見下圖)

目錄結構

.
├── README.md            // README文件
├── public               // 靜態資源及index入口文件
├── node_modules         
├── package.json         // npm 配置文件
├── .roadhogrc           // roadhog 配置文件
├── .roadhogrc.mock      // roadhog Mock數據配置文件
├── src                  // 項目開發目錄
│   ├── index.js         // 項目入口文件
│   ├── assets           // 資源文件夾
│   ├── components       // react通用組件
│   ├── router.js        // react-router配置文件
│   ├── router           // router對應頁面
│   ├── services         // 接口文件
│   ├── utils            // js通用工具組件
│   └── models           // redux數據處理文件
└── LICENSE              // 證書

效果演示

在線瀏覽Demo請戳這裏

1. 項目經過阿里雲部署
2. 想了解詳細部署過程的同窗請瀏覽 此文檔 同時請切換 release 分支

手機瀏覽請掃描下方二維碼

License

MIT license.