目录
第1章创建React应用程序
1．1Create React App
1．2运行开发服务器
1．3导航应用程序
1．3.1项目元数据和依赖项
1．3.2public目录
1．3.3src目录
1．4定制应用程序
1．4.1标题
1．4.2Favicon
1．5添加元素
1．6样式
1．7Chrome Developer Tools
结语
好奇之处1： npx
好奇之处2： %PUBLIC_URL%
铜牌挑战： 子标题
银牌挑战： Canarygram
第2章组件
2．1应用程序的组织
2．2Header组件
2．3JSX
2．4Post组件
2．5React Developer Tools
2．6prop
2．7组件重用
2．8渲染列表
结语
好奇之处： 测试DevTools中的prop更改
铜牌挑战： Footer
银牌挑战： Canarygram Footer
第3章用户事件
3．1添加SelectedItem
3．2用户事件
3．3传递参数
结语
好奇之处1： 其他文件命名约定
好奇之处2： 分离事件处理程序
铜牌挑战： Hello, Goodbye
银牌挑战： 金丝雀警告消息
第4章状态
4．1什么是状态
4．2useState
4．3更新状态
结语
好奇之处： 组件函数vs类
金牌挑战： 金丝雀Shuffle
第5章Linting
5．1创建项目
5．2更新标题和Favicon
5．3Linting概述
5．4Linting规则
5．5运行ESLint
5．5.1自动修复错误
5．5.2覆盖ESLint规则
5．6在Visual Studio Code中安装ESLint扩展
结语
好奇之处1： 在Visual Studio Code中运行ESLint的快捷方式
好奇之处2： 提交代码前进行linting
第6章prop类型
6．1添加资源
6．2Header组件
6．2.1空格问题
6．2.2将组件添加到App．js
6．2.3设置header样式
6．3Thumbnail组件
6．4prop类型简介
6．5Thumbnail的prop类型
6．6渲染商品
6．7Home组件
6．8重用prop类型
6．9prop不匹配
结语
好奇之处1： 为什么将Items作为prop传递
好奇之处2： 内联图片
铜牌挑战： 添加prop
第7章样式
7．1样式作用域
7．2响应式设计
7．3媒体查询
7．4悬停效果
结语
好奇之处1： 网格布局
好奇之处2： 样式化组件
好奇之处3： 编译后的CSS
银牌挑战： 自定义效果
第8章与服务器交互
8．1设置服务器
8．2useEffect
8．3确认网络请求
8．4promise
结语
好奇之处1： 服务器端点
好奇之处2： 如何在生产环境中设置代理
好奇之处3： 跨源资源共享(CORS)
好奇之处4： useEffect与生命周期方法
银牌挑战： promise练习
第9章Router
9．1创建路由
9．2使用链接
9．3创建详细信息页面和路由
9．3．1嵌套路由
9．3．2索引路由
9．4useParams
9．5从Header导航到主页
9．6从缩略图导航到详细信息
结语
银牌挑战： 更多的路由
第10章条件渲染
10．1获取更多的商品信息
10．2未定义的商品
10．3if语句
10．4内联逻辑运算符
10．5片段
10．6更多的逻辑运算符
10．6．1&&运算符
10．6．2||运算符
10．6．3??运算符
10．7布尔类型转换
结语
好奇之处： 真值和假值
银牌挑战： 促销商品
第11章useReducer
11．1useReducer与useState
11．2实现useReducer
11．3reducer函数
11．4更新数量
11．5在Header中显示信息
11．6向购物车中添加商品
11．7动作创建器
结语
第12章编辑购物车
12．1创建购物车页面
12．2查看购物车的内容
12．3显示购物车的内容
12．4从购物车中删除商品
12．4.1将dispatch作为prop传递
12．4.2设置删除按钮
12．5清空购物车
12．6显示小计
结语
铜牌挑战： 增加数量
银牌挑战： 减少数量
第13章表单
13．1构建表单
13．2onSubmit
13．3来自输入的值
13．4受控组件
13．5onChange
13．6计算税款
13．7计算总消费额
13．8格式化输入
13．9表单验证
结语
银牌挑战： 优惠码
金牌挑战1： 在电话号码中保持光标的位置
金牌挑战2： 设定数量
第14章本地存储与useRef
14．1本地存储
14．2useRef与useState
14．3setTimeout与useRef结合使用
14．4访问DOM元素
14．5无障碍访问因素
结语
银牌挑战： 将光标焦点跳转回姓名输入框
第15章提交订单
15．1提交表单
15．2async/await
15．3防止意外提交订单
结语
铜牌挑战： 重置购物车状态
银牌挑战： 排队的订单有多少
第16章组件复合
16．1Alert组件
16．2有条件地显示警告消息
16．3使用prop进行组件复合
16．4重用Alert组件
16．5清空购物车
结语
金牌挑战： 可关闭的警告消息
第17章context
17．1获取已登录的用户
17．2登录按钮
17．3避免prop透传
17．4使用context传递currentUser
17．5useMemo
17．6useContext
17．7登录组件
17．8useNavigate
17．9注销按钮
17．10登录出错消息
结语
好奇之处： 登录Cookie
银牌挑战： Items context
第18章完成订单
18．1创建Orders组件
18．2订单链接
18．3获取并显示订单
18．4完成订单
18．5使用自定义hook限制访问
18．5.1自定义hook
18．5.2添加到依赖数组中
18．6清理useEffect
18．7获取新订单
18．7.1代理websocket
18．7.2使用websocket
18．7.3关闭websocket
结语
铜牌挑战1： 更智能的重定向
铜牌挑战2： 导入自定义Hook
银牌挑战1： Loader
银牌挑战2： 出错消息显示
第19章应用程序性能优化简介
19．1React Profiler
19．2Memo
19．3Context发生变化
19．4useCallback
19．5昂贵的计算
19．6比较useCallback、useMemo以及memo
19．7清理
结语
银牌挑战： 记忆化UserDetails
第20章测试概述
20．1决定使用何种测试
20．1．1为什么要进行测试
20．1．2想要了解哪些内容
20．1．3未来的需求是什么
20．2测试的类型
20．3静态测试
20．4单元测试和集成测试
20．4．1针对函数的单元测试
20．4．2针对组件的集成测试
20．4．3测试完整的应用程序
20．4．4快照测试
20．5端到端测试
20．5．1使用实时后端进行端到端测试
20．5．2使用模拟后端进行端到端测试
20．5．3选择哪种端到端测试
20．6视觉测试或截图测试
结语
第21章使用Jest和React测试库进行测试
21．1测试前的准备工作
21．2单元测试
21．3集成测试
21．3．1测试Thumbnail组件
21．3．2测试Home组件
21．4模拟服务器
21．5测试已登录用户的用户名
21．6测试导航
21．6．1测试Add to Cart按钮
21．6．2测试结账
21．6．3验证订单提交
21．7测试结账出错消息
结语
好奇之处1： 测试文件的文件结构
好奇之处2： React测试库查询
铜牌挑战： 测试从购物车中移除商品
银牌挑战1： 额外的cartReducer测试
银牌挑战2： 测试电话号码格式
银牌挑战3： 测试税款详情
金牌挑战： 其他登录测试
第22章端到端测试
22．1安装和配置Cypress
22．1．1配置脚本
22．1．2为Cypress设置ESLint
22．1．3导入命令
22．1．4设置基础URL
22．2测试登录流程
22．3测试结账流程
22．3．1与服务器交互
22．3．2测试结账流程中的出错消息
22．4测试查看/删除订单的流程
22．5提取自定义命令
22．6不可见元素
22．7避免不稳定的测试
结语
好奇之处1： Cypress媒体文件
好奇之处2： Cypress网络请求
银牌挑战1： 测试电话号码格式
银牌挑战2： 测试购物车详细信息
银牌挑战3： 测试从购物车中移除商品
金牌挑战： 附加测试
第23章应用程序
23．1Manifest
23．2构建应用程序
23．3部署应用程序
结语
第24章数据加载
24．1生产环境构建
24．2分析
24．3大型图片
24．4分析JavaScript文件
24．5延迟加载
24．5．1动态导入
24．5．2命名bundles
24．6其他注意事项
结语
金牌挑战： 延迟加载
第25章组件速度
25．1检查性能
25．2过渡
25．3存储渲染内容
25．4存储已渲染的组件
结语
金牌挑战： 缓存筛选后的数据
附录A必备工具
A．1安装Google Chrome
A．2安装Visual Studio Code
A．3命令行
A．3．1查找当前目录
A．3．2修改目录
A．3．3创建目录
A．3．4列出文件
A．3．5获取管理员权限
A．3．6退出程序
A．4安装Node．js
A．5资源文件
