精益 React 學習指南 （Lean React）序

Lean React

目前本書正在撰寫過程當中，將這個目錄結構先發出來，但願能獲得更多讀者的反饋，有興趣的朋友能夠回覆訂閱更新

關於

應該是在 2013 年我還在天貓的時候，在一次團隊會議中 Teamleader 邀請了來自 Facebook 的前端工程師來分享他們的開發棧，其中就有提到 React，當說到它有本身的獨特語法的時候（JSX 語法），我對此不屑一顧，認爲這樣的前端框架只會曇花一現，頂多可以在 Facebook 內部流行起來。 可是到目前爲止，React 的發展令我瞠目結舌，儼然已成爲前端開發棧中的主角。

當我真正深刻了解並在業務中使用 React 的時候，才意識到 React 是多麼難以想象。 在 React 出現之前咱們討論過 MVC，MVVM，Web Component，這些模式不乏有不少出衆的框架，但當咱們瞭解了 React 的設計事後，會發現 React 回到了前端界面開發的本質 數據和 UI 的結合表達。 React 的設計能夠簡單理解爲 組件的組合模式和數據的單向流動，正是這種極簡的架構設計才能成爲構建大型前端應用的基石。

雖然如今網上有不少關於 React 的書籍，課程等，可是整體看下來有如下的一些問題。

1. 內容主要是針對初級階段的 React 學習者

2. 沒有系統性介紹 React ，某些部分只是走馬觀花

3. 缺少真實業務開發的實戰介紹

因此打算寫一本電子關於 React 的電子書，以及 React 教學課程， 這本書的特色是：

1. 針對初級階段的讀者會系統性 step by step 的講解 React 的基礎知識

2. 系統性的介紹 React 開發生態中的技術

3. 有針對性的介紹 React 的特定主題，如數據可視化，自定義 Renderer, virtual DOM, 編輯器

4. 真實業務開發須要的資源或者組件的介紹

5. 實例代碼和理論結合講解

6. 針對部分章節配套視頻講解

簡單而言，本書的目標：

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 渲染器。

擴展：React 資源

擴展*: 各類 React 組件實現

擴展*：各類應用源碼分析