我在隔离期间创建了 31 个 React 组件

在 React 中创建的不同组件的列表。

三月中旬，由于新冠疫情，公司要求我开始在家工作。

因为我每天已经花了4个小时在路上。我想为什么不利用这段时间学习一些新东西呢？

所以我决定在 React 中创建 31 个可重复使用的组件。

有两件事促使我接受这个#31DaysOfReact 挑战。

1. 作为前端开发人员，这样做将有助于我提高我的知识。
2. 我是一名博主，在learnersbucket.com上撰写有关 Javascript 和 DSA 的文章。所以这对我的博客来说也是一个很好的内容。

最初，我的想法是使用 5 到 6 个组件，但对于其他组件，我查找了经常使用的通用组件并创建了它们。

在做全职工作的同时创建组件和写博客并不容易。

这就是为什么我花了大约 45 天的时间来完成所有组件。

但我真的很喜欢做这件事，这真是一次很棒的学习经历。

我了解到

• 前端开发。
• 样式（CSS）。
• 反应。
• Ref（如何在不使用状态的情况下直接更新元素属性）。
• 思考反应（如何创建可扩展的组件）。
• 跨浏览器兼容性。
• 表单处理。
• 还有更多。

这是我所创建事物的列表。

表单元素

1. 在 React 中创建自定义按钮组件
2. 在 React 中创建输入组件
3. 在 React 中创建复选框
4. 在 React 中创建单选按钮组组件
5. 在 React 中创建复选框组组件
6. 在 React 中创建文件上传器
7. 在 React 中创建选择下拉菜单
8. 反应中的切换开关
9. React 中的登录表单组件

其他通用组件

1. 在 React 中创建进度条
2. React 中的分页组件
3. 在 React 中创建手风琴
4. 在 React 中创建下拉菜单
5. 在 React 中创建自动完成搜索
6. React 中的带有汉堡包的滑动侧边栏菜单
7. 在 React 中创建标签页
8. 在 React 中创建警报框
9. 在 React 中创建模态组件
10. 在 React 中创建语音可视化器
11. React 中的延迟加载组件
12. 在 React 中创建滑块
13. React 元素的拖放列表
14. 反应图像缩放
15. 在 React 中创建时间线
16. 在 React 中创建滚动指示器
17. 在 React 中创建工具提示
18. React 中的 Typeing 效果组件
19. 在 React 中创建加载器组件
20. 如何在 React 中滚动到顶部
21. 反应中的图像比较滑块
22. 在 React 中创建 scrollspy

我最喜欢的是 Image-Comparison-Slider 和 Typing-Effect-Component。

这是 github repo 链接

如果您认为这些 React 组件列表有任何价值，请与其他人分享。🙏🙏

由于印度从 5 月 1 日开始仍在实施封锁，我决定开始一项新的挑战#31DaysOfDSA，在其中我将使用 javascript 实现和解决不同的数据结构和算法。

您可以在 Twitter 上关注此标签来一起学习。

另外，请在Twitter上关注我，获取编程面试的技巧和更多算法示例的解答。我每周在我的博客learnersbucket.com上发布 2-3 篇文章。