React开发实战.[美]Cássio de Sousa Antonio(带详细书签).pdf
《React开发实战》介绍如何成功构建日益复杂的前端应用程序与接口,深入分析React库,并详述React生态系统中的其他工具与库,从而指导你创建完整的复杂应用程序。 你将全面学习React的用法以及React生态系统中的其他工具和库(如React Router和Flux架构),并了解采用组合方式创建接口的最佳实践。本书简明扼要地讲解每个主题,并呈现助你高效完成工作的细节。书中严谨深刻地讲述React中最重要的功能,每章还详细列出常见的开发问题,并解释如何避免它们。 如果你拥有使用jQuery或其他JavaScript框架创建前端应用程序的经验,但想解决复杂前端应用程序构建过程中日益增多的常见问题,那么本书就是为你准备的。开始像专家那样去使用React吧, 今天就把这本书收入囊中! 主要内容 ◆ 如何创建可组合的用户界面 ◆ 理解React的虚拟DOM架构以及如何利用该架构开发应用程序 ◆ 了解各项功能的原理及重要性 ◆ 深入学习React以及React生态系统中重要的第三方库 ◆ 学习如何创建通用/同构应用程序从而改进用户体验和SEO ◆ 深刻理解复杂应用程序中的数据流策略 ◆ 学习如何测试、完善和部署React项目 第1章 React入门 1 1.1 开始学习之前 1 1.1.1 Node.js和npm 1 1.1.2 JavaScript ES6 2 1.2 定义React 2 1.3 React的优点 2 1.3.1 简单易学的响应式渲染 3 1.3.2 使用纯JavaScript进行面向组件开发 3 1.3.3 灵活的文档模型抽象表现 4 1.4 创建你的第一个React应用程序 4 1.4.1 React开发流程 4 1.4.2 创建你的第一个组件 8 1.4.3 减少输入的字符数量 9 1.4.4 动态值 10 1.5 将组件组合起来 10 1.5.1 props 10 1.5.2 呈现看板应用 11 1.5.3 定义组件的层次关系 13 1.5.4 props的重要性 14 1.5.5 创建组件 14 1.6 介绍state 21 1.7 本章小结 23 第2章 深入DOM抽象 25 2.1 React中的事件 25 2.1.1 DOM事件侦听器 25 2.1.2 看板应用:管理DOM事件 26 2.2 深入了解JSX 27 2.2.1 JSX与HTML 28 2.2.2 JSX和HTML的不同之处 28 2.2.3 JSX的怪异之处 29 2.3 看板应用:指示卡片的打开和关闭状态 31 2.3.1 空格 32 2.3.2 JSX中的注释 33 2.3.3 渲染动态HTML 33 2.3.4 看板应用:渲染Markdown 33 2.4 脱离JSX的React 36 2.4.1 普通JavaScript中的React元素 36 2.4.2 元素工厂 36 2.4.3 自定义工厂 37 2.5 内联样式 37 2.5.1 定义内联样式 37 2.5.2 看板应用:通过内联样式定义卡片颜色 38 2.6 使用表单 40 2.6.1 受控组件 40 2.6.2 特例 42 2.6.3 非受控组件 43 2.6.4 看板应用:创建一个任务表单 44 2.7 幕后的虚拟DOM 44 2.7.1 key属性 45 2.7.2 看板应用:key 45 2.7.3 refs 47 2.8 本章小结 48 第3章 使用组件构建应用程序 49 3.1 校验属性 49 3.1.1 属性的默认值 50 3.1.2 内置的propTypes校验器 51 3.1.3 为看板应用定义propTypes 52 3.1.4 自定义propTypes校验器 54 3.2 组件组合的策略与最佳实践 55 3.2.1 有状态的组件和单纯组件 55 3.2.2 哪些组件应当是有状态组件 56 3.2.3 数据流和组件通信 59 3.3 组件的生命周期 63 3.3.1 声明周期的阶段与函数 63 3.3.2 生命周期函数实践:数据获取 64 3.4 浅谈不变性 67 3.4.1 普通JavaScript中的不变性 67 3.4.2 嵌套对象 69 3.4.3 React不变性助手 70 3.5 看板应用:添加一点复杂性 73 3.5.1 从外部API获取初始的卡片数据 73 3.5.2 将任务回调以props传递 76 3.5.3 处理任务数据 80 3.5.4 基本的乐观更新回滚 83 3.6 本章小结 87 第4章 复杂交互 89 4.1 React中的动画 89 4.1.1 CSS过渡和动画基础 89 4.1.2 ReactCSSTransitionGroup 95 4.2 拖放 100 4.2.1 React DnD实现概述 101 4.2.2 React DnD实现示例 101 4.3 看板应用:支持动画和拖放 113 4.3.1 卡片切换动画 113 4.3.2 卡片的拖曳 115 4.4 本章小结 129 第5章 路由 131 5.1 使用原生方式实现路由 131 5.2 React Router 135 5.2.1 Index路由 138 5.2.2 带参数的路由 139 5.2.3 设置活动链接 144 5.2.4 传递props 144 5.2.5 将UI界面与URL解耦 147 5.2.6 在代码中更改路由 149 5.2.7 History库 152 5.2.8 看板应用:实现路由功能 153 5.3 本章小结 166 第6章 结合Flux的React应用程序架构 167 6.1 什么是Flux 167 6.1.1 Store 167 6.1.2 Action 168 6.1.3 Dispatcher 169 6.2 假想的简单Flux应用程序 169 6.3 Flux工具包 177 6.3.1 Flux Store工具 177 6.3.2 容器组件高阶函数 180 6.4 异步Flux 181 6.4.1 waitFor:协调Store的更新数序 181 6.4.2 异步数据获取 184 6.5 AirCheap应用程序 184 6.5.1 搭建:项目组织和基本文件 184 6.5.2 创建用于获取机场的API助手和Action创建器 185 6.5.3 AirportStore 188 6.5.4 应用组件 189 6.5.5 完成AirCheap应用程序:加载机票 194 6.6 改进异步获取数据的实现 204 6.7 看板应用:迁移到Flux架构 207 6.7.1 重构:创建Flux基本结构并迁移文件 207 6.7.2 将数据获取操作迁移到Flux架构 212 6.7.3 实现FetchCards Action、API方法调用和Store回调 213 6.7.4 将所有卡片和任务Action迁移到Flux架构 216 6.7.5 准备功能迁移 216 6.7.6 组件 225 6.7.7 删除所有组件state 231 6.8 本章小结 241 第7章 性能调优 243 7.1 子级校正过程的工作原理 243 7.1.1 批处理 243 7.1.2 子树渲染 244 7.2 React Perf 244 7.2.1 性能测试应用 245 7.2.2 安装并使用React Perf 248 7.3 shouldComponentUpdate 252 7.4 本章小结 254 第8章 React同构应用 255 8.1 Node.js和Express 255 8.2 React同构基础 260 8.2.1 创建项目结构 260 8.2.2 在服务器端渲染React组件 263 8.2.3 在客户端中挂载React 266 8.3 路由 270 8.3.1 配置内部路由 270 8.3.2 动态数据获取 271 8.3.3 渲染路由 273 8.4 本章小结 278 第9章 测试React组件 279 9.1 Jest 279 9.2 React测试工具 281 9.2.1 渲染用于测试的组件 281 9.2.2 遍历并查找子节点 284 9.2.3 模拟事件 285 9.2.4 浅渲染 286 9.3 本章小结 290 附录 JavaScript 2015 291 今天就把这本书收入囊中! 主要内容 ◆ 如何创建可组合的用户界面 ◆ 理解React的虚拟DOM架构以及如何利用该架构开发应用程序 ◆ 了解各项功能的原理及重要性 ◆ 深入学习React以及React生态系统中重要的第三方库 ◆ 学习如何创建通用/同构应用程序从而改进用户体验和SEO ◆ 深刻理解复杂应用程序中的数据流策略 ◆ 学习如何测试、完善和部署React项目 第1章 React入门 1 1.1 开始学习之前 1 1.1.1 Node.js和npm 1 1.1.2 JavaScript ES6 2 1.2 定义React 2 1.3 React的优点 2 1.3.1 简单易学的响应式渲染 3 1.3.2 使用纯JavaScript进行面向组件开发 3 1.3.3 灵活的文档模型抽象表现 4 1.4 创建你的第一个React应用程序 4 1.4.1 React开发流程 4 1.4.2 创建你的第一个组件 8 1.4.3 减少输入的字符数量 9 1.4.4 动态值 10 1.5 将组件组合起来 10 1.5.1 props 10 1.5.2 呈现看板应用 11 1.5.3 定义组件的层次关系 13 1.5.4 props的重要性 14 1.5.5 创建组件 14 1.6 介绍state 21 1.7 本章小结 23 第2章 深入DOM抽象 25 2.1 React中的事件 25 2.1.1 DOM事件侦听器 25 2.1.2 看板应用:管理DOM事件 26 2.2 深入了解JSX 27 2.2.1 JSX与HTML 28 2.2.2 JSX和HTML的不同之处 28 2.2.3 JSX的怪异之处 29 2.3 看板应用:指示卡片的打开和关闭状态 31 2.3.1 空格 32 2.3.2 JSX中的注释 33 2.3.3 渲染动态HTML 33 2.3.4 看板应用:渲染Markdown 33 2.4 脱离JSX的React 36 2.4.1 普通JavaScript中的React元素 36 2.4.2 元素工厂 36 2.4.3 自定义工厂 37 2.5 内联样式 37 2.5.1 定义内联样式 37 2.5.2 看板应用:通过内联样式定义卡片颜色 38 2.6 使用表单 40 2.6.1 受控组件 40 2.6.2 特例 42 2.6.3 非受控组件 43 2.6.4 看板应用:创建一个任务表单 44 2.7 幕后的虚拟DOM 44 2.7.1 key属性 45 2.7.2 看板应用:key 45 2.7.3 refs 47 2.8 本章小结 48 第3章 使用组件构建应用程序 49 3.1 校验属性 49 3.1.1 属性的默认值 50 3.1.2 内置的propTypes校验器 51 3.1.3 为看板应用定义propTypes 52 3.1.4 自定义propTypes校验器 54 3.2 组件组合的策略与最佳实践 55 3.2.1 有状态的组件和单纯组件 55 3.2.2 哪些组件应当是有状态组件 56 3.2.3 数据流和组件通信 59 3.3 组件的生命周期 63 3.3.1 声明周期的阶段与函数 63 3.3.2 生命周期函数实践:数据获取 64 3.4 浅谈不变性 67 3.4.1 普通JavaScript中的不变性 67 3.4.2 嵌套对象 69 3.4.3 React不变性助手 70 3.5 看板应用:添加一点复杂性 73 3.5.1 从外部API获取初始的卡片数据 73 3.5.2 将任务回调以props传递 76 3.5.3 处理任务数据 80 3.5.4 基本的乐观更新回滚 83 3.6 本章小结 87 第4章 复杂交互 89 4.1 React中的动画 89 4.1.1 CSS过渡和动画基础 89 4.1.2 ReactCSSTransitionGroup 95 4.2 拖放 100 4.2.1 React DnD实现概述 101 4.2.2 React DnD实现示例 101 4.3 看板应用:支持动画和拖放 113 4.3.1 卡片切换动画 113 4.3.2 卡片的拖曳 115 4.4 本章小结 129 第5章 路由 131 5.1 使用原生方式实现路由 131 5.2 React Router 135 5.2.1 Index路由 138 5.2.2 带参数的路由 139 5.2.3 设置活动链接 144 5.2.4 传递props 144 5.2.5 将UI界面与URL解耦 147 5.2.6 在代码中更改路由 149 5.2.7 History库 152 5.2.8 看板应用:实现路由功能 153 5.3 本章小结 166 第6章 结合Flux的React应用程序架构 167 6.1 什么是Flux 167 6.1.1 Store 167 6.1.2 Action 168 6.1.3 Dispatcher 169 6.2 假想的简单Flux应用程序 169 6.3 Flux工具包 177 6.3.1 Flux Store工具 177 6.3.2 容器组件高阶函数 180 6.4 异步Flux 181 6.4.1 waitFor:协调Store的更新数序 181 6.4.2 异步数据获取 184 6.5 AirCheap应用程序 184 6.5.1 搭建:项目组织和基本文件 184 6.5.2 创建用于获取机场的API助手和Action创建器 185 6.5.3 AirportStore 188 6.5.4 应用组件 189 6.5.5 完成AirCheap应用程序:加载机票 194 6.6 改进异步获取数据的实现 204 6.7 看板应用:迁移到Flux架构 207 6.7.1 重构:创建Flux基本结构并迁移文件 207 6.7.2 将数据获取操作迁移到Flux架构 212 6.7.3 实现FetchCards Action、API方法调用和Store回调 213 6.7.4 将所有卡片和任务Action迁移到Flux架构 216 6.7.5 准备功能迁移 216 6.7.6 组件 225 6.7.7 删除所有组件state 231 6.8 本章小结 241 第7章 性能调优 243 7.1 子级校正过程的工作原理 243 7.1.1 批处理 243 7.1.2 子树渲染 244 7.2 React Perf 244 7.2.1 性能测试应用 245 7.2.2 安装并使用React Perf 248 7.3 shouldComponentUpdate 252 7.4 本章小结 254 第8章 React同构应用 255 8.1 Node.js和Express 255 8.2 React同构基础 260 8.2.1 创建项目结构 260 8.2.2 在服务器端渲染React组件 263 8.2.3 在客户端中挂载React 266 8.3 路由 270 8.3.1 配置内部路由 270 8.3.2 动态数据获取 271 8.3.3 渲染路由 273 8.4 本章小结 278 第9章 测试React组件 279 9.1 Jest 279 9.2 React测试工具 281 9.2.1 渲染用于测试的组件 281 9.2.2 遍历并查找子节点 284 9.2.3 模拟事件 285 9.2.4 浅渲染 286 9.3 本章小结 290 附录 JavaScript 2015 291
暂无评论