第一章第一节 React16+Redux 实战企业级大众点评Web App

课程背景

• React下载量大于Vue, Angular

React全家桶

1. React 视图层
2. Redux 状态管理层
3. React Router 4 路由层

• 工作开发时，不仅仅只需要React这一个库。
• React库解决的是视图层，当业务比较复杂的时候，我们往往需要引入专门的状态管理层进行状态管理。此外，React常用来开发单页面应用，前端开发单页面应用必须需要Router。
• Redux是状态管理层常用的技术。
• React Router 4是路由层常用的解决方案。

常见困惑

• 转换开发思维 从面向过程的开发思维转换为面向组件的开发思维

传统开发

• 传统开发通过jQuery\原生JS操作DOM API，是一个面向过程的开发思维。
  比如点击页面的查询按钮会去向服务端发送请求数据，获取到数据后再调用DOM API将数据填充到页面的某个区域。

React开发

• 每个页面都是由若干组件实现的，组件决定了页面的UI，如果想让页面UI发生变化，需要更改组件的状态。所以基于React开发逻辑关键是状态的修改。
• 状态修改在组件生命周期怎么用？业务逻辑写在哪？这些问题的产生原因是没有从面向过程的开发思维转向面向组件的开发思维。

Redux

• Redux是一个高度抽象的库，固定了基本的数据流管理流程，但是如果将一个流程在真实项目中去落地? 并没有给出统一的标准。

1. 目录结构如何组织？
2. Redux讲所有state统一到全局的state上，全局的state怎么设计
3. 另外逻辑应该写到Action还是写到Reducer当中，如何分工？
4. Redux当中还有众多高阶概念（store enhancer 和 middleware等）

React Router 4

• 客户端路由 vs 服务端路由
• 动态路由 vs 静态路由
• 纯正的组件式路由实现 每一个路由本质上都是一个React组件
• 路由和组件是如何关联?

真实项目中需要把这些技术组合到一起（React + Redux + React Router）才能满足业务需求。

课程目标

从原理思想上理解React技术栈，从而真正在项目中得心应手使用。

课程安排

1.介绍Create React App这个React技术栈中最常用的脚手架
2.通过TO DO实例介绍React思维方式，让大家掌握React的组件化思维
3.Redux基础以及实践总结
4.介绍React Router 4 基本使用和重要原理
5.前端架构设计，从0开始搭建大众点评实例
6.实战案例开发
7.项目优化以及部署
8.回顾以及总结

授课特点

1.注重原理和思维方式的讲解
2.注重实战经验的总结
3.注重前端架构的讲解和设计
4.核心代码逐行编写（重在逻辑开发）

课程收货

1.掌握React全家桶的开发流程
2.理解React全家桶的核心思想
3.熟练应用React全家桶的最佳实践
4.使用React全家桶，独立搭建中小型项目的前端架构

技术储备要求

1.掌握前端HTML/CSS/JavaScript
2.熟悉React基础知识，了解React Router和Redux
3.具备一定的自学能力

项目实战案例

1.从首页进入某一个产品的详情页
2.购买相关产品的相关路径，通过登录模拟实践完成用户登录，购买商品，看到购买产品清单，以及注销当前登录的用户
3.在搜索框搜索跳到搜索相关页

面向用户

• 具备React基础，但缺少项目实战经验
• 独立面对 Redux，无从下手
• 看了许多书，写了许多Demo，还是不能在实际项目中灵活使用React全家桶
• 希望加强前端架构能力