React+Redux开发实战项目【美团App】,没你想的那么难
README.md
前言
开始学习React的时候,在网上找了一些文章,读了官网的一些文档,后来觉得React上手还是蛮简单的,
然后就在网上找了一个React实战的练手项目,个人学完之后觉得这个项目很适合初学者或者进阶的朋友
练习,在此分享跟大家
项目介绍
该项目类似与大众点评,美团等一些O2O的软件,功能相似,但由于是练手的项目,目的在于React+Redux
的应用,所以在一些功能上会简化,功能稍后点评,先让大家看效果
项目演示
功能介绍
1. 首页开发GitHub 地址
2. 城市页面GitHub 地址
3. 搜索结果页GitHub 地址
4. 详情页面GitHub 地址
5. 登录页面GitHub 地址
6. 收藏与购买GitHub 地址
7. 个人中心页面GitHub 地址
8. 评价功能GitHub 地址
体系&技术分析
如果没有了解[React](http://reactjs.cn/)和[Redux](http://redux.js.org/)的初学者可以先去网上找一些资料
和博客看一下,先入门,最好是到去看官方文档。
- React
框架React提供模块开发的规范,每一个组件,每一个页面当做一个模块Component,极大便捷了团队的开发,同时可以很
方便做到组件的分离
- redux是一个数据管理容器,可以很方便的实现组件之间的数据共享,由于React的数据流是单向的,不像Angular等其
他的双向数据流的框架,所以React会结合Flux或者Redux来开发使用。官方的概念晦涩难懂, 理解了state, store,
action,reducer之后再看就能理解了
>Redux is a predictable state container for JavaScript apps.
- less
一种css的预编译语言。这个项目中的样式和布局还是div+css.
- 管理工具git&webpack&npm
git作为代码的托管工具,webpack作为开发的管理工具,npm包管理
- 后台模拟数据KOA
总结
学完这个项目之后,相信大家会知道React+Reduce的开发的应用,和开发流程等等,同时会加深对React的理解,这也是
这个项目最大的好处。另一方面,React带给我们组件化的开发模式,在代码结构上非常的清晰,易于维护和扩展。相对于
利用Jquery开发最大的好处就是React的数据驱动视图的开发方式,在性能上也有一定的提升。
但实战项目始终是框架的运用,如果要做到代码和框架的性能优化,这个项目远远达不到效果。同时在这个项目中,我们也
使用了企业中常用的一些性能优化,比如使用React官方提供的库 **react-addons-pure-render-mixin** ,但对于一
些特定功能来讲,使用这个方法并达不到很好的效果,如果需要更加深刻的理解React的框架,除了必要的文档,其内部的
组织架构和实现方式也要了解,小编现在还没有深入研究,有能力的学生可以多研究一下。
说明
开发的流程也就是按照上面的顺序开发,GitHub上面有9个分支,对应每一个功能的开发,大家可以按照顺序下载代码学习
方便初学者学习和使用,项目来源于Mooc网的React实战项目,在此基础上修改了一下小问题,主要代码一致。参考MOOC网
[React模仿大众点评],这个上面的手记特别的详细,大家务必看一下
React+Redux开发实战项目【美团App】,没你想的那么难的更多相关文章
- 微信小程序-云开发-实战项目
微信小程序-云开发-实战项目 微信小程序 微信小程序平台服务条款 https://developers.weixin.qq.com/miniprogram/product/service.html h ...
- react + redux 完整的项目,同时写一下个人感悟
先附上项目源码地址和原文章地址:https://github.com/bailicangd... 做React需要会什么? react的功能其实很单一,主要负责渲染的功能,现有的框架,比如angula ...
- react+redux+react-redux练习项目
一,项目目录 二.1.新建pages包,在pages中新建TodoList.js: 2.新建store包,在store包中新建store.js,reducer.js,actionCreater.js, ...
- Ink——一款使用React风格开发命令行界面应用(CLI App)的nodejs工具
Github: https://github.com/vadimdemedes/ink Ink introduction: React for CLIs. Build and test your CL ...
- android开发实战-记账本APP(二)
继昨天的开发,继续完成今天的内容. (一)开始构建一些业务逻辑,开始构建记账本的添加一笔记账的功能. ①对fab按钮的click时间进行修改,创建一个AlertDialog.Builder对象,因此我 ...
- 安卓开发实战-记账本APP(六)
记账本APP开发---终结篇 昨天的动态数字录屏奉上:在抖音上拍了一个(ps:欢迎点赞) https://v.douyin.com/poEjmG/ 今天将图表的内容进行了制作,我用的是MPChart的 ...
- react+redux开发谷歌插件
React Developer Tools Redux Dev Tools
- Java系列--第七篇 基于Maven的Android开发实战项目
本篇是基于<Android应用案例开发大全,吴亚峰等著>的项目开发实例源码,其中有些图片,我做了一些修改,用于个人学习,请勿用于商业. 1, 日程管理专家 mvn archetype:ge ...
- 用react+redux+webpack搭建项目一些疑惑
--save-dev开发用 例如:webpack --save开发和发布用 例如:react
随机推荐
- JS模式--状态模式(状态机)
下面的状态机选择通过Function.prototype.call方法直接把请求委托给某个字面量对象来执行. var light = function () { this.currstate = FS ...
- vector介绍
vector(向量,也可称为容器): C++中的一种数据结构,确切的说是一个类.它相当于一个动态的数组,当程序员无法知道自己需要的数组的规模多大时,用其来解决问题可以达到最大节约空间的目的. 1.1 ...
- iOS开发 - Swift使用GCD实现计时器功能
前言 开发中,经常会用到定时执行网络请求.倒计时.计时器等功能,本篇文章介绍在iOS开发中,Swift怎样使用GCD实现这些功能. 执行一次 下面的代码将会在5秒后执行,且只执行一次. let tim ...
- windows下安装Redis并部署成服务
windows下安装Redis并部署成服务 Redis 是一个开源(BSD许可)的,内存中的数据结构存储系统,它可以用作数据库.缓存和消息中间件. 一:下载 下载地址: windows版本: http ...
- 给上传文件的input控件"美容"
作为一名前端程序猿呢,在工作中经常会遇到form表单这种东西.然而表单的其他input控件样式还是很好改变的.但是,唯独input类型是file的文件上传控件可能就没那么好打扮的漂亮.刚好菜鸟我最近工 ...
- VopSdk一个高逼格微信公众号开发SDK
一.我们的目标 分离基础参数和业务参数. 具有高重用和扩展性. 轻量级. 二.实现目标 (一)分离基础参数和业务参数 仔细分析所有接口,抽离出每个模块接口的公共参数. A.针对微信公众号所有接口分析( ...
- Apache网站服务源码安装与站点部署
简介: 在Internet 网络环境中,Web服务无疑是最为主流的应用系统,有了WEB站点,企业可以充分展示自己的产品,公司,宣传自己的企业形象,提供各种网上交流,业务平台等. Apache起源:源于 ...
- 【exp/imp】将US7ASCII字符集的dmp文件导入到ZHS16GBK字符集的数据库中
[exp/imp]将US7ASCII字符集的dmp文件导入到ZHS16GBK字符集的数据库中 1.1 BLOG文档结构图 1.2 前言部分 1.2.1 导读和注意事项 各位技术爱好者,看完本文后 ...
- 【树莓派】为树莓派配置或扩展swap分区
---恢复内容开始--- 由于树莓派3的默认内存只有1G,而应用程序运行过程中,存在大量的IO读写,以及网络转换,内存交换等.这样,也有很多buffer.cache资源占用等,很快就会接近1GB,最终 ...
- 从Python小白到第一个小游戏发布
1.安装必要的环境(附图两张) 直接下载安装程序,本人win10系统,根据电脑系统下载并安装对应的python.exe,安装路径可以选择D盘的,具体安装细节这里就不说了,不知道的可以留言或者找度娘 2 ...