React与Redux开发实例精解

第一部分基础篇1
第1 章技术简介. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
React 2
Redux 3
Node 与Universal 渲染4
Babel 5
· · · · · · (更多)

第一部分基础篇1
第1 章技术简介. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
React 2
Redux 3
Node 与Universal 渲染4
Babel 5
Webpack 5
总结6
第2 章在Node.js 中运行React . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
例子7
编写React 组件7
在Node.js 中渲染组件8
使用Babel 编译运行Node.js 程序9
Require Hook 简介9
使用Require Hook 的步骤9
总结10
第3 章在浏览器中运行React. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
例子11
组件复用11
在浏览器中渲染React 组件12
使用Webpack 打包编译12
在浏览器中运行14
总结14
第4 章开发服务器和热替换. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
例子15
安装16
配置Babel 16
使用react-hmre 预设16
react-hmre 的功能17
配置Webpack 18
配置Express 服务器21
总结22
第5 章React 的创新语法：JSX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
例子24
JSX 简介24
JSX 常用语法25
类似HTML 25
JavaScript 表达式26
样式27
注释27
数组27
HTML 标签vs. React 组件28
总结29
第6 章React 的数据载体：state、props 与context. . . . . . . . . . . . . . . . . . . . . 30
例子30
State 31
Props 32
使用props 33
验证props 33
组合使用state 与props 35
Context 36
使用props 传递数据36
使用context 传递数据38
Props 与context 的适用场景40
在React 开发者工具中查看41
总结42
第7 章React 的两个对象：ReactElement 与组件实例. . . . . . . . . . . . . . . . . . 43
例子43
ReactElement 44
JSX 中的闭合标签是ReactElement 44
ReactElement 是什么44
ReactElement 的两种类型45
React 组件的渲染流程45
组件实例46
组件实例简介46
组件、ReactElement 与组件实例的区别47
组件实例的生灭：生命周期函数48
React 组件中的this 49
总结55
第8 章初识Redux . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56
例子56
Action 56
Reducer 57
定义57
纯函数58
不能修改参数state 58
Store 60
职能60
创建60
获取与监听60
发起action 61
总结62
第9 章Action 创建函数与Redux Thunk 中间件. . . . . . . . . . . . . . . . . . . . . . . 64
例子64
Action 创建函数65
编写65
发起65
意义66
Redux unk 中间件66
功能66
安装激活67
总结69
第二部分进阶篇71
第10 章React 与Redux 的连接：手动连接. . . . . . . . . . . . . . . . . . . . . . . . . . . . 72
例子72
手动连接的步骤73
编写React 组件73
编写Redux 75
将Redux 手动连接到React 组件76
手动连接的缺点77
总结77
第11 章React 与Redux 的连接：使用react-redux 连接. . . . . . . . . . . . . . . . 78
例子78
连接步骤78
多种写法81
连接原理85
Provider 工作原理85
connect 工作原理86
展示组件与容器组件86
总结87
第12 章实现撤销/重做. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88
例子88
撤销/重做88
Redux 开发者工具92
安装92
使用93
Redux 并不“低效” 97
总结98
第13 章测试. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 99
例子99
测试工具100
Mocha 100
Enzyme 101
Expect 102
测试action 创建函数103
测试React 组件106
测试容器组件108
测试reducer 纯函数110
运行测试脚本111
总结112
第14 章Redux 的全局状态与React 组件的内部状态. . . . . . . . . . . . . . . . . . . 114
例子114
全局状态与内部状态的定义114
全局状态完全替代了内部状态？ 115
全局状态与内部状态的适用场景118
总结118
第15 章React 与Redux 中的数组处理. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 119
例子119
reduce() 119
概述119
语法120
示例120
filter() 121
概述121
语法121
示例122
map() 122
概述122
语法122
示例123
every() 123
概述123
语法123
示例124
some() 124
概述124
语法124
示例125
展开运算符125
概述125
语法125
示例125
总结126
第16 章Redux 的大舞台：异步. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 127
例子127
JavaScript 事件驱动编程127
Promise 129
Redux 中的异步132
异步action 创建函数133
异步请求前后的state 变化133
State tree 结构135
查看state tree 136
如何构建state tree 136
异步与变化139
准备工作139
追踪异步与变化143
总结145
第17 章自定义Redux 中间件. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147
例子147
中间件的功能147
中间件的编写148
中间件的执行149
自定义API 中间件151
总结154
第18 章Universal 渲染. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 155
例子155
公用一套代码156
服务端渲染156
客户端渲染158
总结159
第三部分拓展篇161
第19 章Universal 渲染神器：Webpack 同构工具. . . . . . . . . . . . . . . . . . . . . . 162
例子162
Webpack 同构工具的功能163
服务端调用164
客户端调用165
真实场景167
配置服务器的入口167
独立开发服务器168
配置Webpack 169
配置Webpack 同构工具171
在服务端和客户端使用require() 173
总结174
第20 章多页面的实现：路由. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 175
例子175
路由也是组件176
路由匹配177
使用Link 和IndexLink 导航178
服务端路由179
总结181
第21 章多页面下的异步操作. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 182
例子182
redux-amrc 182
功能183
配置184
使用184
Action 与state 185
API 186
多页面下的异步操作187
编写测试API 187
预载数据188
手动加载数据191
操作数据192
总结193
第22 章使用Bootstrap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 194
例子194
bootstrap-loader 195
基本用法195
配置196
PostCSS 与Autoprefixer 200
简介200
用法201
React-Bootstrap 202
总结204
第四部分实战篇205
第23 章搭建大型项目. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 206
例子206
开发服务器209
开发环境下的Webpack 配置209
Webpack 同构工具的配置212
独立的开发服务器213
启动开发服务器214
前端服务器215
配置前端服务器215
使用组件渲染HTML 页面218
启动前端服务器221
API 服务器222
配置API 服务器222
启动API 服务器223
生产环境下的构建编译224
编译运行Node.js 224
生产环境下的Webpack 配置225
公用代码229
工具集229
路由与页面231
质量保证235
测试235
Airbnb 编码规范239
去毛机246
EditorConfig 248
总结248
第24 章表单. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 250
例子250
高阶组件ReduxForm 251
设置252
简单表单253
同步验证表单256
异步失焦验证表单258
提交表单到服务器260
总结264
第25 章图表与表格. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 265
例子265
图表组件265
表格组件269
从服务器获取数据272
总结275
第26 章用户认证. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 277
例子277
编写认证API 279
Express-session 中间件279
加载当前认证状态280
登录与登出280
API 权限保护281
发送cookie 282
编写用于认证的action 创建函数283
登录页面和导航栏285
前端路由保护290
总结291
第27 章部署. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 292
例子292
Heroku 平台293
安装工具并登录293
准备程序293
部署程序294
其他操作295
持续集成296
与生产相关的问题298
总结299
第28 章其他资源. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 300
在线文档300
参与社区活动301
· · · · · · (收起)