編輯推薦

√ React帶來Virtual DOM，填平PC與移動鴻溝，前端從此邁嚮全端。

√ Modern F2E時代開啓，ES2015+Redux+Flux+webpack+Babel技術棧來襲。

√ 全棧明星非React莫屬，工程方法、工程化工具、框架使用，盡在本書。

√ 實戰整閤全新語言標準、編程範式、框架組件、自動化工作流。

內容簡介

本書從現代前端開發的標準、趨勢和常用工具入手，由此引齣瞭優秀的構建工具webpack 和JavaScript庫React，之後用一係列的實例來闡述兩者的特色、概念和基本使用方法。隨著應用復雜度的增加，進而介紹瞭Flux 和Redux 兩種架構思想，並且使用Redux 對現有程序進行改造，最後介紹瞭在開發過程中齣現的反模式和性能優化方法。

作者簡介

張軒，前端開發工程師。曾經在百度、攜程就職，目前在蘋果公司擔任前端開發工程師。擁有豐富的Web開發經驗，喜歡追尋新技術，在GitHub上關注各種有趣的項目，同時緻力於前端工程化，並且有大型SPA項目的架構及開發經驗。他同時是一名業餘文學愛好者，在工作之餘寫一些短篇小說。

楊寒星，前端開發工程師。曾就職於愛奇藝、百度，目前在七牛雲負責前端開發與架構設計。對編寫優美的代碼、構建影響深遠的係統感興趣；專注於現代前端工程化方案搭建及大規模SPA的架構設計，對基於React體係的前端開發有著豐富的實踐經驗。

目錄

第1 章 現代前端開發 1

1．1 ES6――新一代的JavaScript 標準 1

1．1．1 語言特性 2

1．1．2 使用Babel 10

1．1．3 小結 13

1．2 前端組件化方案 13

1．2．1 JavaScript 模塊化方案 14

1．2．2 前端的模塊化和組件化 16

1．2．3 小結 18

1．3 輔助工具 19

1．3．1 包管理器（Package Manager） 19

1．3．2 任務流工具（Task Runner） 23

1．3．3 模塊打包工具（Bundler） 26

第2 章 webpack 28

2．1 webpack 的特點與優勢 28

2．1．1 webpack 與RequireJS、browserify 29

2．1．2 模塊規範 30

2．1．3 非javascript 模塊支持 31

2．1．4 構建産物 32

2．1．5 使用 33

2．1．6 webpack 的特色 35

2．1．7 小結 38

2．2 基於webpack 進行開發 38

2．2．1 安裝 38

2．2．2 Hello world 39

2．2．3 使用loader 43

2．2．4 配置文件 46

2．2．5 使用plugin 48

2．2．6 實時構建 50

第3 章 初識React 52

3．1 使用React 與傳統前端開發的比較 54

3．1．1 傳統做法 54

3．1．2 全量更新 56

3．1．3 使用React 57

3．1．4 小結 59

3．2 JSX 59

3．2．1 來曆 59

3．2．2 語法 60

3．2．3 編譯JSX 63

3．2．4 小結 64

3．3 React+webpack 開發環境 64

3．3．1 安裝配置Babel 64

3．3．2 安裝配置ESLint 65

3．3．3 配置webpack 66

3．3．4 添加測試頁麵 68

3．3．5 添加組件熱加載（HMR）功能 70

3．3．6 小結 71

3．4 組件 72

3．4．1 props 屬性 73

3．4．2 state 狀態 76

3．4．3 組件生命周期 78

3．4．4 組閤組件 80

3．4．5 無狀態函數式組件 82

3．4．6 state 設計原則 82

3．4．7 DOM 操作 83

3．5 Virtual DOM 85

3．5．1 DOM 85

3．5．2 虛擬元素 86

3．5．3 比較差異 88

第4 章 實踐React 91

4．1 開發項目 91

4．1．1 將原型圖分割成不同組件 92

4．1．2 創造每個靜態組件 93

4．1．3 組閤靜態組件 96

4．1．4 添加state 的結構 99

4．1．5 組件交互設計 100

4．1．6 組閤成為最終版本 102

4．1．7 小結 105

4．2 測試 106

4．2．1 通用測試工具簡介 106

4．2．2 React 測試工具及方法 108

4．2．3 配置測試環境 109

4．2．4 Shallow Render 110

4．2．5 DOM Rendering 114

4．2．6 小結 116

第5 章 Flux 架構及其實現 117

5．1 Flux 117

5．1．1 單嚮數據流 118

5．1．2 項目結構 119

5．1．3 Dispatcher 和action 119

5．1．4 store 和Dispatcher 122

5．1．5 store 和view 124

5．1．6 Flux 的優缺點 126

5．1．7 Flux 的實現 126

5．2 Redux 126

5．2．1 動機 127

5．2．2 三大定律 127

5．2．3 組成 129

5．2．4 數據流 136

5．2．5 使用middleware 137

第6 章 使用Redux 142

6．1 在React 項目中使用Redux 142

6．1．1 如何在React 項目中使用Redux 142

6．1．2 react-redux 147

6．1．3 組件組織 152

6．1．4 開發工具 155

6．2 使用Redux 重構Deskmark 157

6．2．1 概要 157

6．2．2 創建與觸發action 158

6．2．3 使用middleware 159

6．2．4 實現reducer 163

6．2．5 創建與連接store 165

第7 章 React＋Redux 進階 168

7．1 常見誤解 168

7．1．1 React 的角色 169

7．1．2 JSX 的角色 169

7．1．3 React 的性能 170

7．1．4 “短路”式性能優化 171

7．1．5 無狀態函數式組件的性能 172

7．2 反模式 173

7．2．1 基於props 得到初始state 173

7．2．2 使用refs 獲取子組件 176

7．2．3 冗餘事實 178

7．2．4 組件的隱式數據源 180

7．2．5 不被預期的副作用 182

7．3 性能優化 183

7．3．1 優化原則 183

7．3．2 性能分析 184

7．3．3 生産環境版本 187

7．3．4 避免不必要的render 188

7．3．5 閤理拆分組件 199

7．3．6 閤理使用組件內部state 200

7．3．7 小結 203

7．4 社區産物 203

7．4．1 Flux 及其實現 203

7．4．2 Flux Standard Action 204

7．4．3 Ducks 206

7．4．4 GraphQL/Relay 與Falcor 207

7．4．5 副作用的處理 209

前言/序言

對一個前端工程師來說，這是最壞的時代，也是最好的時代。

在這樣的領域裏，每一年都不會風平浪靜。如果說2014 年是屬於MVVM，屬於Angular 的，那麼2015 年稱為React 元年並不為過。開發團隊的不斷完善以及React社區井噴式的發展讓這個誕生於2013 年的框架及其生態趨於成熟（就在不久前，React 官方宣布將在版本號0.14.7 後直接使用版本號15.0.0），大量團隊在生産環境中的實踐經驗也讓引入React 不再是一件需要瞻前顧後反復調研的事情，如果React 適閤你，那麼現在就可以放心地使用瞭。

可是對於很多還沒有深入實踐過React 開發的工程師來說，React 到底做瞭什麼？React 適閤什麼樣的場景？又應該如何投入使用？在具體業務邏輯的實現上，怎樣纔是最佳的實踐？這些都是需要去瞭解與思考的問題。

本書將從一個傳統前端工程師的角度齣發，介紹React 産生的背景及其架構應用，並結閤一些由淺入深的例子幫助讀者掌握基於React 的Web 前端開發方法。

——楊寒星

前端開發是一個充滿變化的領域，它的發展速度快得驚人。各種各樣的新技術、新標準層齣不窮，GitHub 上最火的語言是JavaScript，最大的包管理器是npm。新的流行框架日新月異，幾年前的那些先驅者還是工程師口中津津樂道的寵兒，比如YUI、Mootools、jQuery 等，今天已經不再那麼流行，曾經名噪一時的Backbone 框架，現在也漸漸褪去熱度，繼往開來的Angular、Vue.js、Ember 等MVVM 框架競相登場，再加上當紅的新寵React.js 大行其道，讓好多工程師仿佛迷失在瞭大潮中。

前端開發是一個新興的行業。幾年前，被稱作重構工程師的我們還都在對著Photoshop 切圖，把一些jQuery 插件復製來復製去，完成一些炫酷的幻燈圖特效，不斷地處理著很多IE 瀏覽器的怪異Bug。這些功力其實到現在還能滿足大部分的Web開發，完成大部分的項目。我們不妨把它稱為“古典時代”，它影響深遠，但是最終會慢慢遠去。

在當前這個潮流下，很多工程師會拋齣這樣的言論：

學習一些新的工具、框架有什麼用？業界發展得這麼快，等我學會瞭這些，它也許已經“壽終正寢”瞭。天天跟風一樣地追求各種框架，學會瞭也是迷茫，這些框架沒有用武之地。旁門左道，天天布道沒有用的東西，僞前端。

隨著技術的進化、移動應用的飛速發展，一個前端工程師的職責不像原來那樣隻要把圖轉換成網頁那麼簡單。如今産生瞭各種類型的新名詞——Hybird 應用、全端工程師、SPA 等，各有其特定的應用場景。任何框架的發明和創造都有它們一定的曆史原因，隻有解決瞭需求的痛點，纔能讓工程師更快地解決難題。在我們學習的過程中，可以發現它背後的思想和解決方案，進而更好地充實自己。做技術的人最重要的就是保持開放的態度，有一顆好奇心，持續不斷地學習。

在前端開發中占最重要部分的JavaScript，也隨著這些框架在慢慢進化著，原來令人不斷詬病的缺點正在被標準製定者慢慢修補，新的特性不斷浮齣水麵。前端工程師正處在發展最迅速的時代，這應該是一個讓人興奮的時代，猶如工業革命一樣，每個工程師都見證著一場偉大的前端革命。

本書不僅講述瞭怎樣使用React 和webpack 開發一些應用，而且希望通過一係列的介紹讓每個工程師都能站在前端技術的潮頭，擁抱變化，學習新的標準和技術，成為新技術的弄潮兒。

——張軒

本書麵嚮的讀者

本書適閤有一定前端開發經驗尤其是有JavaScript 基礎的讀者，如果你還沒有接觸過前端開發這個領域，請先閱讀前端開發的入門書籍。

本書的代碼示例

你可以在這裏下載本書的代碼示例：https://github.com/vikingmute/webpack-reactcodes。

本書的代碼執行環境

本書中默認的開發環境是 Node.js 5.0.0，書中介紹到的幾個庫的版本分彆為React@15.0.1、webpack@1.12.14 及Redux@3.2.1，其他如未特彆說明的則為最新版本。

比較適閤入門和快速的做齣可見的東西

書沒那麼厚，衝著這個係列買的.

商品很給力，正版，字跡清晰，性價比高

好好好好好好好好好好好好好好好好好好好好好

五本書裝瞭一個箱子，一個紙袋，有兩本磕碰劃痕，說的是第二天到，結果是第三天，快遞也不給力瞭！

這個寶貝非常好，很適閤我，超級喜歡

前端變遷就是快，書齣幾月就過時瞭

書不錯，希望能很快掌握新技術，，

做活動買的，質量可以。