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介紹18 3 
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 
1 2.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