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

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

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

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

¥266.00
难度 中级 时长 12小时 学习人数 705 综合评分 10.00

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

张轩
讲师

高级前端工程师

课程预览

检测到您还没有关注慕课网服务号,无法接收课程更新通知。请扫描二维码即可绑定
重新观看

全流程实战课程,让你轻松学会企业级开发模式

解锁项目开发的正确姿势,实现优雅逆袭

  • 全流程开发

    从设计稿分析、单页面开发、测试、
    多页面整合、后端MOCK 到部署上
    线,由浅入深学习 React 实际应用
    的开发模式和流程。

  • React 组件化

    以组件化思想开发,从分析、设计,
    到组件拆分、组合,在实际项目开发
    中,彻底理解组件化开发。

  • React 组件测试

    React 单元测试是开发重要的环
    节,本课程讲解测试的分类,方法以
    及如何运用,提高开发质量。


  • 前后端分离开发

    前后端分离开发已是开发项目的主流
    形式。怎样使用 Mock Server,快
    速和后端开发对接,才是实际工作中
    的重要流程。

  • 项目部署上线

    本课程讲解生产环境和开发环境的异
    同。最终实现一个可以在线使用的项
    目。

以“在线账本”项目为主线, 掌握React应用开发精髓

精通组件测试的奥义,体验前后端分离开发的艺术

  • 1

    设计图

    分析设计图
    拆分不同页面
    代码文件结构和规范

  • 2

    组件分解

    拆分组件
    展示型组件
    容器型组件
    PropTypes 检查类型
    TDD 的方式开发组件

  • 3

    组件组合

    组合已有的静态组件
    分析设计 State 结构
    分析数据流
    添加逻辑交互

  • 4

    组件测试

    测试框架(Jest)介绍
    测试工具(Enzyme)介绍
    价格列表组件测试分析和用例编写
    月份组件测试分析和测试用例编写
    为首页的功能添加集成测试


  • 8

    部署

    开发环境和生产环境的异同
    React 基本性能优化
    为生产环境 build 整个项目
    云平台 Leancloud 简介
    使用 Leancloud 部署项目

  • 7

    对接后端接口

    下一代的 HTTP 库: Axios
    使用 Axios 发送异步请求
    改造首页支持异步流程
    改造创建条目和图表页
    怎样处理异步的测试
    升级测试用例 支持异步测试

  • 6

    后端 Mock 环境

    前后端分离开发概念
    Mock Server 概念
    使用 JSON server 创建
    Mock Server
    分析和创建 Restful 接口
    使用 Postman 对接口进行测试

  • 5

    多页面结合

    分析和优化整个应用 state 结构
    使用高阶组件实现 Context 重用
    使用 children 重构 Tabs 组件
    使用 Recharts 实现图表
    首页 、创建页和编辑页整合

主流高效的开发技术,让你项目实现之路事半功倍

React 基础

React 16
React 理念
Context
高阶组件
children

React 工具

Ionicon
ReactRouter
Recharts
Create-React-APP

测试及后端

Jest
Enzyme
JSONServer
Axios
Leancloud

学员专享增值服务

问答专区

关于课程的问题都可在问答区随时提问,

讲师会进行集中答疑

源码开放

课程案例代码完全开放给你,你可以根据

所学知识自行修改、优化

适合人群

本课程适合会使用基础的 React,但在缺乏实际项目经验;前端开发
者,想进一步提升开发技能。

技术储备要求

掌握前端知识 HTML、CSS、JavaScript(ES6)
掌握 React 基础知识
了解 Bootstrap 基础,并简单的应用
建议先学习免费课程《基于实例的 React16 傻瓜课程》

环境参数

  • 环境配置 Node >= 6.5
  • 框架 React>= 16.5
  • 脚手架 Create-React-App >= 1.5.2
  • 框架 React-Router >= 4.0
  • 框架 Bootstrap >= 4.0
  • 工具库 Axios >= 0.18
  • 测试工具 enzyme >= 3.7.0
  • 数据接口 JSON-Server >= 0.14
  • 编辑器IDE Visual Studio Code
提问
数据加载中...
意见反馈 帮助中心 APP下载
官方微信

学习咨询

选课、学习遇到问题?

扫码添加指导老师 1V1 帮助你!

添加后老师会第一时间解决你的问题