前端 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 元件的詳細內容。更多資訊請關注PHP中文網其他相關文章！