*难点*

*Promise*

*Webpack*

*React组件通信*

*Redux*

*Redux-Redux*

*第一单元 ECMAScript6（10课时）*

*1.1* *什么是ES6******

1.1.1 Let、const和var的区别****(15’)

1.1.2 变量解构赋值（数组解构）****(10’)

1.1.3 变量解构赋值（对象解构）****(5’)

*1.2* *字符串、正则、数值、函数、数组、对象的扩展，箭头函数和普通函数区别******

1.2.1 模板字符串****(15’)

1.2.2 字符串扩展方法****(10’)

1.2.3 数值扩展****(10’)

1.2.4 函数扩展****(5’)

1.2.5 箭头函数****(10’)

1.2.6 数组扩展****(5’)

1.2.7 对象的扩展****(5’)

*1.3* *iterator 和 for ...of 循环*****

1.3.1 遍历器for...of****(10’)

1.3.2 iterator****(10’)

*1.4* *Class基本使用和继承******

1.4.1 类概念的由来*****(10’)

1.4.2 constructor方法*****(10’)

1.4.3 类的继承*****(10’)

1.4.4 静态方法静态属性****(10’)

*1.5* *set 和 map 数据结构*****

1.5.1 基本用法**** (10’)

1.5.2 实例的属性和方法****(15’)

1.5.3 遍历操作*****(10’)

*1.6* *Symbol 数据类型****

1.6.1 概述****(15’)

1.6.2 描述参数****(10’)

1.6.3 作为属性名****(5’)

*1.7* *Promise对象******

1.7.1 Promise的含义*****(15’)

1.7.2 基本用法*****(10’)

1.7.3 Promise方法*****(5’)

*1.8* *async 函数******

1.8.1 含义****(15’)

1.8.2 基本用法****(10’)

1.8.3 语法****(10’)

*第二单元 Webpack4.0（4课时）*

*2.1 Webpack介绍 *****

2.1.1 Webpack的重要性****(10’)

*2.2* *为什么要使用Webpack ******

*2.3* *打包基本配置****

2.3.1 安装webpack环境 ***(25’)

2.3.2 初始化配置***(20’)

*2.4* *.css、.scss文件类型解析*****

2.4.1 预编译解析 ****(10’)

2.4.2 loader ****(15’)

*2.5* *ES6转ES5解析*****

2.5.1 解析配置 ****(10’)

*2.6* *JSX语法解析及注意事项*****

2.6.1 什么是jsx****(10’)

2.6.2 jsx使用****(10’)

*2.7 服务器、热加载配置*****

2.7.1 配置本地服务器****(10’)

2.7.2 热加载****(10’)

*第三单元 组件 （6课时）*

*3.1* *什么是组件******

3.1.1 组件的概念****（15’）

*3.2* *组件的好处******

3.2.1 组件的特点 ****（15’）

*3.3* *组件的封装******

3.3.1 函数组件 ****（10’）

3.3.2 class组件****（10’）

3.3.3 函数组件、class组件的区别****（10’）

*3.3* *组件的三大属性******

3.3.1 state 属性****（10’）

3.3.2 props属性****（10’）

3.3.3 state属性和props属性的区别****（10’）

3.34 refs属性值****（10’）

*3.5* *组件通信******

3.5.1 父传子****（10’）

3.5.2 子传父****（10’）

3.5.3 兄弟组件****（10’）

3.5.4 跨组件通信（context）****（10’）

3.5.5 数据类型校验 ****（10’）

*3.6* *Children**（5**’*******）****

*3.7* *defaultProps***********（15********’********）*

*第四单元 State&组件受控（2课时）*

*4.1* *内部状态***（5********’********）*

*4.2* *合并更新***（10********’********）*

*4.3* *异步更新*****（10********’********）*

*4.4* *setState函数参数介绍******

4.4.1 更新视图的setState方法（10’）

*4.5 This指向******

4.5.1 解决this指向问题（10’）

*4.6 组件受控******

4.6.1 组件的受控（15’）

*第五单元 生命周期（4课时）*

*5.1 生命周期介绍****（15********’********）*

5.1.1 生命周期作用（10’）

*5.2 装载阶段****（15********’********）*

*5.3* *更新阶段****（15********’********）*

*5.4* *卸载阶段****（15********’********）*

*5.5* *错误处理****（15********’********）*

5.5.1 如何处理错误（10’）

*5.6* *获取真实DOM*****

5.4.1 ref属性 *****(15’)

5.4.2 获取真实dom *****(15’)

*第六单元 TODOLIST（6课时）*

*6.1* *组件拆分****（15********’********）*

*6.2* *添加、删除、编辑******

6.2.1 实现添加列表*****（5’）

6.2.2 实现删除列表*****（10’）

6.2.3 实现编辑当前*****（15’）

*6.3* *全选、单条选中*****（15********’********）*

*6.4* *视图切换、过滤*****（15********’********）*

*6.5* *清除选中*****（15********’********）*

---

*第七单元 react-router-dom （6课时）*

*7.1 SPA介绍****（25′）*

7.1.1 单页应用介绍 **** （5′）

7.1.2 单页应用特点 ***（5′）

7.1.3 前端路由 ****（5′）

7.1.4 前端路由实现原理 ****（5′）

*7.2 react-router-dom*******

7.2.1 react-router-dom介绍 ***（10′）

7.2.1 react-router-dom安装 ***（5′）

7.2.3 内置组件 ******（45′）

BrowserRouter、

HashRouter、

Route、

Redirect、

Link、

NavLink

Switch

7.2.4 路由的基本配置*****（45′）

7.2.5 嵌套路由*****（20′）

7.2.6 路由传值*****（20′）

7.2.7 react路由js跳转*****（10′）

7.2.8 react单页应用练习*****（90′）

*第八单元 react UI组件库****(4课时)*

*8.1 react比较流行的组件库 ***（15′）*

8.1.1 React Material-UI (opens new window) ***（5′）

8.1.2 React-Bootstrap (opens new window) ***（5′）

8.1.3 ant-design ***（5′）

*8.2 ant-design使用入门****（165′）*

8.2.1 ant-design介绍 ***（20′）

8.2.2 安装ant-design *** （5′）

8.2.3 按需引入、全部引入***（5′）

8.2.4 项目中用到的antd组件****（135′）

​ 通用组件

​ 布局组件

​ 导航组件

​ 数据录入组件

​ 数据展示组件

​ 反馈组件

*第九单元 redux （4课时）*

*9.1 redux是什么*****（10′）*

*9.2 什么情况下使用redux*****（5′）*

*9.3 redux的运行流程*****（20′）*

*9.4 redux的三个核心概念*****（30′）*

9.4.1 action *****(10′)

9.4.2 reducer *****(10′)

9.4.3 store *****（10′）

*9.5 redux的核心API *****（35′）*

9.5.1 redux 里面的createStore combinereducers applyMiddleware ***(10′)

9.5.2 store 里面的getState Subscribe dispatch unsubscribe ****（20′）

9.5.3 redux 中间件 redux-thunk ****（5′）

*9.6 案例*

9.6.1 使用redux 改写todolist效果*****（80′）

*第十单元 react-redux (4课时 )*

*10.1 react-redux概念**** (10 ′)*

*10.2 安装及使用****（10′）*

*10.3 相关概念*****（20′）*

10.3.1 UI组件

10.3.2 容器组件

*10.4 Provider ***（10′）*

*10.5 connect ***（10′）*

*10.6 mapStateToProps ***（10′）*

*10.7 mapDispatchToProps ***（10 ′）*

*10.8购物车案例练习 *****（100 ′）*

---

*第十一单元 移动端去哪网购票频道 项目（20课时）*

​ 

​ *11.1 组件拆分组件化方式完成每页页面结构布局*****（180′）*

​ *11.2 首页布局 组件拆分*****（90′）*

​ *11.3 banner切换效果实现***（90′）*

​ *11.4 触摸搜索框跳转搜索页*****（90′）*

​ *11.5 搜索提示*****（90′）*

​ *11.6 搜索列表数据请求（90′）*

​ *11.7 触摸列表每一项查看景区详情（270′）*

*第十二单元 复习（8课时）*