《React開發(fā)實(shí)戰(zhàn) 介紹如何成功構(gòu)建日益復(fù)雜的前端應(yīng)用程序與接口,深入分析
React庫,并詳述React生態(tài)系統(tǒng)中的其他工具與庫,從而指導(dǎo)你創(chuàng)建完整的復(fù)雜應(yīng)用
程序。
你將全面學(xué)習(xí)React的用法以及React生態(tài)系統(tǒng)中的其他工具和庫(如React Router和Flux
架構(gòu)),并了解采用組合方式創(chuàng)建接口的*實(shí)踐。本書簡(jiǎn)明扼要地講解每個(gè)主題,并呈
現(xiàn)助你高效完成工作的細(xì)節(jié)。書中嚴(yán)謹(jǐn)深刻地講述React中*重要的功能,每章還詳細(xì)列
出常見的開發(fā)問題,并解釋如何避免它們。
如果你擁有使用jQuery或其他JavaScript框架創(chuàng)建前端應(yīng)用程序的經(jīng)驗(yàn),但想解決復(fù)雜
前端應(yīng)用程序構(gòu)建過程中日益增多的常見問題,那么本書就是為你準(zhǔn)備的。開始像專家那
樣去使用React吧,今天就把這本書收入囊中!
主要內(nèi)容
◆ 如何創(chuàng)建可組合的用戶界面
◆ 理解React的虛擬DOM架構(gòu)以及如何利用該架構(gòu)開發(fā)應(yīng)用程序
◆ 了解各項(xiàng)功能的原理及重要性
◆ 深入學(xué)習(xí)React以及React生態(tài)系統(tǒng)中重要的第三方庫
◆ 學(xué)習(xí)如何創(chuàng)建通用/同構(gòu)應(yīng)用程序從而改進(jìn)用戶體驗(yàn)和SEO
◆ 深刻理解復(fù)雜應(yīng)用程序中的數(shù)據(jù)流策略
◆ 學(xué)習(xí)如何測(cè)試、完善和部署React項(xiàng)目
本書將涵蓋React庫的各個(gè)細(xì)節(jié),并將討論基于組合式模型來創(chuàng)建Web組件接口的*實(shí)踐。React庫本身并不大,所以本書同時(shí)涵蓋了React生態(tài)系統(tǒng)中的一些工具和庫(例如React Router和Flux架構(gòu)),以便為讀者提供創(chuàng)建完整應(yīng)用程序所需的足夠知識(shí)。
React是一個(gè)用來創(chuàng)建組合式Web應(yīng)用程序的開源庫,由Facebook維護(hù)。自從公開發(fā)布后,這個(gè)庫迅速風(fēng)靡全球,并且圍繞著它產(chǎn)生了一個(gè)生機(jī)勃勃的社區(qū)。本書將涵蓋React庫的各個(gè)細(xì)節(jié),并將討論基于組合式模型來創(chuàng)建Web組件接口的最佳實(shí)踐。React庫本身并不大,所以本書同時(shí)涵蓋了React生態(tài)系統(tǒng)中的一些工具和庫(例如React Router和Flux架構(gòu)),以便為讀者提供創(chuàng)建完整應(yīng)用程序所需的足夠知識(shí)。書中對(duì)每個(gè)主題的講解都簡(jiǎn)潔明了,你將逐一了解到你需要掌握的各個(gè)細(xì)節(jié),從而學(xué)會(huì)真正有效地使用它們。本書對(duì)React中最重要的那些特性的講解,言簡(jiǎn)意賅、由淺入深,每個(gè)章節(jié)中還詳細(xì)說明實(shí)際開發(fā)中可能面臨的常見問題,并告訴你如何避免它們。本書概要第1章提供了大量的信息來讓你起步,介紹基本的React配置,并讓你能全面了解在React中如何組織用戶界面。第2章將深入介紹JSX(這是React用來在JavaScript中聲明組件標(biāo)記的JavaScript語法擴(kuò)展),同時(shí)展示如何使用React的事件系統(tǒng),以及React的虛擬DOM實(shí)現(xiàn)。第3章講述了如何通過使用組件的方式來創(chuàng)建一個(gè)完整的應(yīng)用程序。你將學(xué)習(xí)React應(yīng)用程序的數(shù)據(jù)如何在組件間流動(dòng),并深入了解組件(包括嵌套組件、公開一個(gè)API、props、state等知識(shí))。第4章講述了如何為用戶創(chuàng)建豐富的用戶體驗(yàn)。你將學(xué)習(xí)如何在React的插件CSSTransitionGroup的幫助下實(shí)現(xiàn)動(dòng)畫效果,以及使用一個(gè)名為React DnD的外部庫來實(shí)現(xiàn)拖放功能。第5章講述了路由功能。你將學(xué)習(xí)如何使用React社區(qū)中被廣泛使用的React Router,來管理URI和設(shè)置應(yīng)用程序的訪問點(diǎn)。第6章向讀者展現(xiàn)了Flux架構(gòu)。你將學(xué)習(xí)這個(gè)架構(gòu)的細(xì)節(jié),它解決了哪些問題,以及如何將它集成到一個(gè)React應(yīng)用程序中。第7章講述了性能調(diào)優(yōu)。在該章,你將學(xué)習(xí)如何度量應(yīng)用程序的性能指標(biāo)。然后你將了解如何優(yōu)化代碼,使應(yīng)用程序有更好的性能表現(xiàn)。第8章講述了React同構(gòu)應(yīng)用程序(或者稱React通用應(yīng)用程序,也就是在服務(wù)器上渲染React)。這種技術(shù)可以實(shí)現(xiàn)更好的性能、搜索引擎優(yōu)化和優(yōu)雅降級(jí)(如果瀏覽器禁用了本地JavaScript,應(yīng)用程序也能正常工作)。最后,第9章講述了測(cè)試。你將學(xué)習(xí)如何使用React的Test Utils來測(cè)試組件。還將學(xué)習(xí)Jest,這是一個(gè)由Facebook創(chuàng)建的、最適合用來測(cè)試React項(xiàng)目的測(cè)試框架。本書讀者對(duì)象本書主要面向使用諸如jQuery/Backbone/Angular創(chuàng)建前端應(yīng)用程序且擁有一些經(jīng)驗(yàn)的中級(jí)水平JavaScript開發(fā)人員,他們需要了解更好的工具和更多知識(shí),來解決構(gòu)建復(fù)雜前端應(yīng)用程序過程中所遇到的越來越多的常見問題。源代碼本書中所包含的示例項(xiàng)目的源代碼,位于Apress網(wǎng)站上的Source Code區(qū)域。請(qǐng)?jiān)L問www.apress.com,單擊Source Code,然后查找本書的書名(請(qǐng)使用英文書名Pro React來進(jìn)行搜索),就可以找到它們。另外,本書所有的示例代碼和一些額外的實(shí)用性代碼,都可在本書的GitHub頁面上找到,網(wǎng)址是pro-react.github.io。此外,可訪問www.tupwk. com.cn/downpage,輸入中文書名或中文ISBN來下載源代碼,也可以掃描本書封底的二維碼下載資料。聯(lián)系作者感謝你購買本書。我希望你能享受閱讀本書的樂趣,并從中獲取有價(jià)值的信息。歡迎你個(gè)人針對(duì)本書內(nèi)容與源代碼給我提供反饋、問題和評(píng)論。你可以通過proreactbook@gmail.com聯(lián)系我。祝你好運(yùn)!期待著你的React應(yīng)用程序的誕生!
20年前,Cássio de Sousa Antonio使用一臺(tái)Sinclair Spectrum開啟了他的編程生涯,隨后在巴西和美國成長(zhǎng)為一名軟件工程師和技術(shù)經(jīng)理。他參與開發(fā)過微軟、可口可樂、聯(lián)合利華和匯豐銀行等大公司的項(xiàng)目。他的初創(chuàng)公司于2014年末被收購。Cássio目前擔(dān)任技術(shù)顧問。你可在Twitter上關(guān)注他(@cassiozen)。
第1章 React入門 1
1.1 開始學(xué)習(xí)之前 1
1.1.1
Node.js和npm 1
1.1.2
JavaScript ES6 2
1.2 定義React 2
1.3
React的優(yōu)點(diǎn) 2
1.3.1
簡(jiǎn)單易學(xué)的響應(yīng)式渲染 3
1.3.2
使用純JavaScript進(jìn)行
面向組件開發(fā) 3
1.3.3
靈活的文檔模型抽象表現(xiàn) 4
1.4 創(chuàng)建你的第一個(gè)React
應(yīng)用程序 4
1.4.1
React開發(fā)流程 4
1.4.2
創(chuàng)建你的第一個(gè)組件 8
1.4.3
減少輸入的字符數(shù)量 9
1.4.4
動(dòng)態(tài)值 10
1.5 將組件組合起來 10
1.5.1
props 10
1.5.2
呈現(xiàn)看板應(yīng)用 11
1.5.3
定義組件的層次關(guān)系 13
1.5.4
props的重要性 14
1.5.5
創(chuàng)建組件 14
1.6 介紹state 21
1.7 本章小結(jié) 23
第2章 深入DOM抽象 25
2.1
React中的事件 25
2.1.1
DOM事件偵聽器 25
2.1.2
看板應(yīng)用:管理DOM
事件 26
2.2 深入了解JSX 27
2.2.1
JSX與HTML 28
2.2.2
JSX和HTML的
不同之處 28
2.2.3
JSX的怪異之處 29
2.3 看板應(yīng)用:指示卡片的
打開和關(guān)閉狀態(tài) 31
2.3.1
空格 32
2.3.2
JSX中的注釋 33
2.3.3
渲染動(dòng)態(tài)HTML 33
2.3.4
看板應(yīng)用:渲染
Markdown 33
2.4 脫離JSX的React 36
2.4.1
普通JavaScript中的
React元素 36
2.4.2
元素工廠 36
2.4.3
自定義工廠 37
2.5 內(nèi)聯(lián)樣式 37
2.5.1
定義內(nèi)聯(lián)樣式 37
2.5.2
看板應(yīng)用:通過內(nèi)聯(lián)樣式
定義卡片顏色 38
2.6 使用表單 40
2.6.1
受控組件 40
2.6.2
特例 42
2.6.3
非受控組件 43
2.6.4
看板應(yīng)用:創(chuàng)建一個(gè)
任務(wù)表單 44
2.7 幕后的虛擬DOM 44
2.7.1
key屬性 45
2.7.2
看板應(yīng)用:key 45
2.7.3
refs 47
2.8 本章小結(jié) 48
第3章 使用組件構(gòu)建應(yīng)用程序 49
3.1 校驗(yàn)屬性 49
3.1.1
屬性的默認(rèn)值 50
3.1.2
內(nèi)置的propTypes校驗(yàn)器 51
3.1.3
為看板應(yīng)用定義
propTypes 52
3.1.4
自定義propTypes校驗(yàn)器 54
3.2 組件組合的策略與
最佳實(shí)踐 55
3.2.1
有狀態(tài)的組件和單純組件 55
3.2.2
哪些組件應(yīng)當(dāng)是有
狀態(tài)組件 56
3.2.3
數(shù)據(jù)流和組件通信 59
3.3 組件的生命周期 63
3.3.1
聲明周期的階段與函數(shù) 63
3.3.2
生命周期函數(shù)實(shí)踐:
數(shù)據(jù)獲取 64
3.4 淺談不變性 67
3.4.1
普通JavaScript中的
不變性 67
3.4.2
嵌套對(duì)象 69
3.4.3
React不變性助手 70
3.5 看板應(yīng)用:添加一點(diǎn)
復(fù)雜性 73
3.5.1
從外部API獲取初始的
卡片數(shù)據(jù) 73
3.5.2
將任務(wù)回調(diào)以props傳遞 76
3.5.3
處理任務(wù)數(shù)據(jù) 80
3.5.4
基本的樂觀更新回滾 83
3.6 本章小結(jié) 87
第4章 復(fù)雜交互 89
4.1
React中的動(dòng)畫 89
4.1.1
CSS過渡和動(dòng)畫基礎(chǔ) 89
4.1.2
ReactCSSTransitionGroup 95
4.2 拖放 100
4.2.1
React DnD實(shí)現(xiàn)概述 101
4.2.2
React DnD實(shí)現(xiàn)示例 101
4.3 看板應(yīng)用:支持動(dòng)畫和
拖放 113
4.3.1
卡片切換動(dòng)畫 113
4.3.2
卡片的拖曳 115
4.4 本章小結(jié) 129
第5章 路由 131
5.1 使用原生方式實(shí)現(xiàn)路由
131
5.2 React
Router 135
5.2.1
Index路由 138
5.2.2
帶參數(shù)的路由 139
5.2.3
設(shè)置活動(dòng)鏈接 144
5.2.4
傳遞props 144
5.2.5
將UI界面與URL解耦 147
5.2.6
在代碼中更改路由 149
5.2.7
History庫 152
5.2.8
看板應(yīng)用:實(shí)現(xiàn)
路由功能 153
5.3 本章小結(jié) 166
第6章 結(jié)合Flux的React
應(yīng)用程序架構(gòu) 167
6.1 什么是Flux 167
6.1.1
Store 167
6.1.2
Action 168
6.1.3
Dispatcher 169
6.2 假想的簡(jiǎn)單Flux
應(yīng)用程序 169
6.3
Flux工具包 177
6.3.1
Flux Store工具 177
6.3.2
容器組件高階函數(shù) 180
6.4 異步Flux 181
6.4.1
waitFor:協(xié)調(diào)Store的
更新數(shù)序 181
6.4.2
異步數(shù)據(jù)獲取 184
6.5
AirCheap應(yīng)用程序 184
6.5.1
搭建:項(xiàng)目組織和
基本文件 184
6.5.2
創(chuàng)建用于獲取機(jī)場(chǎng)的
API助手和Action創(chuàng)
建器 185
6.5.3
AirportStore 188
6.5.4
應(yīng)用組件 189
6.5.5
完成AirCheap應(yīng)用程序:
加載機(jī)票 194
6.6 改進(jìn)異步獲取數(shù)據(jù)的實(shí)現(xiàn)
204
6.7 看板應(yīng)用:遷移到
Flux架構(gòu) 207
6.7.1
重構(gòu):創(chuàng)建Flux基本
結(jié)構(gòu)并遷移文件 207
6.7.2
將數(shù)據(jù)獲取操作遷移到
Flux架構(gòu) 212
6.7.3
實(shí)現(xiàn)FetchCards Action、
API方法調(diào)用和Store
回調(diào) 213
6.7.4
將所有卡片和任務(wù)Action
遷移到Flux架構(gòu) 216
6.7.5
準(zhǔn)備功能遷移 216
6.7.6
組件 225
6.7.7
刪除所有組件state 231
6.8 本章小結(jié) 241
第7章 性能調(diào)優(yōu) 243
7.1 子級(jí)校正過程的工作原理
243
7.1.1
批處理 243
7.1.2
子樹渲染 244
7.2
React Perf 244
7.2.1
性能測(cè)試應(yīng)用 245
7.2.2
安裝并使用React Perf 248
7.3
shouldComponentUpdate 252
7.4 本章小結(jié) 254
第8章 React同構(gòu)應(yīng)用 255
8.1
Node.js和Express 255
8.2
React同構(gòu)基礎(chǔ) 260
8.2.1
創(chuàng)建項(xiàng)目結(jié)構(gòu) 260
8.2.2
在服務(wù)器端渲染React
組件 263
8.2.3
在客戶端中掛載React 266
8.3 路由 270
8.3.1
配置內(nèi)部路由 270
8.3.2
動(dòng)態(tài)數(shù)據(jù)獲取 271
8.3.3
渲染路由 273
8.4 本章小結(jié) 278
第9章 測(cè)試React組件 279
9.1 Jest
279
9.2
React測(cè)試工具 281
9.2.1
渲染用于測(cè)試的組件 281
9.2.2
遍歷并查找子節(jié)點(diǎn) 284
9.2.3
模擬事件 285
9.2.4
淺渲染 286
9.3 本章小結(jié) 290
附錄 JavaScript 2015 291