前端 UI 组件

前端 ui 组件

iHateReading 自定义存储库

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

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

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

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

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

立即学习“前端免费学习笔记(深入)”;

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

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

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

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

ReactjsTailwind CSS动画 GSAPMantine.dev UI 库(如果需要)

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

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

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

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

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

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

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

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

干杯
雪莉

以上就是前端 UI 组件的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1491681.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月19日 14:10:48
下一篇 2025年12月19日 14:10:56

相关推荐

  • 如何在Reactjs中制作动态进度条

    使用 react 和循环进度组件构建性能仪表板在本博客中,我们将探讨如何使用 react 构建性能指标仪表板。仪表板显示不同绩效指标(例如可访问性、seo 和最佳实践)的循环进度指示器。进度指示器逐渐填满,模拟加载动画。 该项目使用 tailwind css 进行样式设计,并组合了多个组件来创建灵活…

    2025年12月19日
    000
  • 如何使用 Tailwind CSS 和 JavaScript 构建延迟加载的图片库

    终于到了周五,我们又带着另一个教程回来了!这次,我们将向您展示如何使用 Tailwind CSS 和 JavaScript 创建延迟加载图片库。 什么是延迟加载?延迟加载是一种通过延迟加载图像或媒体直到它们即将出现在用户视图中来提高性能的技术。延迟加载不是在页面打开时加载所有内容,而是仅在需要时引入…

    2025年12月19日
    000
  • 获得全栈开发认证的最快方法

    在当今技术驱动的世界中,全栈开发是最需要的技能之一。精通前端和后端技术将为高薪工作、自由职业机会和各种令人兴奋的项目打开大门。但如何才能快速获得全栈开发认证并开始受益呢?本指南探讨了成为认证全栈开发人员的最快途径,同时确保您最大限度地发挥您的收入潜力,包括深入了解编码认证薪资期望。 为什么全栈开发能…

    2025年12月19日
    000
  • 使用 create-next-breeze 简化您的 Nextjs 开发

    开始一个新项目时,效率是关键。今天,我将介绍一个强大的工具,它将彻底改变您启动 next.js 项目的方式: npx create-next-breeze 什么是create-next-breeze? create-next-breeze 是 next.js 应用程序的增强型项目初始值设定项。它建立…

    2025年12月19日
    000
  • 手册和规范:掌握 JavaScript 指南

    欢迎回到我们的 JavaScript 世界之旅!在这篇博文中,我们将深入探讨有助于您理解和掌握 JavaScript 的基本手册和规范。无论您是初学者还是经验丰富的开发人员,这些资源都将作为您学习和故障排除的首选参考。让我们探索官方 ECMAScript 规范、MDN Web 文档和其他有用的资源。…

    好文分享 2025年12月19日
    000
  • 如何使用 HTML 和 CSS 使图像在悬停时旋转

    图像上的悬停旋转效果可以使您的内容更具吸引力和互动性。在本教程中,我们将引导您了解如何仅使用 html 和 css 创建简单但引人注目的悬停旋转效果。 如何创造效果 html: 首先,添加以下 html 代码: @@##@@ 您可以添加任何您喜欢的图像。 此代码设置了一个包含在具有悬停旋转类的标签中…

    2025年12月19日
    000
  • 如何使用 Tailwind CSS 和 JavaScript 创建基本的音乐可视化工具

    今天,我们将穿上舞鞋,使用 Tailwind CSS 和 JavaScript 构建一个基本的音乐可视化工具。 什么是音乐可视化工具?音乐可视化工具将音频信号转换为动态视觉效果。它实时分析音乐并显示反映音乐节拍、节奏和频率的动画或图形。从简单的波形到复杂的模式,可视化工具通过提供视觉组件来增强音频体…

    2025年12月19日
    000
  • + React 现代商店的电子商务组件

    想要使用 react 和 tailwind css 构建一个电子商务网站?您来对地方了! tailgrids 提供了一套全面的react 电子商务组件,旨在简化您的开发流程并增强您的在线商店。 TailGrids 拥有超过 100 多个电子商务 UI 组件、元素和页面,是您创建具有视觉吸引力和功能强…

    2025年12月19日
    000
  • Puck vPermissions

    puck 是由 measured 构建的 react 开源可视化编辑器 – 是 builder.io、wordpress 和其他所见即所得工具的自托管替代品。 我们正在庆祝 github 上获得 5,000 颗星!感谢我们美好的社区! puck v0.16 是一个重大版本,引入了头条权限…

    2025年12月19日
    000
  • 我参加了全栈训练营课程

    我做了什么! 我最近浏览了一个新手训练营的两小时视频,其中我构建并部署了一个全栈应用程序。 我只花了六个小时…… 这是我的一些收获。 内联 css 的正确模式和约定很困难。未考虑重构。使用 node server 来推送 react build 很尴尬。没有单元测试。部署是一…

    2025年12月19日 好文分享
    000
  • 从零到英雄:开始我的前端开发之旅

    这一切都始于 2017 年,当我第一次开始学习如何编码时,我在 Admas 报名参加了为期 3 个月的学习课程,起初我很兴奋参加课程做作业,但我并没有真正深入执行某些操作在我被阿比亚州立大学乌图鲁分校录取学习生物化学之前的练习和练习,我必须更加专注于我的学习,被一个非常严肃的部门录取。 所以我在 2…

    2025年12月19日
    000
  • 在 Laravel 项目中使用 SCSS 和 TailwindCSS 代码示例

    在编码领域,人们经常意识到什么有效,什么无效,以及尽管是新事物,但什么可以带来明确的改变。在这个小教程中,我将向您展示将 scss tailwindcss 一起用于无数 web 应用程序的最简单的事情。这个强大的组合可以显着增强您的 web 开发工作流程并创建更易于维护的样式表。 所以在开始之前先做…

    2025年12月19日
    000
  • 如何使用 Tailwind CSS 和 JavaScript 创建基本看板

    今天是星期一,让我们深入构建一个简单的看板!我们将使用 Tailwind CSS 和 JavaScript 创建一个包含三列的列:待办事项、进行中和完成。 什么是看板?看板是用于管理工作流程中的任务的可视化工具。它将任务组织成列,每个列代表流程的不同阶段。例如,基本的看板可以包括“待办事项”、“进行…

    2025年12月19日
    000
  • 优化 Nextjs 应用性能的经过验证的技巧 ⚡️

    优化 web 应用程序的性能对于提供快速、流畅的用户体验至关重要。 使用 next.js 这个强大的 react 框架,您可以利用许多内置功能来提高应用程序的速度和效率。 以下十个关键策略可帮助您的 next.js 应用获得最佳性能: 1. 仅加载您需要的 javascript 和 css 为了避免…

    2025年12月19日
    000
  • 在深入 Web 开发之前您必须了解的事项

    1. HTML、CSS、JavaScript——三位一体 没有砖头就建不了房子,不掌握 HTML、CSS 和 JavaScript 就无法建立网站。 HTML 是您的结构,CSS 使其看起来令人惊叹,而 JavaScript 通过交互性使其栩栩如生。如果您认真对待网络开发,请从这里开始。没有捷径! …

    2025年12月19日
    000
  • 你能解决这个问题吗?

    假设我们有两个 div,一个内部 div 和另一个外部 div。 内部 div 负责缩放和平移(使用 css 变换、平移和缩放完成)。 现在可以通过拖放将新的 div 添加到内部 div 中。放置事件被outerdiv 接受 现在,在放置事件期间,您可以获得 clientx、clienty 位置,现…

    2025年12月19日
    000
  • Web Development Job in 4

    简介 网络开发领域持续快速发展,为拥有适当技能和知识的个人提供了令人兴奋的机会。如果您想进入这个充满活力的行业或提升自己的职业生涯,这里有一些重要策略可以帮助您在 2024 年找到梦想的工作: 1. 掌握基本技能 编程语言:熟练掌握 JavaScript、Python、Ruby 或 PHP 等语言至…

    2025年12月19日
    000
  • 学习如何:useEFFECT 和 useSTATE,一个 REACT 应用程序

    我一直在开发一个名为“Heat”的网络应用程序,该应用程序的唯一目的是帮助我学习和应用 JavaScript 并改进我的 CSS,还有很多后端。我们的计划是创建一个具有视觉吸引力的网络应用程序,并具有一些有趣的功能。 在这个过程中我学到了什么: 前端是使用react js构建的,我选择react只是…

    2025年12月19日
    000
  • 太阳能系统挑战

    这是前端挑战 v24.09.04 的提交,Glam Up My Markup: Space 我建造了什么 我使用 CSS 网格创建了一个登陆页面,展示了每个部分中的所有项目。 演示 斯蒂芬妮-丹尼希.github.io 旅行 这是我完成的第一个这样的挑战。我想测试我的技能,看看在没有设计文件作为指导…

    2025年12月19日
    000
  • 编写更好的 React 代码:干净、高效的实践指南

    随着 react 的不断发展,开发人员必须不断更新最佳实践,以增强代码的可读性、可维护性和性能。本指南概述了 2024 年编写更清洁、更高效的 react 应用程序时要遵循的关键实践,包括 react 19 中引入的最新更改。 1.使用功能组件和钩子 带有钩子的功能组件是构建 react 应用程序的…

    2025年12月19日
    000

发表回复

登录后才能评论
关注微信