5 个项目助你学习 React
5 个项目助你学习 React
如果你正在努力学习 React，你可能已经遇到了“瓶颈”。
你已经掌握了基础知识：组件、props、state。你已经完成了一两个教程，并且可能构建了一些 To Do 应用程序。虽然你的技能还不足以构建一个真正的应用程序，但你知道构建更多的 To Do 应用程序不会让你更进一步。
在这篇文章中，我将向你展示 5 个有趣的项目，它们可以扩展你的能力，并且不涉及任何待办事项。
工具
我建议使用 Create React App 来引导这些项目。
社交卡片
我们将从一个简单的开始。这更像是一个组件而不是一个完整的应用程序，但这是一个很好的起点。
这种 UI 的变体可以在网络上随处可见——Twitter、Facebook、Pinterest、Airbnb、Redfin 等等——它是一个坚实的构建块，用于显示图像 + 一些数据的应用程序。
这也是将 UI 分解为 React 组件的好练习。
一旦你有一个单独的 SocialCard 组件渲染，尝试用一些虚假数据制作一个列表。
天气应用
显示 5 天的天气预报，每天显示最高和最低温度，以及晴/雨/多云/下雪的图像。在使用真实数据之前，先使用假的硬编码数据，直到你正确渲染所有内容。
你可能会注意到，“天”看起来很像社交卡片…
为了增加练习，以下是一些你可以扩展应用程序的方法
- 添加点击某一天，查看其每小时预报的功能。你可以在顶级 App 状态中保持当前视图。
- 将 React Router 添加到项目（
npm install react-router）并按照此处的快速入门指南添加路由，例如/显示 5 天的预报，而/[name-of-day]显示特定日期的每小时预报。 - 从 Open Weather Map 注册一个免费的 API 密钥，获取真实的 5 天预报，并将该数据输入你的应用程序。
- 想要变得更花哨吗？添加一个图形库，例如 vx，并按照 此处的 示例添加一周或一天中温度变化的图表。
你可以看到这个应用程序开始时很简单，但可以随意扩展以增加挑战和学习。
Hacker Hunt
Hacker Hunt 是 Hacker News 故事的聚合器，具有类别，但更重要的是，它是一个很好的 React 练习应用程序。
有人说，所有 Web 应用程序基本上都只是列表。此应用程序将为你提供一些组件列表的练习，这些组件比待办事项稍微复杂一些。
首先使用静态数据，如果你想要更大的挑战，请从他们的 API 获取故事。从我可以从 devtools 中收集到的信息来看，这只是一个简单的路由，https://hackerhunt.co/api/daily/0，你可以将 0 替换为不同的页码。
你可以更进一步，使用 React Router 复制他们的路由结构。
计算器
你可能已经知道这些是如何工作的。加、减、乘、除……点击数字或操作应执行该动作。
为了增加挑战，也响应键盘输入。你不需要添加 <input> 元素来使其工作。如果你确实使用 <input>，请确保用户无需聚焦输入控件即可输入。
花一些时间思考状态将如何表示。你需要存储的不仅仅是显示器上的数字吗？当你键入一个新数字时，它是否用该数字替换显示器，还是将其附加到末尾？
添加一些 使用 Jest 进行快照测试，以测试计算器是否正常工作。
Github Issues 页面
制作一个简化版的 Github Issues 页面。 这是一个例子。 为了缩小范围，只需专注于实现问题列表，而忽略标题中的内容（搜索、过滤、星标等）。
首先从 Github 的 API 获取开放问题并在列表中显示它们。你也可以为此使用静态数据。
然后添加分页控件以允许浏览整个问题列表。你可能会发现添加 React Router 也很有用，这样你就可以直接导航到给定的页面。
为了增加难度，也实现问题详情页面。使用诸如 react-markdown 之类的东西呈现问题的 Markdown 文本及其评论。
这是一个使用 React、Redux 和 React Router 的工作示例，它实现了上述功能以及更多功能。
What Next?
希望我为你提供了一些想法，可以帮助你提高 React 技能。要了解更多此类信息，请阅读 使用 Copywork 学习 并按照步骤在 React 中构建节拍器。
帮助你学习 React 的 5 个项目 最初由 Dave Ceddia 于 2017 年 8 月 29 日在 Dave Ceddia 发布。