React16组件化+测试+全流程 实战在线账本项目

React16组件化+测试+全流程实战“在线账本”项目

从设计图到上线，精通组件化思维和组件测试，掌握大厂的开发模式和流程

课程介绍

本门课以”在线账本”为实战项目，以 ‘React理念’为指导思想，让大家从头到尾的实践一个项目是怎样从设计图到最终的线上产品。课程将一步一步带你从设计图出发，到组件拆分，组合，状态分析，数据流分析，组件测试、页面整合，再到搭建 Mock Server，对接后端接口，实现前后端分离开发，最终到部署上线。由浅入深的学习 React 的实际应用的开发模式和流程。

课程目录

第1章 课程介绍

介绍了整个课程的背景知识，项目简介，学习流程，可以掌握的知识点，以及学习方法和前置知识

第2章 设计稿：从蓝图开始

从原型图出发，分析整个应用的需求和功能点，最后规定了文件结构和代码规范。

第3章 首页：庖丁解牛

使用 React 理念开发首页的功能，通过组件拆分-展示型组件开发的流程开发所有的展示型组件，并且学习 PropTyps 验证 React组件的属性。

第4章 首页：乐高积木

继续 React 理念的开发 ，通过 展示型组件组合 – state和数据流分析 -添加 state 和交互 这样的流程完成首页的开发。

第5章 组件测试

简介了测试的基本概念，介绍 通用测试工具 Jest 和 React 测试框架 enzyme，然后使用这两种工具完成首页所有展示型组件的测试和首页的集成测试。

第6章 创建记账条目页面

分析创建页面的需求，学习 SPA 的概念，使用 React-Router 创建路由，并且使用 TDD 的方式开发创建页面的展示型组件。

第7章 多页面结合

分析多页面的 state 结构，并且提出优化方案，简介 Redux 和不使用 Redux 的原因使用 Context 将状态和操作方法抽象到顶层，最后整合整个应用的所有数据操作逻辑。

第8章 后端 Mock 环境

简介 前后端分离开发和 mock server 的概念，然后学习怎样使用 JSON server 快速搭建一个 mock server，并且学会使用 Postman 测试接口。

第9章 动静结合

学习 Axios 的基本用法，然后使用 Axios 改造应用对接后端接口，并且实现所有异步操作。

第10章 锦上添花：图表分析页面

学习怎样将开源图表库 Recharts 集成到首页的功能中。

第11章 项目部署

学习 生产环境和开发环境的异同，简介Leancloud，以及怎样使用 Leancloud 部署项目。

第12章 课程总结

本课程回顾和总结。

资源目录截图