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
随机推荐
- [内存管理]linux内存管理 之 内存节点和内存分区
Linux支持多种硬件体系结构,因此Linux必须采用通用的方法来描述内存,以方便对内存进行管理.为此,Linux有了内存节点.内存区.页框的概念,这些概念也是一目了然的. 内存节点:主要依据CPU访 ...
- fileInput实战总结
fileinput组件实战总结 fileinput是一个增强的基于Bootstrap3.x和HTML5的文件上传工具,具备多种格式文件的预览功能, 另外,它包含了基于AJAX的上传,拖拽和撤销文件,可 ...
- 谈谈一些有趣的CSS题目(十五)-- 奇妙的 background-clip: text
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- 程序员要拥抱变化,聊聊Android即将支持的Java 8
WeTest 导读 Java 9预计今年也会正式发布,Java 8这个最具变革性且变革性最适于GUI程序的版本,Android终于准备正式支持.从自己开发JavaFx的感受,说一说Java 8应该使用 ...
- RocketMQ 介绍与基本使用
介绍 RocketMQ是阿里巴巴自研的第三代分布式消息中间件,是阿里系下开源的一款分布式.队列模型的消息中间件,原名Metaq,3.0 版本名称改为RocketMQ,是阿里参照kafka设计思想使用J ...
- Java中实现String.padLeft和String.padRight
因为习惯了C#中的padLeft和padRight,接触Java后突然失去这两个功能,觉得别扭,就试着实现了这两个方法. Java中String.format()中带有字符串对齐功能如下: Syste ...
- linux下fdisk分区管理、文件系统管理、挂载文件系统等
分区管理工具有:fdisk, parted, sfdisk fdisk:对于一块硬盘来讲,最多只能管理15分区: # fdisk -l [-u] [device...] 查看硬盘设备分区信息 # f ...
- MFC教程
MFC教程 还有VS2015的视频教程 试看教程地址:http://dwz.cn/4PcfPk免费下载地址:http://dwz.cn/mfc888 一.VS2010/MFC编程入门教程之目录 第一部 ...
- 转:Java中的Clone()方法详解
Java中对象的创建 clone顾名思义就是复制, 在Java语言中, clone方法被对象调用,所以会复制对象.所谓的复制对象,首先要分配一个和源对象同样大小的空间,在这个空间中创建一个新的对象.那 ...
- JDK的并发容器
除了提供诸如同步控制,线程池等基本工具外,为了提高开发人员的效率,JDK已经为我们准备了一大批好用的并发容器,这些容器都是线程安全的,可以大大减少开发工作量.你可以在里面找到链表.Hash ...