现代JS编程 |
通过JS ES5 jQuery迁移到ES7,babel,React的案例剖析讲解:
- 什么是现代JS编程
- 为什么要使用新的ES标准
- 如何使用新的JS规范特性
- ES6、ES7新特性简介
|
React的技术特点与生态圈 |
同一案例对比,jQuery、AngularJS 1.x与React的不同实现方式
- DOM与vDOM
- 组件封装
- 属性、状态
- 统一事件处理
- 开发体验
- 浏览器端渲染
- React native简介
React项目的建立与调试
- 手动建立新项目的步骤
- 使用脚手架快速建立项目
- 启动调试环境,及debug的方法
案例实践:通过create-react-app工具,建立并调试第一个react项目
|
React编程基础 |
通过案例剖析与动手练习讲解:
- React项目的入口点
- 使用React.createElement创建DOM元素
- 使用JSX语法糖简化编码
- 创建可以复用的组件
- createClass
- 简单的无状态函数
- 扩展React.Component类
- 使用属性传递数据
- 组件的样式
- 事件的处理
- 状态相关知识
- 组件的组合
- 组合不同的组件
- 通过key区分组件
- 组件的生命期与回调函数
案例实践:将第一个React项目改造为一个Todo-list应用
|
深入React的项目结构 |
通过案例剖析与动手练习讲解:
代码文件的分割与组织
样式应该在CSS还是JS
状态应该放置在哪个组件中
状态、属性和事件的传递链
案例实践:重构前述Todo-ilst应用,使其适应企业化协作开发
|
Flux与Redux |
- Flux架构简介
- Redux简介
- React-Redux使用方法:
- 创建Store、Action与Reducer
- 复合Reducer
- 订阅状态变更
- 展示组件与容器组件
- 容器组件的自动化生成
案例实践:将前述实践Todo-list应用改造为Redux架构
|
React项目的质量保障 |
- 静态分析与语法检查
- JS与静态类型
- 状态与不可变对象
- React项目的自动化测试
案例实践:为前述实践项目增加静态分析、静态类型、不可变对象及自动化测试
|
React编程总结 |
React带来的前端变革
React的项目搭建方式与编程技术
Flux的优势与使用场景
妥善使用工具链,保障React项目的质量
|