?? 前言

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

Material UI

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

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

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

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

圖片

圖片

• 官網：https://mui.com/material-ui

Chakra UI

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

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

圖片

圖片

• 官網：https://chakra-ui.com

NextUI

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

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

圖片

• 官網：https://nextui.org/

Elastic UI

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

圖片

• 官網：https://eui.elastic.co

Evergreen

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

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

圖片

圖片

• 官網：https://evergreen.segment.com

ORBIT

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

圖片

圖片

• 官網：https://orbit.kiwi/

Ant Design

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

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

圖片

• 官網：https://ant.design/index-cn

REAVIZ

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

圖片

• 官網：https://github.com/reaviz/reaviz

Geist

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

圖片

• 官網：https://geist-ui.dev/zh-cn

React Bootstrap

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

圖片

• 官網：https://react-bootstrap.github.io/

?? 寫在最后

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