21 个 React 示例项目（开源，初级至中级）

这篇文章最初发表于https://www.devaradise.com/react-example-projects

学习 React.js 的方法有很多种。学习 React 最有效的方法之一是通过案例研究或示例项目进行学习。

通过示例项目，你将更快地了解 React.js 的原理和最佳实践，并提升你在实际项目中所需的解决问题和分析能力。

在这篇文章中，我将与您分享从初学者到中级水平的 React 示例项目列表以供学习。

但在开始学习示例项目之前，你应该了解基本的 React.js知识。至少，你应该了解 React 语法（JSX）、状态、props、组件等。

相关文章

• 如何成为2020年前端开发人员（完整实用指南）
• 2020 年 10 个最佳 React UI 框架/库

如何通过示例项目/案例研究学习 React？

仅仅因为你从 Github 克隆了一个示例项目，你实际上不会从中学到很多东西。

在您选择示例项目之前，这里有一些从中学习的技巧。

1. 一次只选择一个项目

Github 上有如此多的开源项目，我们常常会感到不知所措。没关系。

但是，当你真想从这些项目中学习时，千万不要一次性学会。人类的大脑不是设计来同时处理多项任务的。

你应该筛选一下，只选择一个你真正想学的项目。学完这个项目后，再选择下一个项目。

2. 复制代码，但不要复制粘贴

有了示例项目，你可能会认为只需阅读代码就能学会。不，你不需要。

你应该自己重写，而不是直接复制粘贴。这听起来可能很琐碎，但相信我，当你重写代码时，你会发现更多。

3.保持好奇心，了解代码的工作原理

在重写过程中，你会发现一些你不熟悉的代码。

当这种情况发生时，请保持好奇心，去了解这些代码的工作原理。因为这可能会增加你的知识。

4. 尝试并添加自己的口味

找到一些不熟悉的代码后，就对它们进行一些实验。修改它们，看看它是否仍然有效，并再次找出原因。

随着你学习的深入，你还可以添加自己的代码。将其与基础代码相结合。它可以是样式，也可以添加更多功能。

经过足够的修改后，您可以将其作为您的作品集，当然要提及您使用的示例项目。

5. 保持耐心并保持专注

最后，同样重要的是，学习时要有耐心。不要着急，保持专注。这需要时间，但值得。

祝你好运！

您可以使用哪些示例项目来学习 React？

现在，你可以从以下项目中选择一个进行学习。我按照难度从简单到中等的顺序排列了它们。

请记住，一次只能选择一个项目来学习！

1. 简单的 React To-do 应用

一个简单的 React 应用程序待办事项。您将通过它学习 React.js 的基础知识。

2.计算器

简单的计算器，让您学习 Javascript 和 React 中的一些逻辑。

3. BMI计算器

您将使用此 BMI 计算器学习 React hooks。

4. 快照

5. HackerNews 克隆版

6. TMDb 电影搜索

带有电影数据库 API 的React 电影搜索应用程序。

7. React Trello 看板

8. React 照片推送

9. React Redux 待办事项应用程序（全栈）

另一个 react todo 应用程序，但添加了身份验证功能、带有 firebase 的数据库等。

10. React Lab - UI 组件实验

这是我自己的项目。它包含一些 UI 实验以及我之前在这篇博客中写的教程的演示示例。

11.Netflix克隆

电影来自电影数据库。它仅克隆了 Netflix 网页应用的外观，而非功能。

12. React Redux 真实世界示例

13. Apple Music 克隆

14. SoundCloud Redux

15. Linkedin克隆

16. Crate - 电子商务入门（全栈项目）

17. React Twitter 克隆

18. React Instagram 克隆

19. React Youtube 克隆

20. 金钱追踪器

21. Jira 克隆

~~

您知道其他 repos 吗？

如果您知道其他值得在此提及的 Github 存储库，请随时在评论部分分享它们。

该存储库应该是：

• React 项目示例
• 有一个演示页面，或者至少有一些截图
• 工作时没有出现重大控制台错误

谢谢。

编码愉快！