第一篇 原汁原味的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
· · · · · · (收起)