摘要：項(xiàng)目地址基于構(gòu)建的移動(dòng)端單頁微應(yīng)用，適合于核心概念的理解與掌握。前言這個(gè)項(xiàng)目是介于版本之后并且完全仿照功能設(shè)計(jì)的版本。但隨之而來通常會有這樣的疑問概念太多，并且都是分離的分文件。

項(xiàng)目地址

基于 react + redux + react-router 構(gòu)建的移動(dòng)端單頁微應(yīng)用，適合于react、redux、react-router核心概念的理解與掌握。

這個(gè)項(xiàng)目是介于 vue-mobile-starter(vue版本) 之后并且完全仿照 vue-mobile-starter 功能、設(shè)計(jì)的 react版本。這個(gè)版本里引進(jìn)了 dva 作為開發(fā)腳手架，跟 vue-cli new XXX 出來是同一概念。使用 dva 作為開發(fā)框架主要原因之一是我司的 react 項(xiàng)目 大部分由 dva 框架 搭建，而且全部都經(jīng)受住了線上壓力的考驗(yàn)，有興趣的同學(xué)可以深入研究，可以帶入到公司項(xiàng)目的生產(chǎn)中去。以下是 dva 的官方說法：

經(jīng)過一段時(shí)間的自學(xué)或培訓(xùn)，大家應(yīng)該都能理解 redux 的概念，并認(rèn)可這種數(shù)據(jù)流的控制可以讓應(yīng)用更可控，以及讓邏輯更清晰。
但隨之而來通常會有這樣的疑問：概念太多，并且 reducer, saga, action 都是分離的（分文件）。
這帶來的問題是：
編輯成本高，需要在 reducer, saga, action 之間來回切換
不便于組織業(yè)務(wù)模型 (或者叫 domain model) 。比如我們寫了一個(gè) userlist 之后，要寫一個(gè) productlist，需要復(fù)制很多文件。
還有一些其他的：
saga 書寫太復(fù)雜，每監(jiān)聽一個(gè) action 都需要走 fork -> watcher -> worker 的流程
entry 書寫麻煩
...
而 dva 正是用于解決這些問題。

本項(xiàng)目雖說是一個(gè)十來個(gè)頁面的小型項(xiàng)目，不過卻涉及到 react 模塊的全局和局部應(yīng)用配置、第三方UI組件的使用、react-router、react-redux 的合理化配置和使用，非常適合于新手對 react 開發(fā)核心理念的掌握。

同一個(gè)項(xiàng)目用兩種框架做最大的感觸就是能明顯感覺到兩個(gè)框架之間的差異性,當(dāng)你切身的體會了兩者的差異性后，自然能夠在不同的應(yīng)用場景下選擇合適的開發(fā)框架?

覺得此項(xiàng)目對您有幫助，可以點(diǎn)右上角 star 支持一下?
歡迎提 issue

react：一個(gè)用于構(gòu)建用戶界面的 JAVASCRIPT 庫

react-router：react 官方路由庫.

react-redux：react 狀態(tài)管理框架.

dva：支付寶 開發(fā)的基于 react + redux + react-router 的輕型框架

roadhog：與 dva 搭配的命令行工具，包含 webpack，自帶數(shù)據(jù) mock 功能

jsonplaceholder：一個(gè)簡單的在線模擬 REST API 服務(wù)器

axios：基于 Promise 的 HTTP 請求客戶端,可同時(shí)在瀏覽器和 node.js 中使用

Material-UI：Google 使用 React 構(gòu)建的設(shè)計(jì)UI組件

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

# 進(jìn)入倉庫目錄
cd react-mobile-starter

# 安裝依賴
npm install

# 啟動(dòng)項(xiàng)目，本地瀏覽地址 => localhost:8080
npm start

# 打包壓縮
npm run build

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

理解 dva 的 8 個(gè)概念 ，以及他們是如何串起來的

掌握 dva 的 所有 API

查看 dva 知識地圖 ，包含 ES6, React, dva 等所有基礎(chǔ)知識

查看 更多 FAQ，看看別人通常會遇到什么問題

如果你基于 dva-cli 創(chuàng)建項(xiàng)目，最好了解他的 配置方式

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

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

在線瀏覽Demo請戳這里

項(xiàng)目通過阿里云部署
想了解詳細(xì)部署過程的同學(xué)請瀏覽 此文檔 同時(shí)請切換 release 分支

MIT license.