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
随机推荐
- SQL Server pivot 行转列遇到的问题
前段时间开发系统时,有个功能是动态加载列,于是就使用了SQL Server自带的PIVOT函数进行行转列,开始用的非常溜,效果非常好.但是提交测试后问题来了,测试添加的列名中包含空格,然后就杯具了,功 ...
- [系统启动]Printk与sched_clock_init的一点分析
作者:Younger Liu, 本作品采用知识共享署名-非商业性使用-相同方式共享 3.0 未本地化版本许可协议进行许可. 在分析Linu内核启动的过程中,发现一段"不平常" ...
- MAMP 环境下为 php 添加 pcntl 扩展
前言: pcntl 介绍 pcntl 扩展可以支持 PHP 的多线程操作.(非Unix类系统不支持此模块) phpize 介绍 phpize 可以用来给 PHP 动态的添加扩展.比如编译 PHP 时忘 ...
- Linux中批量添加文件和修改文件小笔记
1.#使用通配符批量创建5个文件 $ touch file{1..10}.txt 2.#批量修改这五个后缀名为.txt的文本文件名重命名为.c后缀名结尾的文件 $ rename 's/\.txt/\. ...
- 让Cocos2dx中的TestCPP中的Box2dTest运行起来
一般而言,如果你导入TestCPP到VS2012中去后,会编译十几分钟才会出现窗口界面,这是包含Cocos2dx所有功能的一个demo,功能非常齐全强大,里面有两个关于Box2d的测试案例,一个是Bo ...
- java中的引用传递(同样适用于JS)
1 java中的数据类型: 有8种基本数据类型,分别为:byte(1),boolean(1),char(2),short(2),int(4),long(8),float(4),double(8) ...
- get和post方式请求数据,jsonp
get方式请求数据: p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 19.0px Consolas; color: #289c97 } p.p2 { ma ...
- ubuntu16.04 编译运行 LSD-SLAM
下载编译LSDSLAM,可能会出现 CreateGlutWindowAndWind is not a member of pangolin 以及 该函数参数报错的问题: 原因是在新的pangolin版 ...
- Python 基础之基本数据类型
首先,Python中的变量不需要声明.每个变量在使用前都必须赋值,变量赋值以后该变量才会被创建.在Python中,变量就是变量,它没有类型,我们所说的"类型"是变量所指的内存中对象 ...
- python selenium 环境搭建(一)
elenium 虽然过了这么多年,但是到目前为止依然是比较流行的自动化框架了,还有很多的初学者在学习,所以根据自己的时间将把相关的资料汇总一下,下面首先我们需要搭建一下基础环境. 首先自己本身比较笨, ...