React全家桶:前端开发与实例详解电子书

版权声明

如何充分利用本书

概述

运行示例代码

项目设置

代码块和上下文

代码块编号

获取帮助

给我们发电子邮件

技术支持时间

本书修订及更新

社区交流

兴奋起来

更多信息

第一部分

第 1 章 第一个React Web应用程序

1.1 构建Product Hunt项目

1.2 设置开发环境

1.2.1 代码编辑器

1.2.2 Node.js和npm

1.2.3 安装Git

1.2.4 浏览器

1.3 针对Windows用户的特殊说明

确保已安装了IIS

1.4 JavaScript ES6/ES7

1.5 开始

1.5.1 示例代码

1.5.2 应用程序预览

1.5.3 应用程序准备

1.6 什么是组件

1.6.1 第一个组件

1.6.2 JSX

1.6.3 开发者控制台

1.6.4 Babel

1.6.5 ReactDOM.render()方法

1.7 构建Product组件

1.8 让数据驱动Product组件

1.8.1 数据模型

1.8.2 使用props

1.8.3 渲染多个产品

1.9 应用程序的第一次交互：投票事件响应

1.9.1 事件传递

1.9.2 绑定自定义组件方法

1.9.3 使用state

1.9.4 使用this.setState()设置state

1.10 更新state和不变性

1.11 用Babel插件重构transform-class-properties

1.11.1 Babel插件和预设

1.11.2 属性初始化器

1.11.3 重构Product组件

1.11.4 重构ProductList组件

1.12 祝贺你

第 2 章 组件

2.1 计时器应用程序

2.2 开始

2.2.1 应用程序预览

2.2.2 应用程序准备

2.3 第(1)步：将应用程序分解为组件

2.4 从头开始构建React应用程序的步骤

2.5 第(2)步：构建应用程序的静态版本

2.5.1 TimersDashboard组件

2.5.2 EditableTimer组件

2.5.3 TimerForm组件

2.5.4 ToggleableTimerForm组件

2.5.5 Timer组件

2.5.6 应用程序渲染

2.5.7 试试看

2.6 第(3)步：确定哪些组件应该是有状态的

2.6.1 state准则

2.6.2 应用准则

2.7 第(4)步：确定每个state应该位于哪个组件中

2.7.1 计时器列表和每个计时器的属性

2.7.2 是否打开计时器的编辑表单

2.7.3 创建表单的可见性

2.8 第(5)步：通过硬编码来初始化state

2.8.1 为TimersDashboard组件添加state

2.8.2 在EditableTimerList组件中接收props

2.8.3 props和state

2.8.4 为EditableTimer组件添加state

2.8.5 Timer组件保持无状态

2.8.6 为ToggleableTimerForm组件添加state

2.8.7 为TimerForm组件添加state

2.9 第(6)步：添加反向数据流

2.9.1 TimerForm组件

2.9.2 ToggleableTimerForm组件

2.9.3 TimersDashboard组件

2.10 更新计时器

2.10.1 为Timer组件添加编辑功能

2.10.2 更新EditableTimer组件

2.10.3 更新EditableTimerList组件

2.10.4 在TimersDashboard组件中定义onEditFormSubmit()函数

2.11 删除计时器

2.11.1 为Timer组件添加事件处理程序

2.11.2 通过EditableTimer组件进行路由

2.11.3 通过EditableTimerList组件进行路由

2.11.4 在TimersDashboard组件中实现删除功能

2.12 添加计时功能

2.12.1 为Timer组件添加forceUpdate()间隔函数

2.12.2 试试看

2.13 添加启动和停止功能

2.13.1 为Timer组件添加计时器操作事件

2.13.2 创建TimerActionButton组件

2.13.3 通过EditableTimer和EditableTimerList运行事件

2.13.4 试试看

2.14 方法回顾

第 3 章 组件和服务器

3.1 介绍

准备

3.2 server.js

3.3 服务器API

3.3.1 text/html端点

3.3.2 JSON端点

3.4 使用API

3.5 从服务器加载状态

试试看

3.6 client

Fetch

3.7 向服务器发送开始和停止请求

3.8 向服务器发送创建、更新和删除请求

运行一下

3.9 下一步

第 4 章 JSX和虚拟DOM

4.1 React使用了虚拟DOM

4.2 为什么不修改实际的DOM

4.3 什么是虚拟DOM

4.4 虚拟DOM片段

4.5 ReactElement

4.5.1 尝试使用ReactElement

4.5.2 渲染ReactElement

4.5.3 使用子元素来添加文本

4.5.4 ReactDOM.render()

4.6 JSX

4.6.1 使用JSX创建元素

4.6.2 JSX属性表达式

4.6.3 JSX子条件表达式

4.6.4 JSX布尔属性

4.6.5 JSX注释

4.6.6 JSX扩展语法

4.6.7 JSX陷阱

4.6.8 JSX总结

4.7 参考文献

第 5 章 具有props、state和children的高级组件配置

5.1 介绍

5.2 如何使用本章

5.3 ReactComponent

5.3.1 使用createReactClass或ES6类创建ReactComponent

5.3.2 render()函数返回一个ReactElement树

5.3.3 把数据放入render()函数

5.4 props是参数

5.5 PropTypes

5.6 使用getDefaultProps()获取默认props

5.7 上下文

5.7.1 默认值

5.7.2 多个上下文

5.8 state

5.8.1 使用state构建自定义单选按钮

5.8.2 有状态的组件

5.8.3 状态更新依赖于当前状态

5.8.4 关于状态的思考

5.9 无状态组件

5.9.1 切换到无状态

5.9.2 鼓励重用无状态组件

5.10 使用props.children与子组件对话

5.10.1 React.Children.map()和React.Children.forEach()方法

5.10.2 React.Children.toArray()函数

5.11 总结

5.12 参考文献

第 6 章 表单

6.1 表单101

6.1.1 准备

6.1.2 基础按钮

6.1.3 事件和事件处理程序

6.1.4 回到按钮

6.2 文本输入

6.2.1 使用refs访问用户输入

6.2.2 使用用户的输入

6.2.3 非受控组件与受控组件

6.2.4 使用state访问用户输入

6.2.5 多个字段

6.2.6 验证

6.2.7 在应用程序中添加验证

6.2.8 创建Field组件

6.2.9 使用新的Field组件

6.3 远程数据

6.3.1 构建自定义组件

6.3.2 添加CourseSelect组件

6.3.3 分离视图和状态

6.4 异步持久性

6.5 Redux

6.5.1 Form组件

6.5.2 连接store

6.6 表单模块

6.6.1 formsy-react

6.6.2 react-input-enhancements

6.6.3 tcomb-form

6.6.4 winterfell

6.6.5 react-redux-form

第 7 章 Webpack与Create React App结合使用

7.1 JavaScript模块

7.2 Create React App

7.3 探索Create React App

7.3.1 public/index.html

7.3.2 package.json

7.3.3 src/

7.3.4 index.js

7.3.5 启动应用程序

7.4 Webpack基础

7.5 对示例应用程序进行修改

7.5.1 热重载

7.5.2 自动重载

7.6 创建生产构建

7.7 弹出

开始行动

7.8 Create React App和API服务器一起使用

7.8.1 完整的应用程序

7.8.2 应用程序的组织方式

7.8.3 服务器

7.8.4 Client

7.8.5 concurrently

7.8.6 使用Webpack开发代理

7.9 Webpack总结

何时使用Webpack和Create React App

第 8 章 单元测试

8.1 不使用框架编写测试

8.1.1 准备Modash

8.1.2 编写第一个用例

8.1.3 assertEqual()函数

8.2 Jest是什么

8.3 使用Jest

8.3.1 expect()

8.3.2 Modash的第一个Jest测试

8.3.3 另一个truncate()用例

8.3.4 其余的用例

8.4 React应用程序的测试策略

8.4.1 集成测试与单元测试

8.4.2 浅渲染

8.4.3 Enzyme

8.5 使用Enzyme测试基本的React组件

8.5.1 设置

8.5.2 App组件

8.5.3 App组件的第一个用例

8.5.4 App组件的更多断言

8.5.5 使用beforeEach

8.5.6 模拟变化

8.5.7 清空输入字段

8.5.8 模拟表单提交

8.6 为食物查找应用程序编写测试

8.6.1 FoodSearch组件

8.6.2 探索FoodSearch组件

8.7 编写FoodSearch.test.js

8.7.1 在初始状态中

8.7.2 用户在搜索字段中输入了一个值

8.7.3 使用Jest模拟

8.7.4 模拟Client

8.7.5 API返回的结果

8.7.6 用户点击食物项

8.7.7 API返回空结果集

8.8 进一步阅读

第 9 章 路由

9.1 URL中有什么

React Router的核心组件

9.2 构建react-router组件

9.2.1 完整的应用程序

9.2.2 构建Route组件

9.2.3 构建Link组件

9.2.4 构建Router组件

9.2.5 构建Redirect组件

9.2.6 使用react-router

9.2.7 Route组件的更多特性

9.2.8 使用Switch组件

9.3 使用React Router的动态路由

9.3.1 完整的应用程序

9.3.2 服务器API

9.3.3 应用程序的起始页

9.3.4 使用URL参数

9.3.5 将路径名作为props传递

9.3.6 使用NavLink组件实现动态菜单项

9.4 支持身份验证的路由

9.4.1 Client库

9.4.2 实现登录功能

9.4.3 PrivateRoute高阶组件

9.4.4 Redirect组件的状态

9.5 回顾一下

进一步阅读

第二部分

第 10 章 Flux和Redux介绍

10.1 Flux诞生的原因

10.1.1 Flux是一种设计模式

10.1.2 Flux概述

10.2 Flux实现

10.3 Redux

Redux的关键思想

10.4 构建一个计数器

10.4.1 准备

10.4.2 概述

10.4.3 计数器的动作

10.4.4 递增计数器

10.4.5 递减计数器

10.4.6 支持动作的其他参数

10.5 构建store

10.6 Redux的核心

下一步

10.7 早期的聊天应用程序

10.7.1 预览

10.7.2 状态

10.7.3 动作

10.8 构建reducer()函数

10.8.1 初始化state

10.8.2 处理ADD_MESSAGE动作

10.8.3 处理DELETE_MESSAGE动作

10.9 订阅store

完整的createStore()函数

10.10 将Redux连接到React

10.10.1 使用store.getState()

10.10.2 使用store.subscribe()

10.10.3 使用store.dispatch()

10.10.4 聊天应用程序的组件

10.10.5 准备App.js

10.10.6 App组件

10.10.7 MessageInput组件

10.10.8 MessageView组件

10.11 下一步

第 11 章 Redux中间件

11.1 准备

11.2 使用redux库的createStore()函数

11.3 将消息表示为处于状态中的对象

11.3.1 修改ADD_MESSAGE处理程序

11.3.2 修改DELETE_MESSAGE处理程序

11.3.3 修改React组件

11.4 引入多线程

11.4.1 在initialState中支持多线程

11.4.2 在React组件中支持多线程

11.4.3 修改App组件

11.4.4 将MessageView组件转换为Thread组件

11.4.5 试试看

11.5 添加ThreadTabs组件

11.5.1 修改App组件

11.5.2 创建ThreadTabs组件

11.5.3 试试看

11.6 在reducer中支持多线程

11.6.1 修改reducer中的ADD_MESSAGE处理程序

11.6.2 修改MessageInput组件

11.6.3 试试看

11.6.4 修改reducer中的DELETE_MESSAGE处理程序

11.6.5 试试看

11.7 添加OPEN_THREAD动作

11.7.1 action对象

11.7.2 修改reducer

11.7.3 从ThreadTabs组件分派动作

11.7.4 试试看

11.8 拆分reducer函数

11.8.1 新的reducer()函数

11.8.2 修改threadsReducer()函数

11.8.3 试试看

11.9 添加messagesReducer()函数

11.9.1 修改ADD_MESSAGE动作处理程序

11.9.2 创建messagesReducer()函数

11.9.3 修改DELETE_MESSAGE动作处理程序

11.9.4 将DELETE_MESSAGE动作添加到messagesReducer()函数中

11.10 在reducer中定义初始状态

11.10.1 reducer()函数的初始状态

11.10.2 为activeThreadIdReducer()函数添加初始状态

11.10.3 为threadsReducer()函数添加初始状态

11.10.4 试试看

11.11 使用redux的combineReducers()函数

11.12 下一步

第 12 章 表示组件和容器组件与Redux一起使用

12.1 表示组件和容器组件

12.2 拆分ThreadTabs组件

12.3 拆分Thread组件

12.4 从App组件中移除store

12.5 使用react-redux库创建容器组件

12.5.1 Provider组件

12.5.2 将App组件包装在Provider中

12.5.3 使用connect()函数生成ThreadTabs组件

12.5.4 使用connect()函数生成ThreadDisplay组件

12.6 动作创建器

12.7 总结

异步性和服务器通信

第 13 章 使用GraphQL

13.1 第一个GraphQL查询

13.2 GraphQL的好处

13.3 GraphQL和REST

13.4 GraphQL和SQL

13.5 Relay框架和GraphQL框架

13.6 本章预览

13.7 使用GraphQL

13.8 探索GraphiQL

13.9 GraphQL语法

13.10 复杂类型

13.10.1 联合

13.10.2 片段

13.10.3 接口

13.11 探索Graph

13.12 图节点

13.13 viewer

13.14 图的连接和边

13.15 变更

13.16 订阅

13.17 GraphQL和JavaScript结合使用

13.18 GraphQL与React结合使用

13.19 总结

第 14 章 GraphQL服务器

14.1 编写一个GraphQL服务器

14.2 Windows用户的特殊设置

14.2.1 游戏计划

14.2.2 Express HTTP服务器

14.2.3 添加第一个GraphQL类型

14.2.4 添加GraphiQL

14.2.5 内省

14.2.6 变更

14.2.7 丰富的模式和SQL

14.2.8 设置数据库

14.2.9 模式设计

14.2.10 对象和标量类型

14.2.11 列表

14.2.12 性能前瞻性优化

14.2.13 继续讨论列表

14.3 连接

14.3.1 身份验证

14.3.2 授权

14.3.3 丰富的变更操作

14.3.4 Relay和GraphQL

14.3.5 性能：N+1个查询

14.4 总结

第 15 章 经典Relay

15.1 介绍

15.1.1 本章会涵盖的内容

15.1.2 我们正构建的内容

15.1.3 代码结构指南

15.2 Relay是一个数据架构

15.3 Relay和GraphQL约定

15.3.1 探索GraphQL中的Relay约定

15.3.2 通过ID获取对象

15.3.3 解读连接

15.3.4 使用变更修改数据

15.3.5 Relay GraphQL查询总结

15.4 将Relay添加到应用程序中

15.4.1 快速了解目标

15.4.2 作者页面预览

15.4.3 容器、查询和片段

15.4.4 在编译时验证Relay查询

15.4.5 设置路由

15.4.6 将Route添加到Relay中

15.4.7 App组件

15.4.8 AuthorQueries组件

15.4.9 AuthorPage组件

15.4.10 试试看

15.4.11 具有样式的AuthorPage

15.5 BooksPage组件

15.5.1 BooksPage路由

15.5.2 BooksPage组件

15.5.3 BooksPage render()

15.5.4 BookItem

15.5.5 BookItem片段

15.5.6 片段值屏蔽

15.5.7 改进AuthorPage

15.6 使用变更修改数据

15.7 构建图书页面

图书页面编辑

15.8 变更

15.8.1 定义一个变更对象

15.8.2 内联编辑

15.9 总结

15.10 参考资料

第 16 章 React Native

16.1 初始化

安装文档

16.2 路由

玩一玩

16.3 <Navigator />

16.3.1 renderScene()

16.3.2 configureScene()

16.4 Web组件与原生组件

16.4.1 <View />

16.4.2 <Text />

16.4.3 <Image />

16.4.4 <TextInput />

16.4.5 <TouchableHighlight />、<TouchableOpacity />和<TouchableWithoutFeedback />

16.4.6 <ActivityIndicator />

16.4.7 <WebView />

16.4.8 <ScrollView />

16.4.9 <ListView />

16.5 样式

16.5.1 StyleSheet

16.5.2 flexbox

16.5.3 其他动态布局

16.6 HTTP请求

16.7 什么是promise

进入promise

16.8 一次性使用保证

16.9 创建新promise

16.10 使用React Native进行调试

16.11 资料参考

附录 A PropTypes

A.1 验证器

A.2 string

A.3 number

A.4 boolean

A.5 function

A.6 object

A.7 对象的shape属性

A.8 多种类型

A.9 instanceOf

A.10 array

A.11 数组的类型

A.12 node

A.13 element

A.14 any类型

A.15 可选的props和必需的props

A.16 自定义验证器

附录 B ES6

B.1 首选const和let而不是var

B.2 箭头函数

B.3 模块

B.4 Object.assign()

B.5 模板字面量

B.6 扩展操作符（...）

B.7 对象字面量增强

B.8 默认参数

B.9 解构赋值

B.9.1 数组的解构赋值

B.9.2 对象的解构赋值

B.9.3 参数上下文匹配

附录 C React Hook

C.1 警告：Hook还不完善

C.2 Hook背后的动机

C.3 Hook如何映射到组件类

C.4 使用Hook需要react "next"包

C.5 useState() Hook示例

C.5.1 我们的组件是一个函数

C.5.2 状态读写

C.5.3 React状态跟踪

C.5.4 多个状态

C.6 useEffect() Hook示例

C.6.1 获取数据并更新状态

C.6.2 使用副作用时的性能问题

C.7 useContext() Hook示例

C.7.1 上下文的意义

C.7.2 useContext()使上下文更易于使用

C.7.3 在更大的应用程序中获取对上下文的引用

C.8 useRef() Hook示例

useRef()和带有input的表单

C.9 使用自定义Hook

C.10 为React Hook编写测试

C.10.1 为useState() Hook编写测试

C.10.2 为useEffect() Hook编写测试

C.10.3 为useRef() Hook编写测试

C.11 社区对Hook的反应

C.12 不同Hook类型的引用

C.13 Hook的未来

C.14 更多资源

更新日志

作者简介

看完了