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