Lean React
目前本書正在撰寫過程中,將這個目錄結構先發出來,希望能得到更多讀者的反饋,有興趣的朋友可以回覆訂閲更新
關於
應該是在 2013 年我還在天貓的時候,在一次團隊會議中 Teamleader 邀請了來自 Facebook 的前端工程師來分享他們的開發棧,其中就有提到 React,當説到它有自己的獨特語法的時候(JSX 語法),我對此不屑一顧,認為這樣的前端框架只會曇花一現,頂多能夠在 Facebook 內部流行起來。 但是到目前為止,React 的發展令我瞠目結舌,儼然已成為前端開發棧中的主角。
當我真正深入瞭解並在業務中使用 React 的時候,才意識到 React 是多麼不可思議。 在 React 出現以前我們討論過 MVC,MVVM,Web Component,這些模式不乏有很多出眾的框架,但當我們瞭解了 React 的設計過後,會發現 React 回到了前端界面開發的本質 數據和 UI 的結合表達。 React 的設計可以簡單理解為 組件的組合模式和數據的單向流動,正是這種極簡的架構設計才能成為構建大型前端應用的基石。
雖然現在網上有很多關於 React 的書籍,課程等,但是總體看下來有以下的一些問題。
-
內容主要是針對初級階段的 React 學習者
-
沒有系統性介紹 React ,某些部分只是蜻蜓點水
-
缺乏真實業務開發的實戰介紹
所以打算寫一本電子關於 React 的電子書,以及 React 教學課程, 這本書的特點是:
-
針對初級階段的讀者會系統性 step by step 的講解 React 的基礎知識
-
系統性的介紹 React 開發生態中的技術
-
有針對性的介紹 React 的特定主題,如數據可視化,自定義 Renderer, virtual DOM, 編輯器
-
真實業務開發需要的資源或者組件的介紹
-
實例代碼和理論結合講解
-
針對部分章節配套視頻講解
簡單而言,本書的目標:
The Best React Book For React Beginners And Professionals
本書內容
這本書我會由簡單到複雜的帶領大家進入 React 的世界, 其中 1 - 3 章節都是 React 的基礎知識,需要提醒讀者的是大多數的基礎知識都可以通過 React 的官方文檔學習,如果對英語敏感的讀者也可以看翻譯。 對比官方文檔本書 1 - 3 章會循序漸進的帶領大家學習 React 基礎知識,其中會有些自己的見解和領悟希望能讓讀者更容易理解學習,每個章節都會有一個實例作業,所以讀者可以同時結合官方文檔和本書進行學習。
有 React 基礎的讀者可以跳過 1 - 3 章節 , 後面的章節都是獨立的,可以打亂順序挑選閲讀
文章的樣例代碼都在放在 https://github.com/leanklass/leanreact/ 的不同分支上,可以直接 checkout 分支按照 README 的指示運行。
第一章:React 入門
本章會帶領大家重 0 到 1 入門 React,會涉及到 React 背景和應用範圍的介紹。 然後會介紹 React 的基礎知識,包括 JSX 語法和 React 組件,Flux 模式介紹等。
-
1.1 React 介紹
-
1.2 JSX 語法
-
1.3 React 組件
-
1.4 React 組件生命週期和方法
-
1.5 React 與 DOM
-
1.6 Flux
第二章:React 工程化
前面一章我們已經熟悉了 React 的基礎,能夠掌握通過 JSX 和 React 的思維來完成業務應用,但是真正的前端項目構建不僅僅是業務代碼本身,我們需要搭建一整套完整的前端開發流程,也就是前端工程化。在本章中將會講解前端工程化相關的知識,並通過 gulp,webpack 等工具搭建出一套完整的 React 前端開發環境。
-
2.1 前端工程化概述
-
2.2 Webpack
-
2.3 Gulp
-
2.4 webpack + gulp 構建完整前端工作流
-
2.5 Webpack 進階
第三章:React 與 Redux
Redux 是目前 flux 模式最流行的實現,本章節會帶領大家瞭解 Redux 的設計概念, 閲讀 Redux 的源碼,以及通過實例應用講解 Redux + React 的開發模式。
-
3.1 redux 介紹
-
3.2 react-redux todoApp
-
3.3 理解 redux 中間件
-
3.4 掌控 redux 異步
-
3.5 compose redux sagas
第四章:React 進階
我們已經能基於 React 實現基本的交互邏輯,但是在使用 React 的過程中還是可能會有些不確定的地方或者一些特殊的功能不知道怎麼實現,可能會問 React 中有沒有一些 Best practices 或者 Good Pattern 可以參考的,本章會在各個維度介紹之前沒有講過的 React 特性。
-
4.1 react 代碼規範
-
4.2 react patterns
-
4.3 react magics and tricks
-
4.4 react 動畫
-
4.5 不可變數據與 React
-
4.6 性能管理
第五章:React 實戰業務開發
真實業務開發中會遇到很多很多的問題,本章會把大多數在真實業務開發中遇到的場景進行講解,涉及到如具體組件的開發,表單處理,後台交互等具體開發場景問題。
第六章:React 與 服務端渲染
React 除了可以在瀏覽器端渲染以外, 還可以在服務器端渲染 HTML, 本章節會實現一個 基於 express + React 模板渲染器,通過這個渲染器渲染第一章的 HTML。
第七章:React 與 數據可視化
數據可視化的需求日益增加,React 同樣可以勝任數據可視化的工作,本章節會帶領大家通過 React 實現一些基本的圖表,講解 React 和 D3.js 如何協作。
第八章:React 內部實現
當深入的學習和使用過 React 後, 一定會對 React 的內部運作機制好奇,本章節會部分介紹 React 內部的一些核心工作機制, 包括 Virtual DOM 算法, 生命週期內部運作方式。
第九章:React 自定義 Renderer
React 獨特的地方在於, virtual dom 這種組件的組合模式可以應用於很多地方, 除了 ReactDOM 渲染器實現外,我們可以實現一個自己的渲染器, 比如 D3 渲染器, PIXI.JS 渲染器, Three.js 渲染器。