快速上手React編程

第Ⅰ部分　React基礎

第1章  初積React  3

1.1  什么是React  4

1.2 React解決的問題  5

1.3  使用React的好處  6

1.3.1  簡單性  6

1.3.2  速度和可測試性  11

1.3.3  生態(tài)和社區(qū)  12

1.4 React的缺點  13

1.5 React如何與Web應用集成  13

1.5.1  React類庫和渲染目標  14

1.5.2  單頁面應用和React  15

1.5.3  React技術棧  17

1.6  第一個React項目：

Hello World  18

1.7  測驗  21

1.8  小結  21

1.9  測驗答案  22

第2章　React起步  23

2.1  內(nèi)嵌元素  23

2.2  創(chuàng)建組件類  26

2.3  屬性  29

2.4  測驗  34

2.5  小結  34

2.6  測驗答案  34

第3章　JSX  35

3.1 JSX是什么？它有什么優(yōu)點  36

3.2  理解JSX  38

3.2.1  使用JSX創(chuàng)建元素  39

3.2.2  在組件中使用JSX  40

3.2.3  在JSX中輸出變量  41

3.2.4  在JSX中使用屬性  42

3.2.5  創(chuàng)建React組件的方法  46

3.2.6  JSX中的if/else  47

3.2.7  JSX中的注釋  51

3.3  使用Babel設置JSX轉譯器  51

3.4 React和JSX陷阱  55

3.4.1  特殊字符  56

3.4.2  data-屬性  56

3.4.3  style屬性  57

3.4.4  class和for  58

3.4.5  布爾類型的屬性值  58

3.5  測驗  59

3.6  小結  59

3.7  測驗答案  59

第4章　與狀態(tài)交互  61

4.1  什么是React組件的狀態(tài)  62

4.2  使用狀態(tài)  63

4.2.1  訪問狀態(tài)  63

4.2.2  設置初始狀態(tài)  65

4.2.3  更新狀態(tài)  67

4.3  狀態(tài)和屬性  70

4.4  無狀態(tài)組件  71

4.5  有狀態(tài)組件和無狀態(tài)組件  73

4.6  測驗  77

4.7  小結  77

4.8  測驗答案  78

第5章　React組件生命周期  79

5.1 React組件生命周期事件的

全景視圖  80

5.2  事件的分類  80

5.3  實現(xiàn)生命周期事件  82

5.4  執(zhí)行所有事件  84

5.5  掛載事件  86

5.5.1  componentWillMount( )  87

5.5.2  componentDidMount( )  87

5.6  更新事件  90

5.6.1  componentWillReceiveProps

(newProps)  90

5.6.2  shouldComponentUpdate( )  91

5.6.3  componentWillUpdate( )  91

5.6.4  componentDidUpdate()  92

5.7  卸載事件  92

5.8  一個簡單示例  92

5.9  測驗  95

5.10 小結  95

5.11 測驗答案  96

第6章　React事件處理  97

6.1  在React中處理DOM事件  97

6.1.1  捕獲和冒泡階段  100

6.1.2  React事件的內(nèi)幕  102

6.1.3  使用ReactSyntheticEvent

事件對象  105

6.1.4  使用事件和狀態(tài)  108

6.1.5  傳遞事件處理程序和

屬性  109

6.1.6  組件通信  112

6.2  響應React不支持的DOM

事件 113

6.3 React和其他庫的集成：

jQuery UI事件 116

6.3.1  集成按鈕  116

6.3.2  集成標簽  118

6.4  測驗 119

6.5  小結 119

6.6  測驗答案 120

第7章　在React中使用表單  121

7.1  在React中使用表單的最佳

實踐 121

7.1.1  在React中定義表單及

響應事件  123

7.1.2  定義表單元素  125

7.1.3  捕獲表單變更  130

7.1.4  賬戶字段示例  132

7.2  使用表單的其他方式 134

7.2.1  可捕獲變更的非受控元素  135

7.2.2  不捕獲變更的非受控元素  136

7.2.3  使用引用獲取值  137

7.2.4  默認值  139

7.3  測驗 140

7.4  小結 141

7.5  測驗答案 141

第8章　擴展React組件  143

8.1  組件中的默認屬性 144

8.2  React屬性類型和驗證  145

8.3  渲染子組件 152

8.4  創(chuàng)建React高階組件以實現(xiàn)

代碼復用 154

8.4.1  使用displayName：用以區(qū)分

父組件與子組件  156

8.4.2  使用擴展運算符：傳遞所有

屬性  157

8.4.3  使用高階組件  158

8.5  最佳實踐：展示組件與容器

組件 160

8.6  測驗 161

8.7  小結 161

8.8  測驗答案 162

第9章　項目：菜單組件  163

9.1  項目結構和腳手架 164

9.2　不使用JSX構建菜單 165

9.2.1  Menu組件  165

9.2.2  Link組件  168

9.2.3  運行菜單組件  170

9.3  在JSX中構建菜單 171

9.3.1  重構Menu組件  172

9.3.2  重構Link組件  174

9.3.3  運行JSX項目  175

9.4  測驗 175

9.5  小結 176

第10章　項目：Tooltip組件  177

10.1 項目結構和腳手架  178

10.2 Tooltip組件  179

10.2.1 toggle( )函數(shù)  180

10.2.2 render( )函數(shù)  181

10.3 運行Tooltip組件  183

10.4 測驗  184

10.5 小結  184

第11章　項目：Timer組件  185

11.1 項目結構和腳手架  186

11.2 應用架構  187

11.3 TimerWrapper組件  189

11.4 Timer組件  193

11.5 Button組件  194

11.6 運行Timer組件  196

11.7 測驗  196

11.8 小結  197

第Ⅱ部分　React架構

第12章　Webpack構建工具  201

12.1 Webpack的作用  201

12.2 添加Webpack到項目中  203

12.2.1 安裝Webpack及其

依賴  204

12.2.2 配置Webpack  205

12.3 模塊化代碼  207

12.4 運行Webpack并測試構建  208

12.5 熱模塊替換  210

12.5.1 配置HMR  211

12.5.2 熱模塊替換實踐  214

12.6 測驗  216

12.7 小結  216

12.8 測驗答案  216

第13章　React路由  217

13.1 從零開始實現(xiàn)路由  218

13.1.1 建立項目  219

13.1.2 在app.jsx中創(chuàng)建路由

映射  220

13.1.3 在router.jsx中創(chuàng)建

Router組件  221

13.2 React Router  222

13.2.1 React Router的JSX

樣式  225

13.2.2 哈希記錄  227

13.2.3 瀏覽器記錄  227

13.2.4 使用Webpack安裝

React Router開發(fā)環(huán)境  228

13.2.5 創(chuàng)建布局組件  230

13.3 React Router特性  233

13.3.1 使用withRouter高階組件

訪問路由器  234

13.3.2 以編程方式導航  235

13.3.3 URL參數(shù)和其他路由

數(shù)據(jù)  235

13.3.4 在React Router中傳遞

屬性  236

13.4 使用Backbone路由  237

13.5 測驗  240

13.6  小結  241

13.7 測驗答案  241

第14章　使用Redux處理數(shù)據(jù)  243

14.1 React支持單向數(shù)據(jù)流  244

14.2 了解Flux數(shù)據(jù)體系結構  246

14.3 使用Redux數(shù)據(jù)類庫  247

14.3.1 用Redux創(chuàng)建依照Netflix

的應用  249

14.3.2 依賴和配置  250

14.3.3 啟用Redux  253

14.3.4 路由  253

14.3.5 合并reducer  254

14.3.6 電影的reducer  255

14.3.7 操作  258

14.3.8 操作創(chuàng)建器  259

14.3.9 將組件連接到數(shù)據(jù)

存儲  260

14.3.10 分發(fā)操作  262

14.3.11 將操作創(chuàng)建器傳遞到

組件屬性中  263

14.3.12 運行Netflix的克隆版  267

14.3.13 Redux總結  268

14.4 測驗  268

14.5 小結  269

14.6 測驗答案  269

第15章　使用GraphQL處理數(shù)據(jù)  271

15.1 GraphQL  272

15.2 給Netflix克隆版應用添加

服務器  273

15.2.1 在服務器端安裝

GraphQL  275

15.2.2 數(shù)據(jù)結構  278

15.2.3 GraphQL模式  279

15.2.4 查詢API并將響應保存

到數(shù)據(jù)存儲  281

15.2.5 顯示電影列表  285

15.2.6 GraphQL總結  287

15.3 測驗  287

15.4 小結  288

15.5 測驗答案  288

第16章　使用Jest進行單元測試  289

16.1 測試的類型  290

16.2 為什么使用Jest(對比

Mocha)  290

16.3 使用Jest進行單元測試  291

16.3.1 在Jest中編寫單元

測試  293

16.3.2 Jest斷言  294

16.4 使用Jest和TestUtils進行

React UI測試  296

16.4.1 使用TestUtils查找

元素  298

16.4.2 UI測試密碼部件  299

16.4.3 淺渲染  303

16.5 TestUtils總結  305

16.6 測驗  305

16.7 小結  305

16.8 測驗答案  306

第17章　在Node中使用React和

同構JavaScript  307

17.1 為什么在服務器端使用React？

什么是同構JavaScript？ 308

17.1.1 正確的頁面索引  308

17.1.2 更快的加載速度、更好的

性能  309

17.1.3 更好的代碼可維護性  310

17.1.4 在React和Node中使用

同構JavaScript  310

17.2 在Node上使用React  312

17.3 React和Express：在服務器端

渲染組件  314

17.3.1 在服務器端渲染簡單的

文本  315

17.3.2 渲染HTML頁面  316

17.4 使用Express和React的同構

JavaScript  322

17.4.1 項目目錄結構和配置  324

17.4.2 啟動服務器  325

17.4.3 使用Handlebars的服務器

端布局模板  329

17.4.4 在服務器上編寫React

組件  332

17.4.5 客戶端React代碼  333

17.4.6 配置Webpack  334

17.4.7 運行應用  336

17.5 測驗  340

17.6 小結  340

17.7 測驗答案  340

第18章　使用ReactRouter創(chuàng)建一個

網(wǎng)上書店  341

18.1 項目結構和Webpack配置  343

18.2 HTML主頁  346

18.3 創(chuàng)建組件  347

18.3.1 主文件：app.jsx  347

18.3.2 Cart組件  353

18.3.3 Checkout組件  355

18.3.4 Modal組件  356

18.3.5 Product組件  357

18.4 啟動項目  359

18.5 測驗  359

18.6 小結  359

第19章　使用Jest測試密碼  361

19.1 項目結構和Webpack配置  362

19.2 HTML主頁  365

19.3 實現(xiàn)強密碼模塊  366

19.3.1 測試  366

19.3.2 代碼  367

19.4 實現(xiàn)Password組件  369

19.4.1 測試  369

19.4.2 代碼  370

19.5 實踐  375

19.6 測驗  376

19.7 小結  377

第20章　使用Jest、Express和

MongoDB實現(xiàn)自動完成  379

20.1 項目結構和Webpack配置  381

20.2 實現(xiàn)Web服務器  385

20.2.1 定義RESTful API  386

20.2.2 在服務器端渲染React  387

20.3 添加瀏覽器腳本  387

20.4 創(chuàng)建服務器端模板  388

20.5 實現(xiàn)Autocomplete組件  389

20.5.1 Autocomplete組件的

測試  389

20.5.2 Autocomplete組件的

代碼  390

20.6 整合  393

20.7 測驗  395

20.8 小結  396

附錄A　安裝本書相關應用  397

附錄B　React速查表  405

附錄C　Express速查表  413

附錄D　MongoDB和Mongoose

速查表  419

附錄E　ES6簡介