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

学习 React.js 可以通过多种方式完成。学习 React 最有效的方法之一是从案例研究或示例项目中学习。

通过一个示例项目,您将更快地了解 React.js 的原理和最佳实践。它将培养您在实际项目中所需的解决问题和分析能力。

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

但是在你开始学习示例项目之前,你应该知道基本的 React.js。至少,您应该了解 React 语法 (JSX)、状态、道具、组件等。

相关帖子

• 如何成为前端开发者 2020(完整实用指南)

• 2020 年 10 个最佳 React UI 框架/库

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

仅仅因为你从 Github 克隆了一个示例项目,你不会真正从中学到很多东西。

在选择示例项目之前,这里有一些学习时的提示。

1.一次只选择一个项目

由于 Github 上有如此多的开源项目,我们常常对它们感到不知所措。没关系。

但是,当你真的想从这些项目中学习时,千万不要立即学习它们。人脑并非设计用于多任务。

你应该过滤它们,只选择一个你真正想学习的项目。完成后,您可以选择下一个项目。

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

对于一个示例项目,您可能认为您只能通过阅读代码来学习它。不,你没有。

您应该自己重写它,而不仅仅是复制粘贴它。这听起来可能微不足道,但相信我,当你重写代码时,你会发现更多。

3.保持好奇,找出代码为何有效

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

当这种情况发生时,好奇地想知道为什么这些代码会起作用。因为它可能会增加你的知识。

4.实验,添加你自己的味道

在你发现一些不熟悉的代码后,用它们做一些实验。修改它们,看看它是否仍然有效,然后再次找出原因。

随着您了解更多信息,您还应该添加自己的代码。将其与基本代码结合起来。它可以是样式或添加更多功能。

通过足够的修改,您可以将其作为您的投资组合,当然通过提及您使用的示例项目。

5.要有耐心并保持专注

最后但并非最不重要的一点是,在学习时要有耐心。不要着急,保持专注。这需要时间,但值得。

祝你好运!

有哪些示例项目可以用来学习 React?

现在,您可以选择以下项目之一进行学习。我将它们从最简单到中等水平排序。

请记住,一次只能选择一个项目来学习!

1.简单的 React 待办事项应用程序

https://github.com/kabirbaidhya/react-todo-app

一个简单的反应应用待办事项。你将通过这个学习 React.js 的基础知识。

2.计算器

https://github.com/ahfarmer/calculator

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

3.体重指数计算器

https://github.com/GermaVinsmoke/bmi-calculator

你将使用这个 BMI 计算器学习 React 钩子。

4.快照

https://github.com/Yog9/SnapShot

5.黑客新闻克隆

https://github.com/clintonwoo/hackernews-react-graphql

6. TMDb 电影搜索

https://github.com/SKempin/reactjs-tmdb-app

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

7.反应 Trello 板

https://github.com/web-pal/react-trello-board

8.反应照片提要

https://github.com/lkazberova/react-photo-feed

9. React Redux 待办事项应用程序(全栈)

https://github.com/r-park/todo-react-redux

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

10. React Lab - UI 组件实验

https://github.com/syakirurahman/react-lab

这是我自己的项目。它包含我在此博客中编写的教程的一些 UI 实验和演示示例。

11. Netflix 克隆

https://github.com/AndresXI/Netflix-Clone

电影来自电影数据库。它只克隆 Netflix Web 应用程序的皮肤,而不是功能。

12. React Redux 真实世界示例

https://github.com/gothinkster/react-redux-realworld-example-app

13.苹果音乐克隆

https://github.com/tvillarete/apple-music-js

14. SoundCloud Redux

https://github.com/r-park/soundcloud-redux

15.领英克隆

https://github.com/ghoshnirmalya/linkedin-clone-react-frontend

16. Crate - 电子商务入门(全栈项目)

https://github.com/atulmy/crate

17.反应推特克隆

https://github.com/manikandadraji/twitter-clone-frontend

18.反应 Instagram 克隆

https://github.com/manikandadraji/instaclone-frontend

19.反应 Youtube 克隆

https://github.com/manikandanraji/youtubeclone-frontend

20.金钱追踪器

https://github.com/ayastreb/money-tracker

21.吉拉克隆

https://github.com/oldboyxx/jira_clone

~~

你知道其他的repos吗?

如果你知道这里值得一提的其他 Github 存储库,请不要犹豫,在评论部分分享它们。

存储库应该是:

• 一个 React 项目示例

• 有演示页面,或者至少有一些截图

• 工作时没有明显的控制台错误

谢谢你。

快乐编码!