」工欲善其事,必先利其器。「—孔子《論語.錄靈公》
首頁 > 程式設計 > 前端 UI 元件

前端 UI 元件

發佈於2024-11-07
瀏覽:511

 Frontend UI Components

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 上推送程式碼

請隨意查看它們,並讓我知道還需要添加和創建哪些內容。

乾杯
施瑞

版本聲明 本文轉載於:https://dev.to/shreyvijayvargiya/40-code-components-339e?1如有侵犯,請聯絡[email protected]刪除
最新教學 更多>

免責聲明: 提供的所有資源部分來自互聯網,如果有侵犯您的版權或其他權益,請說明詳細緣由並提供版權或權益證明然後發到郵箱:[email protected] 我們會在第一時間內為您處理。

Copyright© 2022 湘ICP备2022001581号-3