快速上手 React 編程 (React Quickly)

作者：Azat Mardan 

Azat Mardan，我已經出版了超過14本書和17門在線課程，它們中的大多數存儲在雲端，涉及React、JavaScript和Node.js。在關注Node之前，我也使用過其他語言編程(Java、C、Perl、PHP、Ruby)，幾乎從高中開始編程(十多年前)，並且絕對超過了規定的一萬小時。
現在，我是美國十大銀行之一的技術研究員，它也是一家財富500強公司：Capital One Financial Corporation，位於美麗的舊金山。在那之前，我曾為小型初創公司、大型企業，甚至美國聯邦政府工作過，編寫桌面、Web和移動應用，從事教學、開發協調和項目管理。

我不想佔用你太多的時間介紹自己，你可以在我的博客上了解我的更多信息。相反，我想把關於這本書的經歷寫下來。

2011年，我搬到了陽光明媚的加州，開始通過企業加速器創業(如果你對此好奇，它就是500家初創公司)，開始使用現代的JavaScript。我學會了使用Backbone為公司創建一些應用，並對此印象深刻。該框架極大地改進了我前幾年構建的單頁面應用的代碼組織。它有路由和模型。這很棒！

我在DocuSign(去Google搜索一下e-signatures，它的市場佔有率達到70%)擔任軟件工程團隊領導時，又有機會看到了Backbone和同構JavaScript的驚人能力。我們重構了一個有7年曆史的ASP.NET Web應用，每一個小版本的發布都需要四周的時間，而使用時髦的Backbone-Node-CoffeeScript-Express應用不僅具有非常好的用戶體驗，而且發布版本只需要一到兩週的時間。設計團隊在可用性方面做得很好。毋庸置疑，有大量具有不同程度交互的UI視圖。

應用是同構的，甚至在此之前還不存在該術語。我們使用服務器上的Backbone模型從API獲取數據並將其緩存。我們在瀏覽器和服務器上使用相同的Jade模板。

這是一個有趣的項目，它讓我更加相信使用一種語言橫跨整個技術棧的力量。精通C#和前端JavaScript(大部分是jQuery)的老款應用開發者，如果花點時間突擊一下(一個發布週期，通常是一到兩週)，就會愛上結構清晰的CoffeeScript、Backbone的組織結構以及Node的速度(開發和運行速度)。

我在Web開發領域十幾年的經驗向我揭示了好的、壞的以及醜陋的(大部分是醜陋的)前端開發。然而柳暗花明，因為自從切換到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生態和社區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內嵌元素23 
2.2創建組件類26 
2.3屬性29 
2.4測驗34 
2.5小結34 
2.6測驗答案34 
第3章JSX 35 
3.1 JSX是什麼？它有什麼優點36 
3.2理解JSX 38 
3.2.1使用JSX創建元素39 
3.2.2在組件中使用JSX 40
3.2.3在JSX中輸出變量41 
3.2.4在JSX中使用屬性42 
3.2.5創建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章與狀態交互61 
4.1什麼是React組件的狀態62 
4.2使用狀態63 
4.2.1訪問狀態63 
4.2.2設置初始狀態65 
4.2.3更新狀態67 
4.3狀態和屬性70 
4.4無狀態組件71 
4.5有狀態組件和無狀態組件73 
4.6測驗77 
4.7小結77 
4.8測驗答案78 
第5章React組件生命週期79 
5.1 React組件生命週期事件的全景視圖80 
5.2事件的分類80
5.3實現生命週期事件82 
5.4執行所有事件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事件的內幕102 
6.1.3使用React SyntheticEvent事件對象105 
6.1.4使用事件和狀態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 …… 
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創建React高階組件以實現代碼復用154 
8.4.1使用displayName：用以區分父組件與子組件156 
8.4.2使用擴展運算符：傳遞所有屬性157 
8.4.3使用高階組件158 
8.5 …… 
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( )函數180 
10.2.2 render( )函數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從零開始實現路由218 
13.1 .1建立項目219 
13.1.2在app.jsx中創建路由映射220 
13.1.3在router.jsx中創建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開發環境228 
13.2.5創建佈局組件230
13.3 React Router特性233 
13.3.1使用withRouter高階組件訪問路由器234 
13.3.2以編程方式導航235 
13.3.3 URL參數和其他路由數據235 
13.3.4在React Router中傳遞屬性236 
13.4使用Backbone路由237 
13.5測驗240 
13.6小結241 
13.7測驗答案241 
第14章使用Redux處理數據243 
14.1 React支持單向數據流244 
14.2了解Flux數據體系結構246 
14.3使用Redux數據類庫247 
14.3.1用Redux創建依照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操作創建器259 
14.3.9將組件連接到數據存儲260 
14.3.10分發操作262 
14.3.11將操作創建器傳遞到組件屬性中263 
14.3.12運行Netflix的克隆版267 
14.3.13 Redux總結268
14.4測驗268 
14.5小結269 
14.6測驗答案269 
第15章使用GraphQL處理數據271 
15.1 GraphQL 272 
15.2給Netflix克隆版應用添加服務器273 
15.2.1在服務器端安裝GraphQL 275 
15.2.2數據結構278 
15.2.3 GraphQL模式279 
15.2.4查詢API並將響應保存到數據存儲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章使用React Router創建一個網上書店341 
18.1項目結構和Webpack配置343 
18.2 HTML主頁346 
18.3創建組件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實現強密碼模塊366 
19.3.1測試366 
19.3.2代碼367 
19.4實現Password組件369 
19.4.1測試369 
19.4.2代碼370 
19.5實踐375 
19.6測驗376 
19.7小結377 
第20章使用Jest、Express和MongoDB實現自動完成379 
20.1項目結構和Webpack配置381 
20.2實現Web服務器385 
20.2.1定義RESTful API 386
20.2.2在服務器端渲染React 387 
20.3添加瀏覽器腳本387 
20.4創建服務器端模板388 
20.5實現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簡介423