課程簡(jiǎn)介
教學(xué)體系圍繞React入門到實(shí)戰(zhàn)設(shè)計(jì)，分為4個(gè)部分
第一部分，圍繞React是什么？解決什么問(wèn)題？概述前端歷史，三大框架原理和React背景知識(shí)；
第二部分，介紹核心基礎(chǔ)知識(shí)，通過(guò)構(gòu)建頁(yè)面的流程，展示，錄入，請(qǐng)求，鏈接，詳細(xì)介紹React知識(shí)，通過(guò)本部分學(xué)習(xí)可以使用React完成業(yè)務(wù)開發(fā)；
第三部分，為了寫出更好的React代碼，更容易維護(hù)的代碼，更快速解決業(yè)務(wù)問(wèn)題，本部分介紹了React原理，設(shè)計(jì)模式和性能優(yōu)化；
第四部分，實(shí)踐出真知，通過(guò)從0到1搭建用于真實(shí)業(yè)務(wù)的React項(xiàng)目，從而加深對(duì)React的理解。
目標(biāo)收益
通過(guò)學(xué)習(xí)本次課程，學(xué)員將學(xué)習(xí)到以下內(nèi)容：
- 前端基礎(chǔ)核心知識(shí)
- React核心知識(shí)
- React進(jìn)階知識(shí)，原理，最佳實(shí)踐等
- React項(xiàng)目搭建實(shí)戰(zhàn)
培訓(xùn)對(duì)象
課程大綱
| React概述 |
? 前端架構(gòu) -前端架構(gòu)變遷 -三大框架對(duì)比 ? React 概述 -什么是React -主要版本及變化 -React 核心概念 -React 學(xué)習(xí)路線 |
| React基礎(chǔ) |
? 前端基礎(chǔ)課 -JS 核心知識(shí) -ECMAScript 新特性 -TS 核心知識(shí) ? JSX - 數(shù)據(jù)展示 -認(rèn)識(shí) JSX -JSX 本質(zhì) JSX 常用功能 ? 組件 -組件概述 -屬性 -狀態(tài) -生命周期 -添加事件 -原生 DOM -組件通信 -狀態(tài)提升 ? Hook - 另一種組件 -Hook 原理 -Hook 基礎(chǔ) -Hook 進(jìn)階 -自定義 Hook ? CSS - 美化組件 -CSS核心知識(shí) -React中的CSS -預(yù)處理器 -新特性與后處理器 -CSS模塊化 ? 表單 - 數(shù)據(jù)錄入 -原生表單 -React表單 -第三方庫(kù) -表單校驗(yàn) -表單組件 -破解高頻問(wèn)題： ①表單聯(lián)動(dòng) ②表單節(jié)流 ③異步表單 ④表單拆分 ⑤狀態(tài)管理 -context 介紹 -第三方狀態(tài)管理庫(kù) -響應(yīng)式數(shù)據(jù) rxjs ? 數(shù)據(jù)請(qǐng)求 -數(shù)據(jù)請(qǐng)求 -數(shù)據(jù)持久化 -請(qǐng)求錯(cuò)誤處理 路由 - 讓頁(yè)面可鏈接 -基本路由 -懶加載 -導(dǎo)航與鏈接 |
| React進(jìn)階 |
React原理 -設(shè)計(jì)思想 -虛擬DOM -diff算法 -協(xié)調(diào) -兩種架構(gòu) -SyntheticEvent ? 設(shè)計(jì)模式 -組件解耦 -架構(gòu)設(shè)計(jì) -組件設(shè)計(jì) -常用模式： ①組合繼承 ②HOC ③render props ? 性能優(yōu)化 -性能指標(biāo)與識(shí)別 -性能優(yōu)化方法 ? 最佳實(shí)踐 ? Node工程基礎(chǔ) -包管理工具 -package.json -正確使用依賴 -依賴安全問(wèn)題 ? 大型項(xiàng)目的挑戰(zhàn) |
| 組件庫(kù)實(shí)戰(zhàn) |
組件庫(kù)選型 ? 搭建 ? 發(fā)布 ? 踩坑經(jīng)驗(yàn) ? 最佳實(shí)踐 |
|
React概述 ? 前端架構(gòu) -前端架構(gòu)變遷 -三大框架對(duì)比 ? React 概述 -什么是React -主要版本及變化 -React 核心概念 -React 學(xué)習(xí)路線 |
|
React基礎(chǔ) ? 前端基礎(chǔ)課 -JS 核心知識(shí) -ECMAScript 新特性 -TS 核心知識(shí) ? JSX - 數(shù)據(jù)展示 -認(rèn)識(shí) JSX -JSX 本質(zhì) JSX 常用功能 ? 組件 -組件概述 -屬性 -狀態(tài) -生命周期 -添加事件 -原生 DOM -組件通信 -狀態(tài)提升 ? Hook - 另一種組件 -Hook 原理 -Hook 基礎(chǔ) -Hook 進(jìn)階 -自定義 Hook ? CSS - 美化組件 -CSS核心知識(shí) -React中的CSS -預(yù)處理器 -新特性與后處理器 -CSS模塊化 ? 表單 - 數(shù)據(jù)錄入 -原生表單 -React表單 -第三方庫(kù) -表單校驗(yàn) -表單組件 -破解高頻問(wèn)題： ①表單聯(lián)動(dòng) ②表單節(jié)流 ③異步表單 ④表單拆分 ⑤狀態(tài)管理 -context 介紹 -第三方狀態(tài)管理庫(kù) -響應(yīng)式數(shù)據(jù) rxjs ? 數(shù)據(jù)請(qǐng)求 -數(shù)據(jù)請(qǐng)求 -數(shù)據(jù)持久化 -請(qǐng)求錯(cuò)誤處理 路由 - 讓頁(yè)面可鏈接 -基本路由 -懶加載 -導(dǎo)航與鏈接 |
|
React進(jìn)階 React原理 -設(shè)計(jì)思想 -虛擬DOM -diff算法 -協(xié)調(diào) -兩種架構(gòu) -SyntheticEvent ? 設(shè)計(jì)模式 -組件解耦 -架構(gòu)設(shè)計(jì) -組件設(shè)計(jì) -常用模式： ①組合繼承 ②HOC ③render props ? 性能優(yōu)化 -性能指標(biāo)與識(shí)別 -性能優(yōu)化方法 ? 最佳實(shí)踐 ? Node工程基礎(chǔ) -包管理工具 -package.json -正確使用依賴 -依賴安全問(wèn)題 ? 大型項(xiàng)目的挑戰(zhàn) |
|
組件庫(kù)實(shí)戰(zhàn) 組件庫(kù)選型 ? 搭建 ? 發(fā)布 ? 踩坑經(jīng)驗(yàn) ? 最佳實(shí)踐 |
近期公開課推薦
