README.md

前言

开始学习React的时候,在网上找了一些文章,读了官网的一些文档,后来觉得React上手还是蛮简单的,
然后就在网上找了一个React实战的练手项目,个人学完之后觉得这个项目很适合初学者或者进阶的朋友
练习,在此分享跟大家

项目介绍

该项目类似与大众点评,美团等一些O2O的软件,功能相似,但由于是练手的项目,目的在于React+Redux
的应用,所以在一些功能上会简化,功能稍后点评,先让大家看效果

项目演示

GitHub 地址 
在线演示

功能介绍

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】,没你想的那么难的更多相关文章

  1. 微信小程序-云开发-实战项目

    微信小程序-云开发-实战项目 微信小程序 微信小程序平台服务条款 https://developers.weixin.qq.com/miniprogram/product/service.html h ...

  2. react + redux 完整的项目,同时写一下个人感悟

    先附上项目源码地址和原文章地址:https://github.com/bailicangd... 做React需要会什么? react的功能其实很单一,主要负责渲染的功能,现有的框架,比如angula ...

  3. react+redux+react-redux练习项目

    一,项目目录 二.1.新建pages包,在pages中新建TodoList.js: 2.新建store包,在store包中新建store.js,reducer.js,actionCreater.js, ...

  4. Ink——一款使用React风格开发命令行界面应用(CLI App)的nodejs工具

    Github: https://github.com/vadimdemedes/ink Ink introduction: React for CLIs. Build and test your CL ...

  5. android开发实战-记账本APP(二)

    继昨天的开发,继续完成今天的内容. (一)开始构建一些业务逻辑,开始构建记账本的添加一笔记账的功能. ①对fab按钮的click时间进行修改,创建一个AlertDialog.Builder对象,因此我 ...

  6. 安卓开发实战-记账本APP(六)

    记账本APP开发---终结篇 昨天的动态数字录屏奉上:在抖音上拍了一个(ps:欢迎点赞) https://v.douyin.com/poEjmG/ 今天将图表的内容进行了制作,我用的是MPChart的 ...

  7. react+redux开发谷歌插件

    React Developer Tools Redux Dev Tools

  8. Java系列--第七篇 基于Maven的Android开发实战项目

    本篇是基于<Android应用案例开发大全,吴亚峰等著>的项目开发实例源码,其中有些图片,我做了一些修改,用于个人学习,请勿用于商业. 1, 日程管理专家 mvn archetype:ge ...

  9. 用react+redux+webpack搭建项目一些疑惑

    --save-dev开发用 例如:webpack --save开发和发布用 例如:react

随机推荐

  1. [Day01] Python基础

    明天要完成的任务如下:  Python 四则运算 Python 数据结构 Python 元算符(in.not in.is.and.or) 用户输入 (input.raw_input) 流程控制 缩进 ...

  2. xmlplus 组件设计系列之七 - 路由

    在浏览器端,对路由的理解一般是根据不同的 URL 完成页面的切换.在服务器端,则是根据不同的 URL 请求回馈相关的页面.在本章,我们讲述的是根据接收到的不同命令,路由组件呈现出不同的页面,这算是广义 ...

  3. [Git]02 如何简单使用

     本章将介绍几个最基本的,也是最常用的 Git命令,以后绝大多数时间里用到的也就是这几个命令. 初始化一个新的代码仓库,做一些适当配置:开始或停止跟踪某些文件:暂存或提交某些更新.我们还会展示如何 ...

  4. Bash 的若干基本问题

    Bash 的若干基本问题   这里介绍一些bash启动前.后的问题,以及一些使用bash需要注意的基本问题.     1.Bash的介绍   Bash是一种Shell程序,它是一般的Linux系统中的 ...

  5. Gartner:当商业智能成熟度低时,如何加快分析采用率

    文 | 水手哥 本文出自:知乎专栏<帆软数据应用研究院>--数据干货&资讯集中地 根据Gartner近7年的调查结果,71%的受访企业处于低成熟度阶段,也就是Gartner五级BI ...

  6. 服务器端IIS中部署带Office组件程序

    开发的程序需要用到Office组件(Word.Excel等)的时候,往往在开发环境中运行正常,但是部署到服务器上就出问题. 1)首先保证开发环境引用的dll正确 .net 4.0以上版本,添加引用Mi ...

  7. 学习笔记:JavaScript-入门篇

    1.对话框,输出框,警告框   1. document.write() 可用于直接向 HTML 输出流写内容.简单的说就是直接在网页中输出内容.   2.alert(字符串或变量);   3.conf ...

  8. Kotlin学习第一课:从对比Java开始

    1. 介绍 今年初,甲骨文再次对谷歌所谓的安卓侵权使用Java提起诉讼,要求后者赔偿高达90亿美元.随后便传出谷歌因此计划将主力语言切换到苹果主导的Swift,不过这事后来没了跟进. 但谷歌在这两天的 ...

  9. 港交所OMD-C对接笔记

    工作中需要对接港交所OMD-C的Standard版行情,现在把一些知识点做个笔记,供以后查阅. 「香港交易所领航星」巿场数据平台-证券市场(HKEX Orion Market Data Platfor ...

  10. iOS开发常用第三方开源框架 持续更新中...

    键盘管理 TPKeyboardAvoiding IQKeyboardManager(1.2.8) 弹窗HUD MBProgressHUD(0.9.2) SVProgressHUD UIView+Toa ...