• 教学目标

1. 知识目标（学什么知识）

1. 掌握react的使用
2. 掌握react组件开发
3. 掌握react数据流
4. 掌握react components生命周期
5. 掌握react事件系统
6. 掌握react组件间的通信
7. 掌握react高阶组件
8. 掌握react组件优化
9. 掌握propTypes验证器
10. 掌握react-router路由
11. 掌握redux基本概念
12. 掌握redux数据流
13. 掌握react-redux开发

1. 能力目标（产出物是什么）

1. 使用react结合react-router、es6、react-redux全家桶实现webapp开发
2. 使用webpack结合nodejs进行服务端渲染
3. 使用webpack作为构建工具，对各类型文件进行编译打包管理
4. 使用node-express搭建web服务器并结合webpack进行热更新开发
5. 将项目提交到gitHub上进行管理

• 参考教材
• 课程内容安排

1. React简介
   1. React的简介
      1. 专注视图层
      2. Virtual DOM虚拟DOM
      3. JSX的由来以及基本语法
      4. 渲染元素
2. React组件
   1. React组件
      1. 组件的演变
      2. React组件的构建
   2. React数据流
      1. state
      2. props
3. React生命周期

    2.1 实例化
        2.1.1  getDefaultProps
        2.1.2  getInitialState
        2.1.3  componentWillMount
        2.1.4  render
        2.1.5  componentDidMount
2.2 存在期
    2.2.1  componentWillReceiveProps
    2.2.2  shouldComponentUpdate
    2.2.3  componentWillUpdate
    2.2.4  render
    2.2.5  componentDidUpdate
2.3 销毁 & 清理期
    2.3.1  componentWillUnmount

1. refs 与 DOM

2.4 refs 与 ReactDOM
    2.4.1  findDOMNode()
    2.4.2  unmountComponentAtNode()
    2.4.3  refs

1. React事件系统
   1. 事件系统
      1. 合成事件的绑定方式与实现机制
      2. 在React中使用原生事件
      3. React合成事件与JavaScript原生事件
   2. 事件
      1. 键盘事件
         1. onKeyDown
         2. onKeyPress
         3. onKeyUp
      2. 焦点事件
         1. onFocus
         2.  onBlur
      3. 表单事件
         1. onChange
         2.  onInput
         3. onSubmit
      4. 鼠标事件
         1. onClick
         2. onContextMenu
         3. onDoubleClick
         4. onMouseDown
         5. onMouseUp
         6. onMouseOver
         7. onMouseOut
         8. onMouseMove
         9. onMouseEnter
         10. onMouseLeave
         11.  onDrag
      5. 选择事件
         1. onSelect
      6. 触摸事件
         1. onTouchCancel
         2.  onTouchEnd
         3. onTouchMove
         4. onTouchStart
      7. UI事件
         1. onScroll
      8. 动画事件
         1. onAnimationStart
         2.  onAnimationEnd
         3. onAnimationIteration
      9. 图像事件
         1. onLoad
         2.  onError
      10. 媒体事件
          1. onPause
          2. onPlay
          3. onCanPlay
          4. onLoadStart
          5. onProgress
      11. 剪贴板事件
          1. onCopy
          2. onCut
          3. onPaste
2. React组件之间的通信
   1. 组件间的通信
      1. 父组件向子组件通信
      2. 子组件向父组件通信
      3. 跨级组件通信
      4. 没有嵌套关系的组件通信
3. react 组件
   1. 组件间抽象
      1. 高阶组件
      2. 组合式组件开发实践
4. react 优化
   1. 组件性能优化
      1. 纯函数
      2. PureRender
      3. Immutable
      4. Lists and Key
5. 使用propTypes进行类型检查
   1. propTypes验证器
      1. PropTypes.array
      2. PropTypes.bool
      3. PropTypes.func
      4. PropTypes.number
      5. PropTypes.object
      6. PropTypes.string
      7. PropTypes.symbol
      8. PropTypes.node
      9. PropTypes.element
      10. PropTypes.instanceOf()
      11. PropTypes.oneOf()
      12. PropTypes.oneOfType()
      13. PropTypes.arrayOf()
      14. PropTypes.objectOf()
      15. PropTypes.shape()
      16. PropTypes.func.isRequired
      17. PropTypes.any.isRequired
6.  children
   1. children
   2. defaultProps
7. form
   1. 受控组件
   2. textarea
   3. select
8. react-router以及Redux基本概念
   1. 路由组件
   2. 组件的嵌套路由
   3. Redux基本概念
      1. 单向数据流
      2. Redux 介绍
9. 在React中使用Redux 数据流
   1. react-redux 安装以及框架介绍
   2. 学习react-redux
      1. react-redux项目结构
      2. action和reducer
      3. 介绍store
10. Redux 开发
    1. Redux 开发样例工程
       1. 官方demo介绍
       2. 项目结构
       3. action
       4. reducer
       5. redux组件开发
11.  实战-dva脚手架应用
12.  实战- ant design应用
13.  实战-项目搭建
14.  实战-登录注册
15.  导航切换页面内容路由
16.  列表页到详情页路由交互以及数据展示
17.  实战-下拉刷新点击加载
18.  实战-图片轮播