序

前言



01 初入React 世界

1.1 React 簡介

1.2 JSX 語法

1.3 React 元件

1.4 React 資料流程

1.5 React 生命週期

1.6 React 與DOM

1.7 元件化實例：Tabs 元件

1.8 小結



02漫談 React

2.1 事件系統

2.2 表單

2.3 樣式處理

2.4 元件間通訊

2.5 元件間抽象

2.6 元件效能最佳化

2.7 動畫

2.8 自動化測試

2.9 元件化實例：最佳化 Tabs 元件

2.10 小結



03解讀React 原始程式

3.1 初探React 原始程式

3.2 Virtual DOM 模型

3.3 生命週期的管理藝術

3.4 解密setState 機制

3.5 diff 演算法

3.6 React Patch 方法

3.7 小結



04 認識Flux 架構模式

4.1 React 獨立架構

4.2 MV* 與Flux

4.3 Flux 基本概念

4.4 Flux 應用實例

4.5 解讀Flux

4.6 小結



05 深入Redux 應用架構

5.1 Redux 簡介

5.2 Redux middleware

5.3 Redux 非同步流

5.4 Redux 與路由

5.5 Redux 與元件

5.6 Redux 應用實例

5.7 小結



06 ?Redux 高階運用

6.1 高階reducer

6.2 Redux 與表單

6.3 Redux CRUD 實戰

6.4 Redux 效能最佳化

6.5 解讀Redux.

6.6 解讀react-redux

6.7 小結 .



07 React 服務端繪製

7.1 React 與服務端範本

7.2 React 服務端繪製

7.3 小結



08玩轉React 視覺化

8.1 React 結合Canvas 和SVG

8.2 React 與視覺化元件

8.3 Recharts 元件化的原理

8.4 小結



A 開發環境

A.1 執行開發環境：Node.js

A.2 ES6 編譯工具：Babel

A.3 CSS 前置處理器：Sass

A.4 測試環境：Karma

A.5 工程建置工具：webpack .

A.6 安裝React 環境

A.7 小結第3 篇 實戰專案



B 程式開發標準

B.1 使用ESLint

B.2 使用EditorConfig

B.3 小結



C Koa middleware

C.1 generator

C.2 middleware 原理分析

序



　　React 是目前前端工程化最先進的技術。2004 年Gmail 的推出，讓大家猛然發現，單頁應用的互動也可以如此流暢。2010 年，前端單頁應用架構接踵而至，Backbone、Knockout、Angular，各領風騷。2013 年，React 從天而降，獨樹一幟：單向綁定、宣告式UI，大幅簡化了大型應用的建置。Strikingly 接觸到React 之後不久，就開始用React 重構前端。



　　當時我想，2013 年或許會因為React 的出現，成為前端社區的分水嶺。今天回看，確實如此。



　　毋庸置疑，React 已經是前端社區里程碑式的技術。React 及其生態圈不斷提出前端工程化解決方案，領導潮流。在過去一兩年裡，React 也是各種技術交流分享會裡炙手可熱的議題。



　　React 之所以流行，在於它平衡了函數式程式設計的約束與工程師的實用主義。



　　React 從函數式程式設計社區中參考了許多約定：把DOM 當成純函數，不僅免去了煩瑣的手動DOM 操作，還開啟了多平台繪製的美麗新世界；在此之上，React 社區進一步強調不可變性（immutability）和單向資料流程。這幾個約定將原本很複雜的程式化簡，加強了程式的可預測性。



　　React 也有實用主義的一面，它不強迫工程師只用函數式，而是提供了簡單粗暴的方法，方便你實現各種功能——想直接操作DOM 也可以，想雙向綁定也沒問題。函數式約定搭配實用主義，讓我不禁想起Facebook 一直宣導的駭客之道：Done is better than perfect。



　　React 還是一種年輕的技術，網上能學習的材料也比較零散。本書由淺到深，一步步地帶領讀者了解React 核心思想和實現機制。因為React 受到了很多關注，社區裡出現了各種建立大型React 應用的方案。本書歸納了目前社區裡的最佳做法，方便讀者立刻在實戰中使用。