React 全家桶 : 前端開發與實例詳解 (Fullstack React: The Complete Guide to ReactJS and Friends)

Anthony Accomazzo,Nate Murray,Ari Lerner,Clay Allsopp 歐陽獎譯

  • React 全家桶 : 前端開發與實例詳解 (Fullstack React: The Complete Guide to ReactJS and Friends)-preview-1
  • React 全家桶 : 前端開發與實例詳解 (Fullstack React: The Complete Guide to ReactJS and Friends)-preview-2
React 全家桶 : 前端開發與實例詳解 (Fullstack React: The Complete Guide to ReactJS and Friends)-preview-1

買這商品的人也買了...

商品描述

使用React能讓前端開發人員用更少、更安全的代碼來構建更可靠、更強大的應用程序。
本書分為兩部分,全面介紹了React的相關主題。
第一部分通過例子循序漸進地講解基礎知識,包括創建一個投票應用程序、編寫組件、處理用戶交互、管理富表單,
以及與服務器交互,此外還探索了Create React App的工作原理,編寫自動化單元測試,以及使用客戶端路由構建多頁面應用程序。
第二部分探討在大型應用程序產品中使用的更高級的概念——數據的架構、傳輸和管理的策略,
講解了Redux、GraphQL、Relay,以及如何使用React Native編寫原生、跨平臺的移動應用程序。
書中每一章都配有示例代碼,有助於讀者鞏固所學。

作者簡介

Anthony Accomazzo

現就職於Decode軟件公司,作者、編輯、顧問,有多年React與React Native研究經驗,曾主導IFTTT API平台開發。

 

Nate Murray

全棧工程師,曾任IFTTT及AT&T工程師,擁有數據挖掘和增量Web服務等方面的背景。

 

Ari Lerner

全棧工程師,Fullstack網站聯合創始人,AWS顧問。曾任AT&T軟件工程師與創新佈道者,Fieldday聯合創始人。

 

Clay Allsopp

Plaid工程主管,Propeller聯合創始人,曾任LikeALittle工程師。

 

David Guttman

AT&T高級研發工程師,Rollmob、AdNet、Interlincx Media等公司的首席技術官,
Superstruct創始人,也是JS.LA等JavaScript活動的組織策劃者。

 

Tyler McGinnis

谷歌開發技術專家,Ui學習網站創始人,React.js項目的創作者,
也是React.js Utah和ReactWeek等活動的組織策劃者。

【譯者簡介】
歐陽獎

擁有多年前端管理經驗,對前端技術發展有濃厚的興趣,目前為聯眾智慧科技股份有限公司的系統架構師。

目錄大綱

第 一部分
第 1章 第 一個React Web應用程序 2
1.1 構建Product Hunt項目 2
1.2 設置開發環境 2
1.3 針對Windows用戶的特殊說明 3
1.4 JavaScript ES6/ES7 3
1.5 開始 4
1.6 什麽是組件 8
1.7 構建Product組件 16
1.8 讓數據驅動Product組件 18
1.9 應用程序的第 一次交互:投票事件響應 26
1.10 更新state和不變性 33
1.11 用Babel插件重構transform-class-properties 37
1.12 祝賀你 41

第 2章 組件 42
2.1 計時器應用程序 42
2.2 開始 43
2.3 將應用程序分解為組件 46
2.4 從頭開始構建React應用程序的步驟 50
2.5 第(2)步:構建應用程序的靜態版本 52
2.6 第(3)步:確定哪些組件應該是有狀態的 58
2.7 第(4)步:確定每個state 應該位於哪個組件中 60
2.8 第(5)步:通過硬編碼來初始化state 61
2.9 第(6)步:添加反向數據流 68
2.10 更新計時器 72
2.11 刪除計時器 77
2.12 添加計時功能 79
2.13 添加啟動和停止功能 81
2.14 方法回顧 86

第3章 組件和服務器 87
3.1 介紹 87
3.2 server.js 87
3.3 服務器API 88
3.4 使用API​​ 90
3.5 從服務器加載狀態 92
3.6 client 94
3.7 向服務器發送開始和停止請求 97
3.8 向服務器發送創建、更新和刪除請求 99
3.9 下一步 100

第4章 JSX和虛擬DOM 101
4.1 React使用了虛擬DOM 101
4.2 為什麽不修改實際的DOM 101
4.3 什麽是虛擬DOM 101
4.4 虛擬DOM片段 102
4.5 ReactElement 102
4.6 JSX 107
4.7 參考文獻 113

第5章 具有props、state和children的高級組件配置 114
5.1 介紹 114
5.2 如何使用本章 115
5.3 ReactComponent 115
5.4 props是參數 117
5.5 PropTypes 118
5.6 使用getDefaultProps()獲取默認props 119
5.7 上下文 120
5.8 state 123
5.9 無狀態組件 131
5.10 使用props.children與子組件對話 133
5.11 總結 137
5.12 參考文獻 137

第6章 表單 138
6.1 表單101 138
6.2 文本輸入 142
6.3 遠程數據 163
6.4 異步持久性 171
6.5 Redux 176
6.6 表單模塊 185

第7章 Webpack與Create React App結合使用 186
7.1 JavaScript模塊 186
7.2 Create React App 188
7.3 探索Create React App 188
7.4 Webpack基礎 196
7.5 對示例應用程序進行修改 201
7.6 創建生產構建 202
7.7 彈出 205
7.8 Create React App和API服務器一起使用 207
7.9 Webpack總結 216

第8章 單元測試 218
8.1 不使用框架編寫測試 218
8.2 Jest是什麽 226
8.3 使用Jest 226
8.4 React應用程序的測試策略 232
8.5 使用Enzyme測試基本的React組件 234
8.6 為食物查找應用程序編寫測試 256
8.7 編寫FoodSearch.test.js 264
8.8 進一步閱讀 287

第9章 路由 289
9.1 URL中有什麽 289
9.2 構建react-router組件 292
9.3 使用React Router的動態路由 316
9.4 支持身份驗證的路由 337
9.5 回顧一下 348

第二部分
第 10章 Flux和Redux介紹 350
10.1 Flux誕生的原因 350
10.2 Flux實現 351
10.3 Redux 352
10.4 構建一個計數器 352
10.5 構建store 358
10.6 Redux的核心 361
10.7 早期的聊天應用程序 362
10.8 構建reducer()函數 365
10.9 訂閱store 370
10.10 將Redux連接到React 373
10.11 下一步 380

第 11章 Redux中間件 381
11.1 準備 381
11.2 使用redux庫的createStore()函數 382
11.3 將消息表示為處於狀態中的對象 383
11.4 引入多線程387
11.5 添加ThreadTabs組件 393
11.6 在reducer中支持多線程 395
11.7 添加OPEN_THREAD動作 404
11.8 拆分reducer函數 407
11.9 添加messagesReducer()函數 412
11.10 在reducer中定義初始狀態 417
11.11 使用redux的combineReducers()函數 420
11.12 下一步 421

第 12章 表示組件和容器組件與Redux一起使用 422
12.1 表示組件和容器組件 422
12.2 拆分ThreadTabs組件 424
12.3 拆分Thread組件 428
12.4 從App組件中移除store 433
12.5 使用react-redux庫創建容器組件 434
12.6 動作創建器 443
12.7 總結 445

第 13章 使用GraphQL 446
13.1 第 一個GraphQL查詢 446
13.2 GraphQL的好處 447
13.3 GraphQL和REST 448
13.4 GraphQL和SQL 449
13.5 Relay 框架和GraphQL框架 450
13.6 本章預覽 450
13.7 使用GraphQL 451
13.8 探索GraphiQL 451
13.9 GraphQL語法 454
13.10 復雜類型 458
13.11 探索Graph 460
13.12 圖節點 462
13.13 viewer 463
13.14 圖的連接和邊 464
13.15 變更 467
13.16 訂閱 468
13.17 GraphQL和JavaScript結合使用 469
13.18 GraphQL與React結合使用 470
13.19 總結 471

第 14章 GraphQL服務器 472
14.1 編寫一個GraphQL服務器 472
14.2 Windows用戶的特殊設置 472
14.3 連接 496
14.4 總結 512

第 15章 經典Relay 514
15.1 介紹 514
15.2 Relay是一個數據架構 520
15.3 Relay和GraphQL約定 520
15.4 將Relay添加到應用程序中 529
15.5 BooksPage組件 545
15.6 使用變更修改數據 554
15.7 構建圖書頁面 554
15.8 變更 559
15.9 總結 565
15.10 參考資料 565

第 16章 React Native 567
16.1 初始化 568
16.2 路由 569
16.3  571
16.4 Web組件與原生組件 576
16.5 樣式 584
16.6 HTTP請求 602
16.7 什麽是promise 602
16.8 一次性使用保證 605
16.9 創建新promise 605
16.10 使用React Native進行調試 606
16.11 資料參考 608
附錄A PropTypes(圖靈社區下載)
附錄B ES6(圖靈社區下載)
附錄C React Hook(圖靈社區下載)
更新日誌(圖靈社區下載)