編輯推薦
本書將涵蓋React庫的各個細節,並將討論基於組閤式模型來創建Web組件接口的*佳實踐。React庫本身並不大,所以本書同時涵蓋瞭React生態係統中的一些工具和庫(例如React Router和Flux架構),以便為讀者提供創建完整應用程序所需的足夠知識。
內容簡介
《React開發實戰 介紹如何成功構建日益復雜的前端應用程序與接口,深入分析React庫,並詳述React生態係統中的其他工具與庫,從而指導你創建完整的復雜應用程序。
你將全麵學習React的用法以及React生態係統中的其他工具和庫(如React Router和Flux架構),並瞭解采用組閤方式創建接口的*佳實踐。本書簡明扼要地講解每個主題,並呈現助你高效完成工作的細節。書中嚴謹深刻地講述React中*重要的功能,每章還詳細列齣常見的開發問題,並解釋如何避免它們。
如果你擁有使用jQuery或其他JavaScript框架創建前端應用程序的經驗,但想解決復雜前端應用程序構建過程中日益增多的常見問題,那麼本書就是為你準備的。開始像專傢那樣去使用React吧,今天就把這本書收入囊中!主要內容
◆ 如何創建可組閤的用戶界麵
◆ 理解React的虛擬DOM架構以及如何利用該架構開發應用程序
◆ 瞭解各項功能的原理及重要性
◆ 深入學習React以及React生態係統中重要的第三方庫
◆ 學習如何創建通用/同構應用程序從而改進用戶體驗和SEO
◆ 深刻理解復雜應用程序中的數據流策略
◆ 學習如何測試、完善和部署React項目
作者簡介
Cássio de Sousa Antonio,使用一颱Sinclair Spectrum開啓瞭他的編程生涯,隨後在巴西和美國成長為一名軟件工程師和技術經理。他參與開發過微軟、可口可樂、聯閤利華和匯豐銀行等大公司的項目。他的初創公司於2014年末被收購。Cássio目前擔任技術顧問。你可在Twitter上關注他。
內頁插圖
目錄
第1章 React入門 1
1.1 開始學習之前 1
1.1.1 Node.js和npm 1
1.1.2 JavaScript ES6 2
1.2 定義React 2
1.3 React的優點 2
1.3.1 簡單易學的響應式渲染 3
1.3.2 使用純JavaScript進行
麵嚮組件開發 3
1.3.3 靈活的文檔模型抽象錶現 4
1.4 創建你的*個React
應用程序 4
1.4.1 React開發流程 4
1.4.2 創建你的*個組件 8
1.4.3 減少輸入的字符數量 9
1.4.4 動態值 10
1.5 將組件組閤起來 10
1.5.1 props 10
1.5.2 呈現看闆應用 11
1.5.3 定義組件的層次關係 13
1.5.4 props的重要性 14
1.5.5 創建組件 14
1.6 介紹state 21
1.7 本章小結 23
第2章 深入DOM抽象 25
2.1 React中的事件 25
2.1.1 DOM事件偵聽器 25
2.1.2 看闆應用:管理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 看闆應用:指示卡片的
打開和關閉狀態 31
2.3.1 空格 32
2.3.2 JSX中的注釋 33
2.3.3 渲染動態HTML 33
2.3.4 看闆應用:渲染
Markdown 33
2.4 脫離JSX的React 36
2.4.1 普通JavaScript中的
React元素 36
2.4.2 元素工廠 36
2.4.3 自定義工廠 37
2.5 內聯樣式 37
2.5.1 定義內聯樣式 37
2.5.2 看闆應用:通過內聯樣式
定義卡片顔色 38
2.6 使用錶單 40
2.6.1 受控組件 40
2.6.2 特例 42
2.6.3 非受控組件 43
2.6.4 看闆應用:創建一個
任務錶單 44
2.7 幕後的虛擬DOM 44
2.7.1 key屬性 45
2.7.2 看闆應用:key 45
2.7.3 refs 47
2.8 本章小結 48
第3章 使用組件構建應用程序 49
3.1 校驗屬性 49
3.1.1 屬性的默認值 50
3.1.2 內置的propTypes校驗器 51
3.1.3 為看闆應用定義
propTypes 52
3.1.4 自定義propTypes校驗器 54
3.2 組件組閤的策略與
*佳實踐 55
3.2.1 有狀態的組件和單純組件 55
3.2.2 哪些組件應當是有
狀態組件 56
3.2.3 數據流和組件通信 59
3.3 組件的生命周期 63
3.3.1 聲明周期的階段與函數 63
3.3.2 生命周期函數實踐:
數據獲取 64
3.4 淺談不變性 67
3.4.1 普通JavaScript中的
不變性 67
3.4.2 嵌套對象 69
3.4.3 React不變性助手 70
3.5 看闆應用:添加一點
復雜性 73
3.5.1 從外部API獲取初始的
卡片數據 73
3.5.2 將任務迴調以props傳遞 76
3.5.3 處理任務數據 80
3.5.4 基本的樂觀更新迴滾 83
3.6 本章小結 87
第4章 復雜交互 89
4.1 React中的動畫 89
4.1.1 CSS過渡和動畫基礎 89
4.1.2 ReactCSSTransitionGroup 95
4.2 拖放 100
4.2.1 React DnD實現概述 101
4.2.2 React DnD實現示例 101
4.3 看闆應用:支持動畫和
拖放 113
4.3.1 卡片切換動畫 113
4.3.2 卡片的拖曳 115
4.4 本章小結 129
第5章 路由 131
5.1 使用原生方式實現路由 131
5.2 React Router 135
5.2.1 Index路由 138
5.2.2 帶參數的路由 139
5.2.3 設置活動鏈接 144
5.2.4 傳遞props 144
5.2.5 將UI界麵與URL解耦 147
5.2.6 在代碼中更改路由 149
5.2.7 History庫 152
5.2.8 看闆應用:實現
路由功能 153
5.3 本章小結 166
第6章 結閤Flux的React
應用程序架構 167
6.1 什麼是Flux 167
6.1.1 Store 167
6.1.2 Action 168
6.1.3 Dispatcher 169
6.2 假想的簡單Flux
應用程序 169
6.3 Flux工具包 177
6.3.1 Flux Store工具 177
6.3.2 容器組件高階函數 180
6.4 異步Flux 181
6.4.1 waitFor:協調Store的
更新數序 181
6.4.2 異步數據獲取 184
6.5 AirCheap應用程序 184
6.5.1 搭建:項目組織和
基本文件 184
6.5.2 創建用於獲取機場的
API助手和Action創
建器 185
6.5.3 AirportStore 188
6.5.4 應用組件 189
6.5.5 完成AirCheap應用程序:
加載機票 194
6.6 改進異步獲取數據的實現 204
6.7 看闆應用:遷移到
Flux架構 207
6.7.1 重構:創建Flux基本
結構並遷移文件 207
6.7.2 將數據獲取操作遷移到
Flux架構 212
6.7.3 實現FetchCards Action、
API方法調用和Store
迴調 213
6.7.4 將所有卡片和任務Action
遷移到Flux架構 216
6.7.5 準備功能遷移 216
6.7.6 組件 225
6.7.7 刪除所有組件state 231
6.8 本章小結 241
第7章 性能調優 243
7.1 子級校正過程的工作原理 243
7.1.1 批處理 243
7.1.2 子樹渲染 244
7.2 React Perf 244
7.2.1 性能測試應用 245
7.2.2 安裝並使用React Perf 248
7.3 shouldComponentUpdate 252
7.4 本章小結 254
第8章 React同構應用 255
8.1 Node.js和Express 255
8.2 React同構基礎 260
8.2.1 創建項目結構 260
8.2.2 在服務器端渲染React
組件 263
8.2.3 在客戶端中掛載React 266
8.3 路由 270
8.3.1 配置內部路由 270
8.3.2 動態數據獲取 271
8.3.3 渲染路由 273
8.4 本章小結 278
第9章 測試React組件 279
9.1 Jest 279
9.2 React測試工具 281
9.2.1 渲染用於測試的組件 281
9.2.2 遍曆並查找子節點 284
9.2.3 模擬事件 285
9.2.4 淺渲染 286
9.3 本章小結 290
附錄 JavaScript 2015 291
前言/序言
React是一個用來創建組閤式Web應用程序的開源庫,由Facebook維護。自從公開發布後,這個庫迅速風靡全球,並且圍繞著它産生瞭一個生機勃勃的社區。
本書將涵蓋React庫的各個細節,並將討論基於組閤式模型來創建Web組件接口的*佳實踐。React庫本身並不大,所以本書同時涵蓋瞭React生態係統中的一些工具和庫(例如React Router和Flux架構),以便為讀者提供創建完整應用程序所需的足夠知識。
書中對每個主題的講解都簡潔明瞭,你將逐一瞭解到你需要掌握的各個細節,從而學會真正有效地使用它們。本書對React中*重要的那些特性的講解,言簡意賅、由淺入深,每個章節中還詳細說明實際開發中可能麵臨的常見問題,並告訴你如何避免它們。
本書概要
第1章提供瞭大量的信息來讓你起步,介紹基本的React配置,並讓你能全麵瞭解在React中如何組織用戶界麵。
第2章將深入介紹JSX(這是React用來在JavaScript中聲明組件標記的JavaScript語法擴展),同時展示如何使用React的事件係統,以及React的虛擬DOM實現。
第3章講述瞭如何通過使用組件的方式來創建一個完整的應用程序。你將學習React應用程序的數據如何在組件間流動,並深入瞭解組件(包括嵌套組件、公開一個API、props、state等知識)。
第4章講述瞭如何為用戶創建豐富的用戶體驗。你將學習如何在React的插件CSSTransitionGroup的幫助下實現動畫效果,以及使用一個名為React DnD的外部庫來實現拖放功能。
第5章講述瞭路由功能。你將學習如何使用React社區中被廣泛使用的React Router,來管理URI和設置應用程序的訪問點。
第6章嚮讀者展現瞭Flux架構。你將學習這個架構的細節,它解決瞭哪些問題,以及如何將它集成到一個React應用程序中。
第7章講述瞭性能調優。在該章,你將學習如何度量應用程序的性能指標。然後你將瞭解如何優化代碼,使應用程序有更好的性能錶現。
第8章講述瞭React同構應用程序(或者稱React通用應用程序,也就是在服務器上渲染React)。這種技術可以實現更好的性能、搜索引擎優化和優雅降級(如果瀏覽器禁用瞭本地JavaScript,應用程序也能正常工作)。
*後,第9章講述瞭測試。你將學習如何使用React的Test Utils來測試組件。還將學習Jest,這是一個由Facebook創建的、*適閤用來測試React項目的測試框架。
本書讀者對象
本書主要麵嚮使用諸如jQuery/Backbone/Angular創建前端應用程序且擁有一些經驗的中級水平JavaScript開發人員,他們需要瞭解更好的工具和更多知識,來解決構建復雜前端應用程序過程中所遇到的越來越多的常見問題。
源代碼
本書中所包含的示例項目的源代碼,位於Apress網站上的Source Code區域。請訪問www.apress.com,單擊Source Code,然後查找本書的書名(請使用英文書名Pro React來進行搜索),就可以找到它們。另外,本書所有的示例代碼和一些額外的實用性代碼,都可在本書的GitHub頁麵上找到,網址是pro-react.github.io。此外,可訪問www.tupwk. com.cn/downpage,輸入中文書名或中文ISBN來下載源代碼,也可以掃描本書封底的二維碼下載資料。
聯係作者
感謝你購買本書。我希望你能享受閱讀本書的樂趣,並從中獲取有價值的信息。歡迎你個人針對本書內容與源代碼給我提供反饋、問題和評論。你可以通過聯係我。
祝你好運!期待著你的React應用程序的誕生!
《前端微服務架構:解耦與重構的藝術》 內容簡介: 在快速迭代的互聯網時代,前端應用的復雜度如同滾雪球般不斷攀升。單體前端架構在小型項目伊始或許高效,但隨著功能模塊的增加、團隊規模的擴大以及技術棧的演進,其弊端逐漸顯現:代碼耦閤度高、維護睏難、部署周期長、技術選型受限、團隊協作效率低下等問題,如同一個個棘手的頑疾,嚴重製約著項目的健康發展和創新能力的釋放。 《前端微服務架構:解耦與重構的藝術》深入剖析瞭傳統單體前端架構所麵臨的挑戰,並係統性地提齣瞭基於微服務理念的前端架構演進方案。本書並非僅僅介紹一個抽象的概念,而是以實戰為導嚮,循序漸進地引導讀者掌握如何將龐大、臃腫的前端應用拆解成一係列獨立、自治、可維護、可擴展的“微前端”單元。我們將一同探索這一革命性的轉變,如何從根本上解決前端工程化的痛點,迎接更高層次的開發效率與團隊協作。 本書內容涵蓋瞭從架構設計理念到具體技術實現的完整鏈路。我們將首先深入理解微前端的核心思想——關注點分離和獨立部署。這意味著每個微前端單元都將擁有自己的技術棧(在一定程度上)、自己的業務邏輯、自己的路由和自己的部署流程。這樣的設計能夠極大地降低代碼耦閤度,使得各個團隊可以獨立負責並快速迭代各自負責的模塊,無需等待其他團隊的同步,從而顯著縮短開發周期,加快産品上綫速度。 在技術選型方麵,本書會詳細探討實現微前端的多種主流方案。我們將重點介紹基於路由的集成,如同一個主應用承載著不同的路由,每個路由指嚮一個獨立的微前端應用。這種方式易於理解和實現,適閤項目初期進行拆分。接著,我們會深入研究基於 iframe 的集成,雖然存在一些限製,但其隔離性強,能有效避免不同微前端之間的樣式和腳本衝突,適用於需要高度隔離的場景。 更進一步,本書將著重講解基於 Web Components 的集成,這是一種標準化的組件化封裝方式,能夠實現跨框架、跨技術的互操作性,為未來的技術演進提供瞭極大的靈活性。我們還將探討基於模塊聯邦(Module Federation)的集成,這是由 webpack 提供的強大功能,允許在運行時動態地加載和共享代碼模塊,打破瞭傳統打包構建的界限,實現瞭真正意義上的動態組件加載和跨應用組件復用,極大地提升瞭代碼共享的效率和靈活性。 《前端微服務架構:解耦與重構的藝術》將以大量的實踐案例貫穿始終。我們將模擬一個復雜的電商平颱前端,逐步將其拆解為用戶中心、商品列錶、商品詳情、購物車、訂單管理等多個獨立微前端。在拆解過程中,我們將詳細講解每一個步驟的設計思路、麵臨的技術挑戰以及相應的解決方案。例如,如何處理跨微前端的路由跳轉,如何實現微前端之間的數據通信(如通過事件總綫、共享狀態管理庫等),如何統一全局樣式和主題,以及如何保證用戶認證和授權的連貫性。 本書特彆強調狀態管理在微前端架構中的重要性。我們將分析在分布式前端環境中,如何有效地管理全局狀態和局部狀態,避免數據不一緻和狀態混亂。我們會介紹幾種可行的狀態管理策略,包括但不限於使用單例模式維護全局共享狀態、利用瀏覽器本地存儲進行跨應用數據持久化、或者采用專門為微前端設計的狀態管理庫。 此外,模塊聯邦將是本書濃墨重彩的一筆。我們將深入其核心概念,包括 Host(宿主應用)和 Remote(遠程應用)的概念,以及如何配置 `module-federation-plugin` 來定義可暴露的模塊和可引用的模塊。我們將演示如何通過模塊聯邦實現共享組件庫、共享業務邏輯,以及如何實現動態加載第三方庫,從而實現代碼的極緻復用和按需加載,顯著提升應用的性能和開發效率。 在性能優化方麵,本書也將提供切實可行的建議。微前端架構的引入可能會帶來額外的加載開銷,我們將討論如何通過代碼分割、懶加載、預加載、CDN 優化、以及服務端渲染(SSR)等技術手段,最大限度地減少微前端帶來的性能影響,確保用戶獲得流暢的瀏覽體驗。 本書還將觸及團隊協作與組織架構的調整。微前端架構天然地契閤瞭“康威定律”,即係統設計傾嚮於反映組織溝通結構。我們將探討如何通過劃分團隊職責,讓每個團隊負責一個或多個微前端,從而實現更高效、更自治的開發模式。這不僅能提升開發效率,更能激發團隊的創新活力。 最後,《前端微服務架構:解耦與重構的藝術》將為你提供一個全麵的、可落地的微前端解決方案。無論你是正在麵對日益復雜的單體應用,渴望尋求更優的架構模式,還是希望提前布局,為未來的項目發展奠定堅實的基礎,本書都將是你不可多得的參考指南。通過本書的學習,你將能夠掌握拆解、構建、維護和優化復雜前端應用的強大能力,帶領你的團隊邁入一個更加靈活、高效、可擴展的前端開發新時代。 本書適閤的讀者群體: 前端工程師: 無論初級、中級還是高級前端開發者,都將從本書中獲得構建和維護大型前端項目的寶貴知識和實戰經驗。 前端架構師: 為尋求更優的前端架構設計方案,解決單體應用瓶頸的架構師提供係統性的理論指導和技術實踐。 技術團隊負責人/經理: 幫助理解和實施微前端架構,優化團隊協作模式,提升項目開發效率和交付速度。 希望深入理解現代前端工程化理念的開發者: 瞭解前端技術演進的趨勢,掌握應對復雜項目挑戰的先進方法。 本書的目標: 幫助讀者理解微前端架構的核心理念和優勢。 掌握多種主流的微前端集成方案,並理解其適用場景。 學會如何將單體前端應用逐步拆解為獨立的微前端單元。 掌握微前端架構下的狀態管理、路由、通信等關鍵技術。 深入理解和實踐模塊聯邦(Module Federation)的強大能力。 瞭解微前端架構下的性能優化和團隊協作策略。 最終能夠獨立設計、開發和維護一個可伸縮、可維護的微前端應用。