React技术栈仿大众点评WebApp

第1章搭建webpack+react开发环境9节|68分钟

前端开发早就进入工程化的年代，而以React为框架开发，就必须使用工程化，目前前端最强大的工程化工具就是webpack。本章节就讲述如何使用webpack搭建一个能自动构建编译React的环境，以及使用npm作为依赖管理工具。本节学完之后，我们就能将编写的React代码自动编译为浏览器可识别的代码，直接使用浏…

收起列表

视频：1-1导学1–课程简介(09:20)

视频：1-2导学2–为何用文档代替PPT-(01:37)

视频：1-3导学3–项目演示效果(01:31)

视频：1-4课程说明(04:59)

视频：1-5体验npmstart和npmrunbuild命令(08:22)

视频：1-6安装插件(11:57)

视频：1-7介绍webpack.config.js（1）(08:26)

视频：1-8介绍webpack.config.js（2）(12:15)

视频：1-9介绍webpack.production.config.js(08:36)

第2章React基础7节|55分钟

针对不熟悉React基础的同学，本章节就为你介绍React的基本使用，从显示最简单的helloworld开始，到使用组件化制作页面，针对已经熟悉React基础的同学，本章节的后半部分讲述了我本人对React组件化设计、代码结构的一些思路和经验，而这些技巧是后面实战开发的理论基础，不可忽略。…

收起列表

视频：2-1介绍jsx(06:47)

视频：2-2jsx语法几点注意事项(07:57)

视频：2-3jsx事件循环和判断(09:33)

视频：2-4代码分离方案(07:31)

视频：2-5props和state(07:37)

视频：2-6智能组件和木偶组件(06:01)

视频：2-7生命周期(08:49)

第3章React性能优化方案2节|23分钟

作为一个称职的工程师，考虑性能是必须要做的事情之一。React如此大型复杂的框架，存在性能问题是可以想象到的，但是官方也提出了优化方案。本章节将介绍如何检测性能问题，以及如何优化React的性能。

收起列表

视频：3-1优化方案(13:41)

视频：3-2todo-list-demo(08:48)

第4章React-router2节|23分钟

使用React开发的是一个单页面引用程序（即SPA），SPA的页面跳转必须依靠路由来实现，而React“御用”的路由工具就是React-router，本章节介绍React-router的使用。

收起列表

视频：4-1介绍router-map配置(12:37)

视频：4-2跳转和参数(09:58)

第5章Redux基础4节|37分钟

当程序复杂度提高时，程序中的数据管理就变得很复杂，此时Redux就能派上用场。本章节介绍Redux的基础，使您对Redux有一个初步的了解，因为后面的实战开发，会用到Redux来存储数据，这里要把基础打好。

收起列表

视频：5-1简单demo(10:35)

视频：5-2结合react（1）(10:59)

视频：5-3结合react（2）(08:07)

视频：5-4结合react-场景说明(07:00)

第6章使用fetch3节|29分钟

使用jQuery开发页面是，可是使用自带的ajax功能获取、提交数据。而使用React框架时，就没必要为了ajax引用一个jquery了，这里我们推荐使用fetch，最新的ajax交互方式，支持Promise，用起来绝对简洁给力。

收起列表

视频：6-1get请求(11:10)

视频：6-2post请求(06:33)

视频：6-3数据模拟Mock(11:10)

第7章开发首页22节|168分钟

前面基础知识介绍完，正式进入实战开发阶段，本章节开发首页。首先分析页面，拆分组件，然后开发组件，拼接页面。给您详细展示从一个空白页面到开发出最终效果的整个过程。

收起列表

视频：7-1开发步骤介绍(06:32)

视频：7-2路由介绍(07:03)

视频：7-3父组件介绍(06:35)

视频：7-4获取城市(09:02)

视频：7-5存储城市到Redux(08:44)

视频：7-6HomeHeader组件（1）(09:43)

视频：7-7HomeHeader组件（2）(08:47)

视频：7-8HomeHeader组件（3）(03:53)

视频：7-9简单轮播图(07:34)

视频：7-10获取轮播图index(05:36)

视频：7-11轮播图完成(07:10)

视频：7-12超值特惠-后端接口(06:25)

视频：7-13超值特惠-获取数据(07:49)

视频：7-14超值特惠-展示数据(06:37)

视频：7-15猜你喜欢-后端数据(07:02)

视频：7-16猜你喜欢-获取列表数据(10:13)

视频：7-17猜你喜欢-显示标题(09:25)

视频：7-18猜你喜欢-显示内容(04:41)

视频：7-19加载更多-准备数据(08:08)

视频：7-20加载更多-实现功能(10:30)

视频：7-21加载更多-下拉效果(11:11)

视频：7-22加载更多-总结(04:42)

第8章开发城市页面6节|40分钟

本节讲述城市页面的开发，该页面中将学会如何在React中初步使用Redux存储简单的数据。

收起列表

视频：8-1路由介绍(06:31)

视频：8-2跳转链接(07:06)

视频：8-3完成Header(06:14)

视频：8-4当前城市(04:45)

视频：8-5修改城市的方法(08:37)

视频：8-6修改城市完成(06:03)

第9章开发搜索结果页面6节|57分钟

本节讲述搜索结果页的开发，该页面将为您展示常见的搜索效果如何通过React开发出来，并且能深刻体会到路由的使用规则，以及组件可复用带来的好处。

收起列表

视频：9-1路由配置(07:27)

视频：9-2约束性和非约束性组件(08:52)

视频：9-3抽离input-1(06:30)

视频：9-4抽离input-2(08:18)

视频：9-5SearchHeader组件(10:44)

视频：9-6结果列表(14:40)

第10章开发详情页5节|49分钟

本节讲述详情页的开发，通过上两节的实战课程，学生讲会更加快速高效的学会拆分组件，复用已有组件，最后拼装成页面。

收起列表

视频：10-1header(09:02)

视频：10-2获取商户信息(09:49)

视频：10-3展示商户信息-1(09:44)

视频：10-4展示商户信息-2(08:48)

视频：10-5用户评论列表(11:15)

第11章开发登录页面3节|27分钟

本节讲述登录页面的开发，将再次使用Redux存储数据，并判断用户的登录状态，以及登录之后跳转的处理。

收起列表

视频：11-1路由配置(05:45)

视频：11-2登录组件-1(10:30)

视频：11-3登录组件-2(10:02)

第12章收藏和购买功能6节|46分钟

通过本节收藏和购买的功能开发，您将体会到更加复杂的Redux应用。

收起列表

视频：12-1创建子页面(07:22)

视频：12-2购买功能(06:23)

视频：12-3收藏功能-准备1(10:01)

视频：12-4收藏功能-准备2(06:18)

视频：12-5收藏功能-准备3(06:56)

视频：12-6收藏功能-完成(08:16)

第13章开发用户中心页4节|31分钟

本节讲述用户中心页面的开发，该页面是一个比较基础的页面，跟之前一样拆分组件、复用组件、拼装页面。此时您应该能快速高效的掌握课程的全部内容。

收起列表

视频：13-1Header(09:52)

视频：13-2用户信息(05:48)

视频：13-3获取订单(06:29)

视频：13-4展示订单(08:37)

第14章评价功能5节|36分钟

通过本节评价功能，您将学会在React中如何操作页面变化，即数据驱动视图的开发方式。另外，您将学会使用fetch提交数据，而之前都是用fetch获取数据。

收起列表

视频：14-1评价状态(05:30)

视频：14-2显示输入框(11:27)

视频：14-3获取评价内容(08:45)

视频：14-4提交数据(06:03)

视频：14-5总结(03:49)

第15章扩展-项目代码版本升级8节|44分钟

项目代码版本升级，webpack2升级到webpack3。

收起列表

视频：15-1补充-build错误解决方案(03:31)

视频：15-2升级介绍(02:56)

视频：15-3webpack3升级npm组件(03:20)

视频：15-4webpack3升级配置文件(06:28)

视频：15-5webpack3升级打包命令(09:07)

视频：15-6react-router4升级npm组件(03:21)

视频：15-7react-router4修改router配置(08:52)

视频：15-8react-router4执行命令(06:20)