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

項(xiàng)目地址

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

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

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

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

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

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

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

react-router：react 官方路由庫(kù).

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

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

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

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

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

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

# 克隆本倉(cāng)庫(kù)
git clone https://github.com/JohnsenZhou/react-mobile-starter.git

# 進(jìn)入倉(cāng)庫(kù)目錄
cd react-mobile-starter

# 安裝依賴
npm install

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

# 打包壓縮
npm run build

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

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

掌握 dva 的 所有 API

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

查看 更多 FAQ，看看別人通常會(huì)遇到什么問(wèn)題

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

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

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

在線瀏覽Demo請(qǐng)戳這里

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

MIT license.