Web开发经典丛书快速上手REACT编程

第Ⅰ部分　React基础 第1章 初积React 3 1.1 什么是React 4 1.2 React解决的问题 5 1.3 使用React的好处 6 1.3.1 简单性 6 1.3.2 速度和可测试性 11 1.3.3 生态和社区 12 1.4 React的缺点 13 1.5 React如何与Web应用集成 13 1.5.1 React类库和渲染目标 14 1.5.2 单页面应用和React 15 1.5.3 React技术栈 17 1.6 **个React项目： Hello World 18 1.7 测验 21 1.8 小结 21 1.9 测验答案 22 第2章　React起步 23 2.1 内嵌元素 23 2.2 创建组件类 26 2.3 属性 29 2.4 测验 34 2.5 小结 34 2.6 测验答案 34 第3章　JSX 35 3.1 JSX是什么？它有什么优点 36 3.2 理解JSX 38 3.2.1 使用JSX创建元素 39 3.2.2 在组件中使用JSX 40 3.2.3 在JSX中输出变量 41 3.2.4 在JSX中使用属性 42 3.2.5 创建React组件的方法 46 3.2.6 JSX中的if/else 47 3.2.7 JSX中的注释 51 3.3 使用Babel设置JSX转译器 51 3.4 React和JSX陷阱 55 3.4.1 特殊字符 56 3.4.2 data-属性 56 3.4.3 style属性 57 3.4.4 class和for 58 3.4.5 布尔类型的属性值 58 3.5 测验 59 3.6 小结 59 3.7 测验答案 59 第4章　与状态交互 61 4.1 什么是React组件的状态 62 4.2 使用状态 63 4.2.1 访问状态 63 4.2.2 设置初始状态 65 4.2.3 更新状态 67 4.3 状态和属性 70 4.4 无状态组件 71 4.5 有状态组件和无状态组件 73 4.6 测验 77 4.7 小结 77 4.8 测验答案 78 第5章　React组件生命周期 79 5.1 React组件生命周期事件的 全景视图 80 5.2 事件的分类 80 5.3 实现生命周期事件 82 5.4 执行所有事件 84 5.5 挂载事件 86 5.5.1 componentWillMount( ) 87 5.5.2 componentDidMount( ) 87 5.6 更新事件 90 5.6.1 componentWillReceiveProps (newProps) 90 5.6.2 shouldComponentUpdate( ) 91 5.6.3 componentWillUpdate( ) 91 5.6.4 componentDidUpdate() 92 5.7 卸载事件 92 5.8 一个简单示例 92 5.9 测验 95 5.10 小结 95 5.11 测验答案 96 第6章　React事件处理 97 6.1 在React中处理DOM事件 97 6.1.1 捕获和冒泡阶段 100 6.1.2 React事件的内幕 102 6.1.3 使用React SyntheticEvent 事件对象 105 6.1.4 使用事件和状态 108 6.1.5 传递事件处理程序和 属性 109 6.1.6 组件通信 112 6.2 响应React不支持的DOM 事件 113 6.3 React和其他库的集成： jQuery UI事件 116 6.3.1 集成按钮 116 6.3.2 集成标签 118 6.4 测验 119 6.5 小结 119 6.6 测验答案 120 第7章　在React中使用表单 121 7.1 在React中使用表单的*佳 实践 121 7.1.1 在React中定义表单及 响应事件 123 7.1.2 定义表单元素 125 7.1.3 捕获表单变更 130 7.1.4 账户字段示例 132 7.2 使用表单的其他方式 134 7.2.1 可捕获变更的非受控元素 135 7.2.2 不捕获变更的非受控元素 136 7.2.3 使用引用获取值 137 7.2.4 默认值 139 7.3 测验 140 7.4 小结 141 7.5 测验答案 141 第8章　扩展React组件 143 8.1 组件中的默认属性 144 8.2 React属性类型和验证 145 8.3 渲染子组件 152 8.4 创建React高阶组件以实现 代码复用 154 8.4.1 使用displayName：用以区分 父组件与子组件 156 8.4.2 使用扩展运算符：传递所有 属性 157 8.4.3 使用高阶组件 158 8.5 *佳实践：展示组件与容器 组件 160 8.6 测验 161 8.7 小结 161 8.8 测验答案 162 第9章　项目：菜单组件 163 9.1 项目结构和脚手架 164 9.2　不使用JSX构建菜单 165 9.2.1 Menu组件 165 9.2.2 Link组件 168 9.2.3 运行菜单组件 170 9.3 在JSX中构建菜单 171 9.3.1 重构Menu组件 172 9.3.2 重构Link组件 174 9.3.3 运行JSX项目 175 9.4 测验 175 9.5 小结 176 第10章　项目：Tooltip组件 177 10.1 项目结构和脚手架 178 10.2 Tooltip组件 179 10.2.1 toggle( )函数 180 10.2.2 render( )函数 181 10.3 运行Tooltip组件 183 10.4 测验 184 10.5 小结 184 第11章　项目：Timer组件 185 11.1 项目结构和脚手架 186 11.2 应用架构 187 11.3 TimerWrapper组件 189 11.4 Timer组件 193 11.5 Button组件 194 11.6 运行Timer组件 196 11.7 测验 196 11.8 小结 197 第Ⅱ部分　React架构 第12章　Webpack构建工具 201 12.1 Webpack的作用 201 12.2 添加Webpack到项目中 203 12.2.1 安装Webpack及其 依赖 204 12.2.2 配置Webpack 205 12.3 模块化代码 207 12.4 运行Webpack并测试构建 208 12.5 热模块替换 210 12.5.1 配置HMR 211 12.5.2 热模块替换实践 214 12.6 测验 216 12.7 小结 216 12.8 测验答案 216 第13章　React路由 217 13.1 从零开始实现路由 218 13.1.1 建立项目 219 13.1.2 在app.jsx中创建路由 映射 220 13.1.3 在router.jsx中创建 Router组件 221 13.2 React Router 222 13.2.1 React Router的JSX 样式 225 13.2.2 哈希记录 227 13.2.3 浏览器记录 227 13.2.4 使用Webpack安装 React Router开发环境 228 13.2.5 创建布局组件 230 13.3 React Router特性 233 13.3.1 使用withRouter高阶组件 访问路由器 234 13.3.2 以编程方式导航 235 13.3.3 URL参数和其他路由 数据 235 13.3.4 在React Router中传递 属性 236 13.4 使用Backbone路由 237 13.5 测验 240 13.6 小结 241 13.7 测验答案 241 第14章　使用Redux处理数据 243 14.1 React支持单向数据流 244 14.2 了解Flux数据体系结构 246 14.3 使用Redux数据类库 247 14.3.1 用Redux创建依照Netflix 的应用 249 14.3.2 依赖和配置 250 14.3.3 启用Redux 253 14.3.4 路由 253 14.3.5 合并reducer 254 14.3.6 电影的reducer 255 14.3.7 操作 258 14.3.8 操作创建器 259 14.3.9 将组件连接到数据 存储 260 14.3.10 分发操作 262 14.3.11 将操作创建器传递到 组件属性中 263 14.3.12 运行Netflix的克隆版 267 14.3.13 Redux总结 268 14.4 测验 268 14.5 小结 269 14.6 测验答案 269 第15章　使用GraphQL处理数据 271 15.1 GraphQL 272 15.2 给Netflix克隆版应用添加 服务器 273 15.2.1 在服务器端安装 GraphQL 275 15.2.2 数据结构 278 15.2.3 GraphQL模式 279 15.2.4 查询API并将响应保存 到数据存储 281 15.2.5 显示电影列表 285 15.2.6 GraphQL总结 287 15.3 测验 287 15.4 小结 288 15.5 测验答案 288 第16章　使用Jest进行单元测试 289 16.1 测试的类型 290 16.2 为什么使用Jest(对比 Mocha) 290 16.3 使用Jest进行单元测试 291 16.3.1 在Jest中编写单元 测试 293 16.3.2 Jest断言 294 16.4 使用Jest和TestUtils进行 React UI测试 296 16.4.1 使用TestUtils查找 元素 298 16.4.2 UI测试密码部件 299 16.4.3 浅渲染 303 16.5 TestUtils总结 305 16.6 测验 305 16.7 小结 305 16.8 测验答案 306 第17章　在Node中使用React和 同构JavaScript 307 17.1 为什么在服务器端使用React？ 什么是同构JavaScript？ 308 17.1.1 正确的页面索引 308 17.1.2 更快的加载速度、更好的 性能 309 17.1.3 更好的代码可维护性 310 17.1.4 在React和Node中使用 同构JavaScript 310 17.2 在Node上使用React 312 17.3 React和Express：在服务器端 渲染组件 314 17.3.1 在服务器端渲染简单的 文本 315 17.3.2 渲染HTML页面 316 17.4 使用Express和React的同构 JavaScript 322 17.4.1 项目目录结构和配置 324 17.4.2 启动服务器 325 17.4.3 使用Handlebars的服务器 端布局模板 329 17.4.4 在服务器上编写React 组件 332 17.4.5 客户端React代码 333 17.4.6 配置Webpack 334 17.4.7 运行应用 336 17.5 测验 340 17.6 小结 340 17.7 测验答案 340 第18章　使用React Router创建一个 网上书店 341 18.1 项目结构和Webpack配置 343 18.2 HTML主页 346 18.3 创建组件 347 18.3.1 主文件：app.jsx 347 18.3.2 Cart组件 353 18.3.3 Checkout组件 355 18.3.4 Modal组件 356 18.3.5 Product组件 357 18.4 启动项目 359 18.5 测验 359 18.6 小结 359 第19章　使用Jest测试密码 361 19.1 项目结构和Webpack配置 362 19.2 HTML主页 365 19.3 实现强密码模块 366 19.3.1 测试 366 19.3.2 代码 367 19.4 实现Password组件 369 19.4.1 测试 369 19.4.2 代码 370 19.5 实践 375 19.6 测验 376 19.7 小结 377 第20章　使用Jest、Express和 MongoDB实现自动完成 379 20.1 项目结构和Webpack配置 381 20.2 实现Web服务器 385 20.2.1 定义RESTful API 386 20.2.2 在服务器端渲染React 387 20.3 添加浏览器脚本 387 20.4 创建服务器端模板 388 20.5 实现Autocomplete组件 389 20.5.1 Autocomplete组件的 测试 389 20.5.2 Autocomplete组件的 代码 390 20.6 整合 393 20.7 测验 395 20.8 小结 396 附录A　安装本书相关应用 397 附录B　React速查表 405 附录C　Express速查表 413 附录D　MongoDB和Mongoose 速查表 419 附录E　ES6简介