React 與 Redux 開發實例精解 React与Redux开发实例精解

劉一奇

  • 出版商: 電子工業出版社
  • 出版日期: 2016-11-01
  • 定價: $354
  • 售價: 9.9$349
  • 貴賓價: 9.4$332
  • 語言: 簡體中文
  • 頁數: 320
  • 裝訂: 平裝
  • ISBN: 7121302675
  • ISBN-13: 9787121302671
  • 相關標籤: React
  • 相關分類: React

立即出貨 (庫存 < 4)

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

商品描述

<內容簡介>

《React與Redux開發實例精解》內容提要
《React與Redux開發實例精解》共分四部分,全面介紹如何使用React與Redux進行Web開發。第一部分是基礎篇,介紹React與Redux的基礎知識;第二部分是進階篇,通過精彩的官方示例學習React與Redux;第三部分是拓展篇,主要學習一些優秀的第三方拓展;第四部分是實戰篇,將會帶領讀者一步步搭建大型Web應用程序。
《React與Redux開發實例精解》適合熟悉JavaScript編程,有意使用React與Redux搭建Web應用的程序員學習參考。

<章節目錄>

第一部分基礎篇1
第1章技術簡介. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
React 2
Redux 3
Node與Universal渲染4
Babel 5
Webpack 5
總結6
第2章在Node.js中運行React . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
例子7
編寫React組件7
在Node.js中渲染組件8
使用Babel編譯運行Node.js程序9
Require Hook簡介9
使用Require Hook的步驟9
總結10
第3章在瀏覽器中運行React. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
例子11
組件復用11
在瀏覽器中渲染React組件12
使用Webpack打包編譯12
在瀏覽器中運行14
總結14
第4章開發服務器和熱替換. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
例子15
安裝16
配置Babel 16
使用react-hmre默認16
react-hmre的功能17
配置Webpack 18
配置Express服務器21
總結22
第5章React的創新語法:JSX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
例子24
JSX簡介24
JSX常用語法25
類似HTML 25
JavaScript表達式26
樣式27
註釋27
數組27
HTML標籤vs. React組件28
總結29
第6章React的數據載體:state、props與context. . . . . . . . . . . . . . . . . . . . . 30
例子30
State 31
Props 32
使用props 33
驗證props 33
組合使用state與props 35
Context 36
使用props傳遞數據36
使用context傳遞數據38
Props與context的適用場景40
在React開發者工具中查看41
總結42
第7章React的兩個對象:ReactElement與組件實例. . . . . . . . . . . . . . . . . . 43
例子43
ReactElement 44
JSX中的閉合標籤是ReactElement 44
ReactElement是什麼44
ReactElement的兩種類型45
React組件的渲染流程45
組件實例46
組件實例簡介46
組件、ReactElement與組件實例的區別47
組件實例的生滅:生命週期函數48
React組件中的this 49
總結55
第8章初識Redux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56
例子56
Action 56
Reducer 57
定義57
純函數58
不能修改參數state 58
Store 60
職能60
創建60
獲取與監聽60
發起action 61
總結62
第9章Action創建函數與Redux Thunk中間件. . . . . . . . . . . . . . . . . . . . . . . 64
例子64
Action創建函數65
編寫65
發起65
意義66
Redux unk中間件66
功能66
安裝激活67
總結69
第二部分進階篇71
第10章React與Redux的連接:手動連接. . . . . . . . . . . . . . . . . . . . . . . . . . . . 72
例子72
手動連接的步驟73
編寫React組件73
編寫Redux 75
將Redux手動連接到React組件76
手動連接的缺點77
總結77
第11章React與Redux的連接:使用react-redux連接. . . . . . . . . . . . . . . . 78
例子78
連接步驟78
多種寫法81
連接原理85
Provider工作原理85
connect工作原理86
展示組件與容器組件86
總結87
第12章實現撤銷/重做. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88
例子88
撤銷/重做88
Redux開發者工具92
安裝92
使用93
Redux並不“低效” 97
總結98
第13章測試. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99
例子99
測試工具100
Mocha 100
Enzyme 101
Expect 102
測試action創建函數103
測試React組件106
測試容器組件108
測試reducer純函數110
運行測試腳本111
總結112
第14章Redux的全局狀態與React組件的內部狀態. . . . . . . . . . . . . . . . . . . 114
例子114
全局狀態與內部狀態的定義114
全局狀態完全替代了內部狀態?115
全局狀態與內部狀態的適用場景118
總結118
第15章React與Redux中的數組處理. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119
例子119
reduce() 119
概述119
語法120
示例120
filter() 121
概述121
語法121
示例122
map() 122
概述122
語法122
示例123
every() 123
概述123
語法123
示例124
some() 124
概述124
語法124
示例125
展開運算符125
概述125
語法125
示例125
總結126
第16章Redux的大舞臺:異步. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127
例子127
JavaScript事件驅動編程127
Promise 129
Redux中的異步132
異步action創建函數133
異步請求前後的state變化133
State tree結構135
查看state tree 136
如何構建state tree 136
異步與變化139
準備工作139
追蹤異步與變化143
總結145
第17章自定義Redux中間件. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147
例子147
中間件的功能147
中間件的編寫148
中間件的執行149
自定義API中間件151
總結154
第18章Universal渲染. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155
例子155
公用一套代碼156
服務端渲染156
客戶端渲染158
總結159
第三部分拓展篇161
第19章Universal渲染神器:Webpack同構工具. . . . . . . . . . . . . . . . . . . . . . 162
例子162
Webpack同構工具的功能163
服務端調用164
客戶端調用165
真實場景167
配置服務器的入口167
獨立開發服務器168
配置Webpack 169
配置Webpack同構工具171
在服務端和客戶端使用require() 173
總結174
第20章多頁面的實現:路由. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 175
例子175
路由也是組件176
路由匹配177
使用Link和IndexLink導航178
服務端路由179
總結181
第21章多頁面下的異步操作. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 182
例子182
redux-amrc 182
功能183
配置184
使用184
Action與state 185
API 186
多頁面下的異步操作187
編寫測試API 187
預載數據188
手動加載數據191
操作數據192
總結193
第22章使用Bootstrap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 194
例子194
bootstrap-loader 195
基本用法195
配置196
PostCSS與Autoprefixer 200
簡介200
用法201
React-Bootstrap 202
總結204
第四部分實戰篇205
第23章搭建大型項目. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 206
例子206
開發服務器209
開發環境下的Webpack配置209
Webpack同構工具的配置212
獨立的開發服務器213
啟動開發服務器214
前端服務器215
配置前端服務器215
使用組件渲染HTML頁面218
啟動前端服務器221
API服務器222
配置API服務器222
啟動API服務器223
生產環境下的構建編譯224
編譯運行Node.js 224
生產環境下的Webpack配置225
公用代碼229
工具集229
路由與頁面231
質量保證235
測試235
Airbnb編碼規範239
去毛機246
EditorConfig 248
總結248
第24章表單. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 250
例子250
高階組件ReduxForm 251
設置252
簡單表單253
同步驗證表單256
異步失焦驗證表單258
提交表單到服務器260
總結264
第25章圖表與表格. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 265
例子265
圖表組件265
表格組件269
從服務器獲取數據272
總結275
第26章用戶認證. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 277
例子277
編寫認證API 279
Express-session中間件279
加載當前認證狀態280
登錄與登出280
API權限保護281
發送cookie 282
編寫用於認證的action創建函數283
登錄頁面和導航欄285
前端路由保護290
總結291
第27章部署. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 292
例子292
Heroku平臺293
安裝工具並登錄293
準備程序293
部署程序294
其他操作295
持續集成296
與生產相關的問題298
總結299
第28章其他資源. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 300
在線文檔300
參與社區活動301
序言
致讀者
這本書是為想要用React、Redux、Babel和Webpack搭建Web應用程序的程序員準備的。與其他技術棧相比,這個技術棧(指的是React、Redux、Babel、Webpack以及社區中眾多與此相關的優秀工具)的學習成本並不低,但是其中的智慧與思想卻著實令人讚嘆:清爽的組件代碼結束了滿屏HTML標籤與類名的噩夢;聲明式地將數據映射為界面減少了煩瑣的DOM操作;高階函數、管道、柯里化等函數式編程思想的運用使得複雜邏輯的處理變得相當簡單;自動化構建編譯技術降低了源代碼與靜態資源的管理成本。隨著時間的推移,技術工具或許很快會更新換代,但是這些前端工程中的最佳實踐思想卻不會輕易過時。如果你不僅想學習這些技術的使用方法,更想瞭解這些技術背後所包含的思想與智慧,那麼我真誠地建議你閱讀本書。
閱讀本書之前的準備
想要很好地理解本書的內容,你需要具備一定的Node.js和ES2015、ES2016基礎,至少要瞭解一些常見的概念,例如NPM、模塊系統、常量、函數、裝飾器和類。除此之外,你最好還熟悉JavaScript程序在服務器和瀏覽器環境下的調試技術。
學習本書示例代碼時,大部分時間都要在命令行中進行操作。因此,你應該能夠熟練使用自己操作系統中的命令行工具。
本書附帶的程序是開源的,全部上傳到了GitHub。這些示例程序中的開發經驗來自開源社區和筆者自己的實踐思考。我不認為這是使用React與Redux開發Web應用程序的唯一方式。你可以將其作為參考,如果有更好的想法,強烈建議你將其貢獻給社區,與更多的開發者一起交流進步。
最後要說明的是,本書因篇幅有限等原因,無法對每一項技術的講解都做到完整而詳盡。因此,你還需要根據書中的提示和推薦,去閱讀參考相應技術的官方文檔。
本書的內容安排
本書分為四部分。
第一部分基礎篇主要介紹React與Redux的基礎知識。
•第1章簡要介紹本書所要講解的技術,包括React、Redux、Node與Universal渲染、Babel及Webpack。
•第2章講解如何在Node.js中運行React。
•第3章講解如何在瀏覽器中運行React。
•第4章介紹開發服務器和熱替換技術及其實現過程。
•第5章介紹React的創新語法:JSX。
•第6章介紹React的數據載體:state、props與context。
•第7章介紹React的兩個對象:ReactElement和組件實例。
•第8章介紹Redux的action、reducer與store。
•第9章介紹Redux的action創建函數和unk中間件。
第二部分進階篇通過精彩的官方示例學習React與Redux。
•第10章講解如何手動將Redux連接到React中。
•第11章講解如何使用react-redux將Redux連接到React中。
•第12章介紹Redux的撤銷/重做和Redux開發者工具的使用。
•第13章講解如何在React與Redux的程序中編寫測試。
•第14章討論Redux的全局狀態與React組件的內部狀態。
•第15章講解React與Redux中常用的幾種數組處理方法。
•第16章介紹Redux中的異步處理。
•第17章介紹如何自定義Redux中間件。
•第18章講解如何使用React與Redux實現Universal渲染。
第三部分拓展篇學習一些優秀的第三方拓展。
•第19章介紹Webpack同構工具。
•第20章介紹React Router,並通過它實現Universal路由。
•第21章介紹多頁面下的異步處理。
•第22章介紹了bootstrap-loader、PostCSS、Autoprefixer和React-Bootstrap。
第四部分實戰篇一步步搭建大型Web應用程序。
•第23章介紹一個大型項目的基本結構。
•第24章使用ReduxForm製作各種表單。
•第25章實現圖表與表格。
•第26章實現用戶認證。
•第27章講解部署到Heroku的方法,並實現持續集成。
•第28章列出其他資源。