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

zhangke3016 發布于2019-08-21 11:54 / 2812人閱讀

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

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

開源技術支持

react：一個用于構建用戶界面的 JAVASCRIPT 庫

react-router：react 官方路由庫.

react-redux：react 狀態管理框架.

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

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

jsonplaceholder：一個簡單的在線模擬 REST API 服務器

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

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：

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

掌握 dva 的 所有 API

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

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

如果你基于 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請戳這里

項目通過阿里云部署

想了解詳細部署過程的同學請瀏覽 此文檔 同時請切換 release 分支

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

License

MIT license.

云服務器 GPU云服務器 react-router react-router4 react-redux React_Redux_Appointm

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/87262.html

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

摘要：項目地址基于構建的移動端單頁微應用，適合于核心概念的理解與掌握。前言這個項目是介于版本之后并且完全仿照功能設計的版本。但隨之而來通常會有這樣的疑問概念太多，并且都是分離的分文件。 react-mobile-starter 項目地址基于 react + redux + react-router 構建的移動端單頁微應用，適合于react、redux、react-router核心概念的理解...

lowett 2019-08-29 13:10 評論0 收藏0
?? 基于 vue2 + vuex + vue-router 構建的移動端微應用

vue-mobile-starter View README in English 基于 vue2 + vuex + vue-router 構建的移動端單頁微應用，適合于vue2、vuex、vue-router核心概念的理解與掌握。前言做這個項目的初衷其實很簡單，我司之前一直用angular、react進行PC端項目的開發，但是最近新開展了一些項目打算用vue來做移動端的開發(緊跟大廠的步伐?...

learning 2019-08-02 15:57 評論0 收藏0
?? 基于 vue2 + vuex + vue-router 構建的移動端微應用

vue-mobile-starter View README in English 基于 vue2 + vuex + vue-router 構建的移動端單頁微應用，適合于vue2、vuex、vue-router核心概念的理解與掌握。前言做這個項目的初衷其實很簡單，我司之前一直用angular、react進行PC端項目的開發，但是最近新開展了一些項目打算用vue來做移動端的開發(緊跟大廠的步伐?...

galois 2019-08-21 11:50 評論0 收藏0