课程简介
教学体系围绕React入门到实战设计,分为4个部分
第一部分,围绕React是什么?解决什么问题?概述前端历史,三大框架原理和React背景知识;
第二部分,介绍核心基础知识,通过构建页面的流程,展示,录入,请求,链接,详细介绍React知识,通过本部分学习可以使用React完成业务开发;
第三部分,为了写出更好的React代码,更容易维护的代码,更快速解决业务问题,本部分介绍了React原理,设计模式和性能优化;
第四部分,实践出真知,通过从0到1搭建用于真实业务的React项目,从而加深对React的理解。
目标收益
通过学习本次课程,学员将学习到以下内容:
- 前端基础核心知识
- React核心知识
- React进阶知识,原理,最佳实践等
- React项目搭建实战
培训对象
课程大纲
React概述 |
• 前端架构 -前端架构变迁 -三大框架对比 • React 概述 -什么是React -主要版本及变化 -React 核心概念 -React 学习路线 |
React基础 |
• 前端基础课 -JS 核心知识 -ECMAScript 新特性 -TS 核心知识 • JSX - 数据展示 -认识 JSX -JSX 本质 JSX 常用功能 • 组件 -组件概述 -属性 -状态 -生命周期 -添加事件 -原生 DOM -组件通信 -状态提升 • Hook - 另一种组件 -Hook 原理 -Hook 基础 -Hook 进阶 -自定义 Hook • CSS - 美化组件 -CSS核心知识 -React中的CSS -预处理器 -新特性与后处理器 -CSS模块化 • 表单 - 数据录入 -原生表单 -React表单 -第三方库 -表单校验 -表单组件 -破解高频问题: ①表单联动 ②表单节流 ③异步表单 ④表单拆分 ⑤状态管理 -context 介绍 -第三方状态管理库 -响应式数据 rxjs • 数据请求 -数据请求 -数据持久化 -请求错误处理 路由 - 让页面可链接 -基本路由 -懒加载 -导航与链接 |
React进阶 |
React原理 -设计思想 -虚拟DOM -diff算法 -协调 -两种架构 -SyntheticEvent • 设计模式 -组件解耦 -架构设计 -组件设计 -常用模式: ①组合继承 ②HOC ③render props • 性能优化 -性能指标与识别 -性能优化方法 • 最佳实践 • Node工程基础 -包管理工具 -package.json -正确使用依赖 -依赖安全问题 • 大型项目的挑战 |
组件库实战 |
组件库选型 • 搭建 • 发布 • 踩坑经验 • 最佳实践 |
React概述 • 前端架构 -前端架构变迁 -三大框架对比 • React 概述 -什么是React -主要版本及变化 -React 核心概念 -React 学习路线 |
React基础 • 前端基础课 -JS 核心知识 -ECMAScript 新特性 -TS 核心知识 • JSX - 数据展示 -认识 JSX -JSX 本质 JSX 常用功能 • 组件 -组件概述 -属性 -状态 -生命周期 -添加事件 -原生 DOM -组件通信 -状态提升 • Hook - 另一种组件 -Hook 原理 -Hook 基础 -Hook 进阶 -自定义 Hook • CSS - 美化组件 -CSS核心知识 -React中的CSS -预处理器 -新特性与后处理器 -CSS模块化 • 表单 - 数据录入 -原生表单 -React表单 -第三方库 -表单校验 -表单组件 -破解高频问题: ①表单联动 ②表单节流 ③异步表单 ④表单拆分 ⑤状态管理 -context 介绍 -第三方状态管理库 -响应式数据 rxjs • 数据请求 -数据请求 -数据持久化 -请求错误处理 路由 - 让页面可链接 -基本路由 -懒加载 -导航与链接 |
React进阶 React原理 -设计思想 -虚拟DOM -diff算法 -协调 -两种架构 -SyntheticEvent • 设计模式 -组件解耦 -架构设计 -组件设计 -常用模式: ①组合继承 ②HOC ③render props • 性能优化 -性能指标与识别 -性能优化方法 • 最佳实践 • Node工程基础 -包管理工具 -package.json -正确使用依赖 -依赖安全问题 • 大型项目的挑战 |
组件库实战 组件库选型 • 搭建 • 发布 • 踩坑经验 • 最佳实践 |