極客時間出品的《React實戰進階45講》由王沛所作,王沛是eBay中國研發中心資深技術專家。本專欄帶你掌握當下最熱門的前端利器。
《React實戰進階45講》課程背景
React 是目前最為流行的前端 UI 開發框架之一,根據 Hacker News 釋出的招聘趨勢資料,React 已經連續 12 個月成為最受招聘方歡迎的技能,需求指數一度達到 25.93 %,足可見 React 在業內的被認可度。
在 React 出現之前,基於 HTML 的前端介面開發正變得越來越複雜,如何將來自於伺服器端或者使用者輸入的動態資料高效地反映到複雜的使用者介面上,是最讓人頭疼的難題。而 React 則很好地解決了這個問題,使用 React 可以非常輕鬆地建立使用者互動介面,在資料改變時更高效地更新渲染介面。
React 使用宣告式的語法幫助開發者直觀地描述和組織複雜的介面邏輯,讓前端應用開發變得越來越容易;React 繁榮的生態圈還為開發者提供了大量的最佳實踐;活躍的社群則讓你碰到問題可以迅速找到解決方案。
React 不僅讓你能夠從容應對大型複雜前端應用的開發,其程式設計思想還能應用到 React Native 原生 App 開發,伺服器端渲染的後端開發。
無論你是沒有接觸過 React 的前端工程師,還是移動應用開發人員,或者僅僅是想跨界瞭解前端開發現狀的程式設計師,學習 React 不僅能讓你豐富自身的技能庫,掌握當下最熱門的前端開發利器,同時還能大大提升職場競爭力,邁向更高的臺階。
課程特點
本課程會由淺入深介紹 React 及相關生態圈專案的基本概念、設計模式、最佳實踐以及效能優化方法。教學過程採用 PPT 演示結合程式碼實踐的形式,在講清楚概念的同時,還會結合具體場景,介紹如何將概念和模式應用到實際案例中。
通過本課程,你將全面學習 React 相關技術,瞭解其設計模式和最佳實踐,掌握使用 React 開發大型專案的能力。
每節課的視訊下方都列出了學習之前需要掌握的 React 基礎知識點,並提供了相關文件連結。
學習過程中無需在本地搭建 React 環境,直接 fork 我們的線上專案地址即可進行編碼實戰。
《React實戰進階45講》講師簡介
王沛,現擔任 eBay 中國研發中心資深技術專家,負責 eBay 內部前端框架的研發。
是國內第一批 React 的實踐者和佈道者,建立了 Rekit 開源專案:專屬的 React 開發 IDE,目前在 Github 有超過 3000 Star。
曾任職於 IBM 和 SAP,主導了多個 UI 框架和大型雲產品的前端架構和開發,在 IBM 期間期間參與 Dojo 開源專案,成為程式碼貢獻者,參與建立和設計了基於 Dojo 的 GridX 專案。
在 InfoQ 發表過多篇文章,撰寫過《深入淺出 React》專欄,並在 QCon 大會上做過演講。出版過書籍《征服Ajax:Web2.0開發技術詳解》,《Web2.0介面設計模式》。
《React實戰進階45講》課程目錄
第一章 :React 基礎 (9講)
01 | React出現的歷史背景及特性介紹
02 | 以元件方式考慮UI的構建
03 | JSX 的本質 : 不是模板引擎,而是語法糖
04 | React元件的生命週期及其使用場景
05 | 理解 Virtual DOM 及 key 屬性的作用
06 | 元件設計模式 : 高階元件和函式作為子元件
07 | 理解新的 Context API 及其使用場景
08 | 使用腳手架工具建立 React 專案
09 | 打包和部署
第二章 :React 生態圈 (12講)
10 | Redux(1) : 前端為何需要狀態管理庫
11 | Redux(2) : 深入理解 Store, Action, Reducer
12 | Redux(3) : 在React中使用Redux
13 | Redux(4) : 理解非同步 Action,Redux 中介軟體
14 | Redux(5) : 如何組織Action和Reducer
15 | Redux(6) : 理解不可變資料(Immutability)
16 | React Router(1):路由不只是頁面切換,更是程式碼組織方式
17 | React Router(2):引數定義,巢狀路由的使用場景
18 | UI元件庫對比和介紹:Ant.Design,Material UI,Semantic UI
19 | 使用Next.js建立React同構應用
20 | 使用Jest,Enzyme等工具進行單元測試
21 | 常用開發除錯工具:ESLint,Prettier,React DevTool,Redux DevTool
第三章 :構建可維護可擴充套件的前端應用 (6講)
22 | 前端專案的理想架構:可維護,可擴充套件,可測試,易開發,易建構
23 | 拆分複雜度(1):按領域模型(feature)組織程式碼,降低耦合度
24 | 拆分複雜度(2):如何組織component,action和reducer
25 | 拆分複雜度(3):如何組織React Router的路由配置
26 | 使用Rekit(1):建立專案,程式碼生成和重構
27 | 使用Rekit(2):遵循最佳實踐,保持程式碼一致性
第四章 :常見場景的最佳實踐 (13講)
28 | 使用React Router管理登入和授權
29 | 實現表單(1):初始資料,提交和跳轉
30 | 實現表單(2):錯誤處理,動態表單元素,內容動態載入
31 | 列表頁(1):搜尋,資料快取和分頁
32 | 列表頁(2):快取更新,載入狀態,錯誤處理
33 | 頁面資料需要來源多個請求的處理
34 | 內容頁的載入與快取
35 | 基於React Router實現分佈操作
36 | 常見頁面佈局的實現
37 | 使用 React Portals 實現對話方塊,使用 antd 對話方塊
38 | 整合第三方JS庫:以 d3.js 為例
39 | 基於路由實現選單導航
40 | React 中拖放的實現
第五章:React效能優化 (5講)
41 | 效能永遠是第一需求:時刻考慮效能問題
42 | 網路效能優化:自動化按需載入
43 | 使用Reselect避免重複計算
44 | 下一代 React:非同步渲染
45 | 使用Chrome DevTool進行效能調優
課程收穫
全面學習 React 常用技術棧;
深入理解 React 設計模式;
常見場景下的程式設計實戰指南;
掌握用 React 開發大型專案的能力。
適宜人群
有實際專案開發經驗的前端開發工程師;
iOS、Android 移動應用開發工程師;
對 React 相關技術感興趣的技術人員。
注意:學習本課程之前,你需要先掌握 HTML、JavaScript 方面的基本知識,簡單閱讀過 React 的官方文件,並具備前端專案的實際開發經驗。
訂閱價格:
為回報猿人學的粉絲,所有通過我分享的二維碼購買的使用者,請加我微訊號:dismissmewp,備註:返現。
享受完其它優惠後,我再給大家立即返¥12元現金。
我的公眾號:猿人學 Python 上會分享更多心得體會,敬請關注。
***版權申明:若沒有特殊說明,文章皆是猿人學 yuanrenxue.com 原創,沒有猿人學授權,請勿以任何形式轉載。***