産品特色
編輯推薦
React技術日新月異,現有資料煩瑣雜亂,或語焉不詳、或難以理解,或文檔與軟件不相匹……沒關係,本書帶你探尋React的本質和原理,針對實際應用場景給齣典型組件的開發思路及代碼、React相關工具鏈的原理和使用方法,以及相關使用流程React的高級功能。力求為讀者呈現完整詳盡的React前端技術開發,降低學習成本,獲取吸收技術精華。
內容簡介
《React前端技術與工程實踐》是一本專門介紹React前端框架基本原理及其相關工程實踐的技術參考書。《React前端技術與工程實踐》分為14章,主要包括React技術基本原理、相關前端開發工具鏈、實用技巧及熱門資源介紹四部分。《React前端技術與工程實踐》結構完整、層次清晰,由淺入深地介紹瞭React前端技術的原理、相關工具鏈的使用及React技術在工程中的應用技巧等。《React前端技術與工程實踐》關注技術原理,在講解技術應用的同時介紹相關原理和理念,幫助讀者更深入地理解和掌握React技術,並能盡快地投入實際應用。《React前端技術與工程實踐》也盡可能全麵地囊括當前JavaScript前端工程開發的相關技術與工具,通過《React前端技術與工程實踐》可以全麵地掌握React相關的知識體係並較快地進入實際工程開發。《React前端技術與工程實踐》語言淺顯易懂,輔以生動的實例,是React前端工程開發的好助手和好工具。
《React前端技術與工程實踐》適用於對前端開發有一定瞭解和開發經驗的讀者,也可作為相關培訓教材使用。
作者簡介
李晉華,信息係統架構師和技術顧問。多年從事軍事物流信息係統研發工作和相關教學工作。在後勤信息化領域承擔多項重點項目的研發工作。曾獲軍隊科技進步奬二等奬。在係統架構設計、係統集成和前端交互設計等方麵具有豐富的實戰經驗。
目錄
第一篇 原汁原味的React
1 React簡介 3
1.1 前端技術發展及趨勢 3
1.2 React簡介 4
1.3 React特點 5
1.3.1 虛擬DOM 5
1.3.2 組件化 6
1.3.3 單嚮數據流 7
1.4 React與React Native 7
1.5 對React的幾個認識誤區 8
2 React基礎 9
2.1 React最小環境搭建 9
2.2 Helloworld示例 11
2.3 React基本架構 13
2.3.1 虛擬DOM結構 13
2.3.2 虛擬DOM元素 14
2.3.3 組件工廠 15
2.3.4 React的內部更新機製 16
2.3.5 虛擬DOM的特殊屬性 19
2.4 JSX語法 20
2.4.1 JSX等價描述 22
2.4.2 JSX轉譯工具Babel 23
2.4.3 JSX中的錶達式 24
2.4.4 JSX中的注釋 26
2.4.5 JSX展開屬性 26
2.5 React注意事項 28
2.5.1 ReactDOM.render的目標節點 28
2.5.2 組件名約定 28
2.5.3 class屬性和for屬性替換 28
2.5.4 行內樣式 29
2.5.5 自定義HTML屬性 30
2.5.6 HTML轉義 30
3 React組件 33
3.1 組件主要成員 34
3.1.1 state成員 34
3.1.2 props成員 36
3.1.3 render成員函數 37
3.2 組件的生命周期 37
3.2.1 實例化階段 38
3.2.2 活動階段 39
3.2.3 銷毀階段 41
3.3 組件事件響應 41
3.3.1 事件代理 42
3.3.2 事件自動綁定 42
3.3.3 閤成事件 42
3.4 props屬性驗證 45
3.5 組件的其他成員 47
3.6 關於state的幾個設計原則 49
3.6.1 哪些組件應該有state 49
3.6.2 哪些數據應該放入state中 49
3.6.3 哪些數據不應該放入state中 50
4 React頂級API 51
4.1 React命名空間 51
4.2 ReactDOM命名空間 53
4.3 ReactDOMServer命名空間 55
4.4 children工具函數 56
5 React錶單 59
5.1 錶單元素 59
5.2 事件響應 60
5.2.1 bind復用 61
5.2.2 name復用 62
5.3 可控組件與不可控組件 64
5.3.1 可控組件 65
5.3.2 不可控組件 66
6 React復閤組件 69
6.1 組件嵌套 69
6.2 組件參數傳遞 71
6.2.1 動態參數傳遞 71
6.2.2 使用Underscore來傳遞 72
6.2.3 使用Context 來傳遞 73
6.3 組件間的通信 76
6.3.1 事件迴調機製 76
6.3.2 公開組件功能 77
6.3.3 mixins 79
6.3.4 動態子級 81
6.4 高階組件 82
6.4.1 高階組件概念 82
6.4.2 高階組件應用:屬性轉換器 83
6.4.3 高階組件應用:邏輯分離與封裝 84
7 React常用組件示例 88
7.1 按鈕組件 88
7.2 分頁組件 90
7.3 帶分頁的錶格組件 94
7.4 樹形組件 103
7.5 模態對話框組件 109
7.6 綜閤實例 117
7.6.1 綜閤實例一 117
7.6.2 綜閤實例二 117
8 React插件 121
9 React實用技巧 123
9.1 綁定React未提供的事件 123
9.2 通過AJAX加載初始數據 124
9.3 使用ref屬性 126
9.3.1 ref字符串屬性 126
9.3.2 ref迴調函數屬性 128
9.4 使用classNames.js 130
9.4.1 classNames介紹 130
9.4.2 classNames用法 131
9.4.3 在ES 6中使用動態的classNames 131
9.4.4 多類名去重 132
9.5 使用Immutable.js 132
9.5.1 Immutable.js介紹 132
9.5.2 Immutable基本用法 133
9.5.3 Immutable對象比較 134
9.5.4 Immutable List用法 135
9.5.5 Immutable Map用法 136
9.6 與jQuery集成 138
9.6.1 React與jQuery的區彆 138
9.6.2 在React中使用jQuery 139
9.6.3 在jQuery中使用React 141
第二篇 React開發相關工具鏈
10 JS前端開發工具鏈 145
10.1 Node.js 145
10.1.1 Node.js安裝 146
10.1.2 Node.js使用 148
10.2 Node.js模塊和包 150
10.2.1 模塊 150
10.2.2 包 151
10.3 npm模塊管理器 153
10.3.1 npm安裝 153
10.3.2 npm初始化 154
10.3.3 npm安裝模塊 155
10.3.4 使用cnpm 157
10.3.5 npm常用命令 158
10.3.6 自定義腳本 161
10.4 ES 6規範簡介 163
10.4.1 ES 6語法簡介 163
10.4.2 ES 6模塊管理 168
10.4.3 基於ES 6語法的React組件寫法 170
10.5 ESLint工具 172
10.5.1 ESLint介紹 172
10.5.2 安裝和使用 173
10.5.3 配置 174
10.5.4 React檢查 175
10.6 Babel工具 176
10.6.1 配置.babelrc文件 177
10.6.2 命令行轉譯工具:babel-cli 178
10.6.3 命令行運行工具:babel-node 179
10.6.4 實時轉譯模塊:babel-register 180
10.6.5 瀏覽器實時轉譯模塊:browser.js 180
10.6.6 轉譯API模塊:babel-core 181
10.6.7 擴展轉譯模塊:babel-polyfill 181
10.6.8 ESLint前置轉譯模塊:babel-eslint 181
10.6.9 Mocha前置轉譯模塊:babel-core/register 182
10.7 webpack打包工具使用與技巧 183
10.7.1 前端模塊化與webpack介紹 183
10.7.2 webpack的打包React實例 185
10.7.3 webpack模塊加載器 189
10.7.4 webpack開發服務器 190
10.7.5 React熱加載器 190
10.7.6 打包成多個資源文件 192
10.8 基於完整工具鏈的項目目錄結構 194
第三篇 React進階
11 Flux & Redux 199
11.1 Flux 199
11.1.1 Flux簡介 200
11.1.2 基本架構 201
11.1.3 動作和動作發生器 202
11.1.4 分發器 203
11.1.5 存儲 203
11.1.6 視圖與控製視圖 204
11.2 Redux 205
11.2.1 Redux基本架構 205
11.2.2 Action 207
11.2.3 Reducer 208
11.2.4 Store 210
11.2.5 bindActionCreators 212
11.3 React-Redux 213
11.3.1 React-Redux的使用方法 213
11.3.2 Connect 215
11.4 Redux工程目錄結構 218
12 路由 221
12.1 前端路由 221
12.2 路由的基本原理 222
12.3 安裝與引用 222
12.4 路由配置 223
12.4.1 路由器和路由 223
12.4.2 嵌套路由 224
12.4.3 默認路由 225
12.4.4 path 屬性 226
12.4.5 NotFoundRoute組件 227
12.4.6 Redirect組件 228
12.4.7 IndexRedirect 組件 229
12.4.8 history屬性 229
12.4.9 路由迴調 230
12.5 路由切換 231
12.5.1 Link組件 232
12.5.2 IndexLink 232
12.5.3 動態路由切換 233
13 React單元測試 235
13.1 測試腳本示例 236
13.2 React測試代碼示例 237
13.3 React測試相關工具 238
13.3.1 Mocha 238
13.3.2 chai 239
13.3.3 jsdom 241
13.3.4 react-addons-test-utils 242
13.4 創建測試環境 245
13.5 React組件測試 246
13.5.1 淺渲染 246
13.5.2 全DOM渲染 248
13.5.3 使用findDOMNode方法查找DOM 249
第四篇 React相關資源
14 React相關資源介紹 253
14.1 React Starter Kit 253
14.2 React bootstrap 257
14.3 Material-UI 259
14.4 Ant Design 261
14.5 React-d 3與echarts-for-react 263
14.6 React Storybook 265
14.7 awesome-react 266
前言/序言
隨著AJAX技術、Chrome JavaScript V8引擎的齣現,以及移動端的興起,前端發生瞭天翻地覆的變化。傳統的JavaScript知識體係即將過時。前端正以全新的思路和革新的理念得到越來越多的重視和關注,湧現齣瞭眾多技術,如Node.js、NPM、CommonJS、AMD、ES 6、Webpack、Babel、React、AngularJS等。眾多新技術的衝擊讓人無所適從,而且,往往一個技術會附帶一係列相關的技術和工具,更是讓人難以下手。
React技術的更新發展也很快,相關的資料在網上雖然能查到,但往往隻是針對一個特定技術點,語焉不詳;或者使用瞭最新語法,讀者難以理解;又或者文檔與軟件版本不匹配,導緻在模塊安裝時齣現莫名提示、運行錯誤等問題。
有感於此,編者編著瞭本書,針對這些痛點,力圖以React技術為抓手,整體介紹與當前前端相關的主流技術體係與使用途徑,為讀者找到一條技術的主乾脈絡,方便讀者全麵快速地深入學習以React為代錶的前沿前端技術。為使讀者降低學習成本,並很快地投入到工程實踐中,本書還介紹瞭前端開發環境搭建和相關工具鏈的使用,力圖為讀者呈現前端開發的全貌。另外,本書在逐層深入介紹React技術的同時,還少量地講解瞭底層技術原理,方便讀者深入理解。
本書內容
本書分四部分,第一部分講解React的基本原理和架構。考慮到相關輔助工具對知識的乾擾,此部分排除外圍技術乾擾,以最樸素、最原始的方式來看React的本質和原理,同時針對實際應用場景介紹瞭典型組件的開發思路及代碼。第二部分講解React相關工具鏈的原理和使用方法,切入麵嚮工程化開發的前端開發技術體係,介紹相關工具的使用方法,並重點介紹與React相關的使用流程。第三部分講解React的高級功能,如測試、路由等,是應對復雜界麵的完整解決方案不可或缺的重要組成部分。第四部分介紹當前React的熱門技術和相關資源。
源代碼
本書的主要實例均附有源代碼,源代碼以實例包的形式發布在網上,讀者可以自行下載。實例包中提供瞭Node.js的安裝程序和運行說明文件。書中所提到的實例名對應網上同名文件夾。實例包根目錄下的“使用說明.txt”文件說明瞭要運行的前提條件和實施步驟。
本書特點
新。本書中的JavaScript使用ES 6語法,React針對v15.0.0以上版本,JSX使用Babel 6.x版本等,確保讀者掌握最前沿的知識和技能。
透。本書不是簡單地介紹知識,而是透過知識來看本質的理念和原理,隻有這樣纔能把技術吃透、用活。
全。本書力圖將React相關的技術體係集中在一起,包括React相關工具使用、React實用技巧、React高級框架等,使讀者全麵掌握React,減少時間成本,提高知識獲取效率。
實。本書的講解和實例盡量嚮實際使用場景靠攏,所涉及的復雜組件實例 (樹形組件、分頁組件、錶格組件等)均可直接用於實際開發環境,且配有詳細的解說,讀者可以快速上手。
適用範圍
(1)適用於從事前端技術開發且有一定JavaScript基礎的初學者。
(2)適用於從事網站前端設計與製作的開發者。
(3)可作為相關培訓機構的專題培訓教材。
(4)可作為相關開發者的工具書。
本書約定
(1)在麵嚮對象的語言中,成員函數也稱為方法,本書統一稱為“成員函數”或簡稱為“函數”。
(2)代碼都具有陰影背景,以示區彆。
(3)代碼中要重點強調、提醒的部分使用粗體格式。
關於我們
參與本書編寫的人員還包括韓崗、劉蘭崢、鬍鬆奇、劉彥君。盡管我們已經做瞭仔細校對,但書中疏漏和不足之處在所難免,如果在書中發現任何的文字和代碼錯誤,非常歡迎讀者朋友反饋給我們。如果您有好的建議、意見,或遇到與本書內容相關的疑難問題,都可以聯係我們,我們會及時為您解答。服務郵箱:ljhiiii@sina.com。
React前端技術與工程實踐 下載 mobi epub pdf txt 電子書