前端 UI 组件

iHateReading 自定义存储库

在过去的一个月里，我制作了很多 UI 组件，这些组件都是真实世界的 Web 组件，例如按钮、输入、表单、横幅、画廊

出于多种目的而制作的组件

• 学习前端并在我所做的事情上变得更好
• 提高前端开发中编写更好代码的能力（稍后我会解释这意味着什么）

我目前的技术堆栈或技术是reactjs和next.js作为框架，我使用Tailwind CSS进行样式设计，使用GSAP进行动画

我可以使用任何技术堆栈，这不是问题，所以我从最新的框架开始，语言是reactjs和next.js

接下来，我必须选择我应该开发的所有组件，这些组件是我个人可以在即将到来的实际项目中使用的，例如付款表单、订阅表单、图片库、按钮、许多其他 UI 组件，标头组件等等。

iHateReading 是一个开发者为开发者打造的平台，在过去的两年里，我一直在 ihatereading.in 上分享博客和时事通讯。

现在是引入一些新更改或新功能的最佳时机，这些新更改或新功能可以是自定义存储库或自定义代码或任何您想要的名称，以恢复这个平台的全部内容。

现在来看看这些组件是由什么组成的，所有组件都是由以下模块组成的

1. Reactjs
2. Tailwind CSS
3. 动画 GSAP
4. Mantine.dev UI 库（如果需要）

我正在尝试使用无头 UI 组件，这意味着仅添加功能而无需任何样式或框架依赖项，这样许多开发人员可以轻松复制粘贴代码并直接使用它来快速开发。

在开发这些组件时，如果您看到我在 https://ihatereading.in/customrepo 上分享的第一个组件并将其与新的或最新的组件进行比较，您可以轻松找到差异。

更少的依赖、更少的 JavaScript 以及更优化和可重用的代码组件。

所有功劳都归功于我去年所做的研究和博客，为什么 JavaScript 会降低网站性能？因为与 CSS 相比，浏览器需要花费大量时间来解析 JS。从而减少 JS 也会提高网站性能。

此外，现在的 CSS 变得如此强大，以至于只需要很少的 JS 就可以为网站带来很酷的动画，而且很多开发人员并没有太多关注它，这是多用 CSS > 少用 JS 的另一个座右铭。

到目前为止已经添加了 40 个组件，我正在开发更多组件，如果您知道我可以制作什么样的组件或表单或工具，请在评论部分添加它们，我一定会跟随。

我正在 Twitter 和 LinkedIn 上积极分享组件开发新闻，并在 ihatereading.in/customrepo 上推送代码

请随意查看它们，并让我知道还需要添加和创建哪些内容。

干杯
雪莉

以上就是前端 UI 组件的详细内容，更多请关注其它相关文章！