?? 前言

• 大家好我是小盧，在快速變化的前端開發(fā)世界中，React 憑借其簡潔明確的設計思想和強大的性能表現(xiàn)獨占鰲頭，贏得了全球開發(fā)者的廣泛青睞??。
• 相比于從零開始創(chuàng)建每一個組件，使用現(xiàn)成的 React UI 組件庫可以極大地提高我們的開發(fā)效率。事實上，整個React社區(qū)已經(jīng)積累了大量優(yōu)秀的組件庫，接下來給大家分享 10 個開發(fā)者歡迎的React 組件庫??。

Material UI

• Material UI 是一個開源的 React 組件庫，它實現(xiàn)了 Google 的 Material Design。
• 它包括全面的預構建組件集合，開箱即可用于生產(chǎn)。
• Material UI 設計精美，并具有一套自定義選項，使您可以輕松地在我們的組件之上實現(xiàn)您自己的自定義設計系統(tǒng)。
• Material UI 的優(yōu)點

「交付速度更快」：超過 2,500 名開源貢獻者在這些組件上投入了無數(shù)的時間。專注于個人核心業(yè)務邏輯，而不是重新發(fā)明輪子。

「默認美觀」：對 Material Design 的實現(xiàn)一絲不茍，確保每個 Material UI 組件都滿足形式和功能的最高標準，但在必要時偏離官方規(guī)范，以提供多種出色的選項。

「可定制性」: 該庫包含一組廣泛的直觀可定制功能。商店中的模板展示了您可以在定制方面走多遠。

圖片

圖片

• 官網(wǎng)：https://mui.com/material-ui

Chakra UI

• Chakra UI 是一個簡單、模塊化且可訪問的組件庫，為您提供構建 React 應用程序所需的構建塊，我們可以叫它查克拉 UI。
• 可簡化現(xiàn)代 Web 應用程序和網(wǎng)站的開發(fā)。該庫提供了各種組件，可以輕松組合這些組件來構建復雜的用戶界面，同時遵循可訪問性最佳實踐。
• Chakra UI 的優(yōu)點

• 「易于樣式設置」：Chakra UI 包含一組布局組件，例如 Box 和 Stack ，可以通過傳遞 props 輕松設置組件的樣式。
• 「靈活且可組合」：Chakra UI 組件構建在 React UI Primitive 之上，以實現(xiàn)無限的可組合性。
• 「無障礙」：Chakra UI 組件遵循 WAI-ARIA 指南規(guī)范并具有正確的 aria-* 屬性。
• 「深色模式」：Chakra UI 中的大多數(shù)組件都兼容深色模式。

圖片

圖片

• 官網(wǎng)：https://chakra-ui.com

NextUI

• NextUI 是 React 的 UI 庫，可幫助您構建美觀且易于訪問的用戶界面。在 Tailwind CSS 和 React Aria 之上創(chuàng)建。
• NextUI 的主要目標是簡化開發(fā)流程，提供美觀且適應性強的系統(tǒng)設計，以增強用戶體驗。
• 由于動畫的復雜性及其基于物理的性質，NextUI 使用 Framer Motion 來對某些組件進行動畫處理。Framer Motion 能夠以更直接、更高效的方式處理這些動畫，而且它經(jīng)過了良好的測試和生產(chǎn)準備。
• NextUI 的優(yōu)點

• 構建于 Tailwind CSS 之上，這意味著捆綁包中沒有運行時樣式，也沒有不必要的類。
• 自動暗模式識別，NextUI 在檢測到 HTML theme prop 變化時自動更改主題。
• NextUI 是完全類型化的，可以最大限度地減少學習曲線，并提供最佳的開發(fā)人員體驗。

圖片

• 官網(wǎng)：https://nextui.org/

Elastic UI

• Elastic UI 框架 (EUI) 是 Elastic 使用的一個設計庫，用于構建需要分享我們美學的內部產(chǎn)品。它分發(fā) UI React 組件和靜態(tài)資源，用于構建 Web 布局。
• 使用高對比度、色盲安全調色板，并通過大多數(shù)輔助技術進行測試。
• 可配置性足以滿足各種環(huán)境的需求，同時保持品牌和低級別的一致性。
• 代碼對新手和專家都很友好。

圖片

• 官網(wǎng)：https://eui.elastic.co

Evergreen

• Evergreen 是一個 React UI 框架，用于在網(wǎng)絡上構建雄心勃勃的產(chǎn)品，它是一個靈活的框架，其許多視覺設計都是通過設計團隊和外部貢獻者的大量迭代得出的。
• 包含一組經(jīng)過精心設計的 React 組件，可以開箱即用。
• 組件構建在 React UI Primitive 之上，以實現(xiàn)無限的可組合性。
• 具有適用于企業(yè)級 Web 應用程序的 UI 設計語言。
• Evergreen 的優(yōu)點

• 「靈活性」: Evergreen 應該盡可能靈活和可組合，允許用戶構建多種 UI 變體。Evergreen 是基于 ui-box 構建的，以提供無限的靈活性。
• 「合理的默認值」: Evergreen 應該提供開箱即用的合理默認值，并讓其開發(fā)人員通過富有表現(xiàn)力的 API 對其進行自定義。
• 「貢獻者友好」: Evergreen 強調強大的文檔和友好的寫作語氣，以便內部和外部人員能夠感到有能力為框架做出貢獻并提出他們的觀點。

圖片

圖片

• 官網(wǎng)：https://evergreen.segment.com

ORBIT

• 如果你打算做一個關于旅行相關的項目，那么這個 UI 庫一定適合你。
• Orbit-components 是一個 React 組件庫，幫助開發(fā)者構建旅行產(chǎn)品。
• 含有豐富的旅行相關元素供你直接使用。

圖片

圖片

• 官網(wǎng)：https://orbit.kiwi/

Ant Design

• 這個組件庫大家再熟悉不過了吧，相信很多同學用的第一個組件庫就是 Ant Design。
• antd 是基于 Ant Design 設計體系的 React UI 組件庫，主要用于研發(fā)企業(yè)級中后臺產(chǎn)品。
• Antd 的優(yōu)點

• ?? 提煉自企業(yè)級中后臺產(chǎn)品的交互語言和視覺風格。
• ?? 開箱即用的高質量 React 組件。
• ?? 使用 TypeScript 開發(fā)，提供完整的類型定義文件。
• ?? 全鏈路開發(fā)和設計工具體系。
• ?? 數(shù)十個國際化語言支持。
• ?? 深入每個細節(jié)的主題定制能力。

圖片

• 官網(wǎng)：https://ant.design/index-cn

REAVIZ

• REAVIZ 是一個模塊化圖表組件庫，它原生利用 React 來渲染組件，同時在底層使用 D3js 進行計算。該庫提供了一種簡單的方法來開始創(chuàng)建圖表，而無需犧牲定制能力。
• 就比如這個圖表，大家是不是很熟悉呢？就是我們記錄我們提交新鮮的小格子。

圖片

• 官網(wǎng)：https://github.com/reaviz/reaviz

Geist

• Geist UI 是一個優(yōu)雅美觀，擁有濃厚 Geek 風格的 React 組件庫，靈感來自于 Vercel 的設計風格。
• 借助 Geist 在文字排版、明暗表達、伸縮組件等諸多別具一格的優(yōu)勢，你可以輕易創(chuàng)建簡潔有力的個人站點，或是基于高度可定制化設計系統(tǒng)快速構建現(xiàn)代化 Web 應用。

圖片

• 官網(wǎng)：https://geist-ui.dev/zh-cn

React Bootstrap

• The most popular front-end framework, rebuilt for React.
• React-Bootstrap 取代了 Bootstrap JavaScript。每個組件都是作為真正的 React 組件從頭開始構建的，沒有像 jQuery 這樣不需要的依賴項。
• 在構建時考慮到兼容性，采用引導程序核心，并努力與世界上最大的 UI 生態(tài)系統(tǒng)兼容。

圖片

• 官網(wǎng)：https://react-bootstrap.github.io/

?? 寫在最后

• 實際上，React 的生態(tài)系統(tǒng)中還有許多其他優(yōu)秀的組件庫等待開發(fā)者去發(fā)掘??。
• 以上提到的這 10 個組件庫，只是冰山一角。這些庫各有特色，你可以根據(jù)自己的具體需求和偏好來選擇。不過，無論你選擇使用哪個組件庫，記住不要僅僅局限于庫本身提供的功能。
• React 的美妙在于其靈活性和擴展性，你可以通過組合不同的庫，甚至創(chuàng)建自己的自定義組件，以實現(xiàn)無限可能。