react-mobile-starter项目地址基于react+redux+react-router的移动端单页微应用,适用于react,redux,react-理解和掌握路由器的核心概念。前言本项目是vue-mobile-starter(vue版)之后的react版本,完全模仿vue-mobile-starter的功能和设计。该版本引入了dva作为开发脚手架,与vue-clinewXXX是同一个概念。使用dva作为开发框架的主要原因之一是我们大部分的react项目都是使用dva框架构建的,而且都经受住了线上压力的考验。有兴趣的同学可以深入研究,并将其带入公司的项目制作中去。以下是dva官方的说法:经过一段时间的自学或者培训,大家应该能够理解redux的概念,认识到这种数据流控可以让应用更加可控,逻辑更加清晰。但是之后通常会有这样的疑惑:概念太多,reducer、saga、action都是分开的(分文件)。由此带来的问题是:编辑成本高,需要在reducer、saga、action之间来回切换,不方便组织业务模型(或领域模型)。比如我们写了一个userlist之后,要写一个productlist,需要复制很多文件。还有一些:saga写的太复杂了,每次监听一个action,都需要经过fork->watcher->worker的过程。写entry很麻烦。。。dva就是用来解决这些问题的。本项目虽然是个十多页的小项目,但是涉及到react模块的全局和本地应用配置,第三方UI组件的使用,react-router和react-redux的合理配置和使用,非常适合新手掌握react开发的核心概念。同一个项目使用两个框架最大的感受就是可以很明显的感受到两个框架的区别。当你亲身体验了两者的不同,自然就能在不同的应用场景下选择合适的开发方式。框架?如果您觉得本项目对您有帮助,可以点击右上角的star支持一下吗?欢迎发布开源技术支持react:aJAVASCRIPTlibraryforbuildinguserinterfacesreact-router:react官方路由库。react-redux:react状态管理框架.dva:支付宝基于react+redux+react-router开发的轻量级框架roadhog:与dva协同工作的命令行工具,包括webpack,内置数据mock函数jsonplaceholder:一个简单的在线模拟RESTAPIserveraxios:基于Promise的HTTP请求客户端,可以在浏览器和node.js中同时使用Material-UI:如何开发谷歌使用React构建的设计UI组件#clone这个仓库gitclonehttps://github.com/JohnsenZhou/react-mobile-starter.git#进入仓库目录cdreact-mobile-starter#安装依赖npminstall#启动项目,本地浏览地址=>localhost:8080npmstart#打包压缩npmrunbuildDva下面的框架可以帮助你更好的理解和使用dva:了解dva的8个概念以及它们是如何联系在一起的掌握dva的所有API查看dva的知识图谱,包括ES6的所有基础知识,React、dva等。查看更多FAQ,看看别人通常会遇到什么问题如果你基于dva-cli创建项目,最好了解它的配置方式。dva框架中数据流的处理(见下图)目录结构。├──README.md//README文件├──public//静态资源和索引入口文件├──node_modules├──package.json//npm配置文件├──.roadhogrc//roadhog配置文件├──.roadhogrc.mock//roadhogMock数据配置文件├──src//项目开发目录│├──index.js//项目入口文件│├──assets//资源文件夹├──components//react常用组件│├──router.js//react-router配置文件│├──router//router对应页面│├──services//接口文件│├──utils//js常用工具Components│└──models//redux数据处理文件└──LICENSE//证书效果演示在线浏览Demo,请点这里项目通过阿里云部署想了解详细部署过程的同学请浏览此文档并切换到发布分支手机浏览请扫描下方二维码LicenseMITlicense。
