挑战：添加和删除一个 CSS class
点击图片时：移除紫色背景，并高亮图片边框
点击图片外时：高亮背景，并删除图片边框的高亮效果
挑战：个人信息编辑器
编辑模式可以看到输入框，并编辑。当你改变输入框的内容时，欢迎信息会最下面实时更新。
挑战: 修复一个未更新的组件
选择不同的颜色时，Clock 组件将从其父组件接收到一个不同的 color 属性。然而，由于某种原因，显示的颜色没有更新。为什么？
Pick a color:
2:29:55 AM
挑战: 修复一个损坏的打包清单
bug: 如果你将一个物品标记为已打包然后删除它，计数器就不会正确更新
1 out of 3 packed!
挑战: 修复消失的高亮选择
bug: 当你点击“Star”或“Unstar”时，高亮会短暂消失
Inbox
- Ready for adventure?
- Time to check in!
- Festival Begins in Just SEVEN Days!
挑战: 实现多选功能
你需要将 state 结构更改为支持多选功能。
Inbox
You selected 0 letters
挑战: 同步输入状态
编辑一个输入框时，另一个输入框也会更新相同的文本，反之亦然。
挑战: 列表过滤
使用 filterItems(foods, query) 方法来通过搜索条件过滤列表项
| 寿司 | 寿司是一道传统的日本菜，是用醋米饭做成的 |
| 木豆 | 制作木豆最常见的方法是在汤中加入洋葱、西红柿和各种香料 |
| 饺子 | 饺子是用未发酵的面团包裹咸的或甜的馅料，然后在沸水中煮制而成的 |
| 烤肉串 | 烤肉串是一种很受欢迎的食物，是用肉串和肉块做成。 |
| 点心 | 点心是广东人的传统喜好，是在餐馆吃早餐和午餐时喜欢吃的一系列小菜 |
挑战: 修复丢失的输入框文本
按下按钮时会展示一条消息，但同时也会意外地重置输入框
挑战: 交换两个表单字段
bug: 如果填写“名字”输入框并勾选复选框，文本将保留在第一个输入框(也就是现在的“姓氏”)
挑战: 重置详情表单
bug: 当你选中另一个联系人（比如 Alice），状态就会更新，但表单会一直显示之前那个联系人的详细信息
挑战: 清除正在加载的图片
文本必须始终与图片一一对应，在你点击“下一张”时立即被清除
7 张图片中的第 1 张
Penang, Malaysia
挑战: 修复列表中错位的 state
bug: 切换显示顺序时，记住对应的邮箱是否显示的提示
Alice
Bob
Taylor
挑战: 通过事件处理函数 dispatch actions
挑战: 用 context 替代逐层 props
在这个示例中，切换复选框状态会修改传入每个 <PlaceImage> 的 imageSize 参数。复选框的 state 保存在顶层的 App 组件中，但是每个 <PlaceImage> 都需要注意它。
目前，App 将 imageSize 传递给 List，List 再将其传递给每个 Place，Place 又将其传递给 PlaceImage。移除 imageSize 参数，并在 App 组件中直接将其传递给 PlaceImage。
你可以在 Context.js 中声明 context。
南非开普敦的波卡普区: 为房屋选择亮色的传统始于 20 世纪后期。
中国台湾省台中市彩虹村: 1924 年，当地居民黄永福为了避免拆迁，将 1200 间房屋全部粉刷。
墨西哥的帕丘卡宏观壁画: 世界上最大的壁画之一，覆盖了山坡上的房屋。
巴西里约热内卢的塞拉龙楼梯: 这个地标由智利出生的艺术家 Jorge Selarón 创作，以“向巴西人民致敬”。
意大利布拉诺: 这些房屋按照一个可追溯到 16 世纪的特定颜色系统进行粉刷。
摩洛哥舍夫沙万: 关于为什么房屋被涂成蓝色，有几种理论，包括这几种颜色可以驱蚊或者它象征着天空和天堂。
韩国釜山甘川文化村: 2009 年，该村通过粉刷房屋并举办展览和艺术装置而转变为文化中心。
结合使用 reducer 和 context
第一步: 创建 context
第二步: 将 state 和 dispatch 函数放入 context
第三步: 在组件树中的任何地方使用 context