前端 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 组件的详细内容,更多请关注【创想鸟】其它相关文章!

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

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2668412.html

(0)
上一篇 2025年3月7日 12:31:22
下一篇 2025年3月7日 12:31:33

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • UXD的困境

    作为一名用户体验开发人员 (UXD),我经常发现自己在科技行业处于独特的地位。虽然我的职责涵盖 UI 开发、前端 Web 开发和 UX 工程的各个方面,但标题可能含糊不清,导致许多误解和挑战。在这篇文章中,我想阐明作为 UXD 的现实,解决…

    2025年3月7日
    100
  • 输入 &#googlecom&# 后会发生什么?

    您是否想过在浏览器中输入“google.com”到看到熟悉的搜索页面出现之间的几分之一秒内发生的一系列复杂事件?在这个详细的探索中,我们将揭开网络技术、网络协议以及使我们的在线体验成为可能的错综复杂的数据的迷人世界。 1. 旅程开始:您的浏…

    2025年3月7日
    200
  • 如何从头开始启动 Shadcn 项目

    使用 react、tailwind css 和 shadcn 从头开始​​设置项目,但不使用任何预构建的样板,例如 create-next- app 或 create-react-app,您可以使用 webpack 或其他类似的捆绑器手动配…

    2025年3月7日
    200
  • 如何使用 Tailwind CSS 和 JavaScript 创建虚拟键盘

    大家周一快乐!今天,我们将深入研究使用 Tailwind CSS 和 JavaScript 构建虚拟键盘。这个项目是探索 JavaScript 并了解如何应用它来创建虚拟键盘的一种有趣且实用的方式。 什么是虚拟键盘? 虚拟键盘是物理键盘的基…

    2025年3月7日
    200
  • 克隆 Netflix 以提升您的前端技能

    作为一名主要专注于后端的开发人员,我一直觉得我的前端技能需要一些改进。为了测试这一点,我决定通过使用 vue.js 3 和 vite 构建 netflix 克隆来挑战自己。在这篇文章中,我将分解项目结构、关键组件,并分享我的学习经验。 项目…

    2025年3月7日
    200
  • 如何使用 Tailwind CSS 设置 os Nextjs

    要使用 tailwind css 设置 next.js,请按照以下步骤操作: 第 1 步:创建一个新的 next.js 项目 如果您尚未创建 next.js 项目,您可以使用 create-next-app 创建一个项目。 npx crea…

    2025年3月7日
    200
  • 我创建了一个新的开源项目

    我创建了一个可在 Linux、Windows、macOS 上使用的开源文件共享系统,称为 Polyshare,它通过本地网络工作,这意味着它不需要移动数据即可工作。 PolyShare *:快速、跨平台的本地网络文件共享 技术栈:HTML、…

    2025年3月7日
    200
  • 每个开发人员都应该了解的高级 JavaScript 概念

    javascript 是许多开发人员日常使用的语言,但其生态系统中存在许多隐藏的瑰宝,即使是经验丰富的开发人员也可能不熟悉。本文探讨了一些鲜为人知的 javascript 概念,它们可以显着提高您的编程技能。我们将介绍诸如 代理、符号、生成…

    2025年3月7日
    200
  • Reactjs 入门:初学者指南

    简单介绍一下 React.js 作为一个用于构建用户界面的流行 JavaScript 库。提及它的基于组件的架构和虚拟 DOM。为什么选择 React?性能:讨论虚拟 DOM 如何通过最小化对实际 DOM 的直接操作来提高性能。可重用性:解…

    2025年3月7日
    200
  • 令人兴奋的 React 项目,供初学者培养和提高技能

    react 凭借其基于组件的架构和庞大的生态系统,已成为构建用户界面的最流行的 javascript 库之一。如果您刚刚开始使用 react,通过构建实际项目来学习是获得信心和提高技能的最佳方式。本文概述了 10 个适合初学者的 react…

    2025年3月7日
    200

发表回复

登录后才能评论