?? 前言

• 大家好我是小盧，在快速變化的前端開發(fā)世界中，React 憑借其簡潔明確的設(shè)計思想和強大的性能表現(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。
• 它包括全面的預(yù)構(gòu)建組件集合，開箱即可用于生產(chǎn)。
• Material UI 設(shè)計精美，并具有一套自定義選項，使您可以輕松地在我們的組件之上實現(xiàn)您自己的自定義設(shè)計系統(tǒng)。
• Material UI 的優(yōu)點

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

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

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

圖片

圖片

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

Chakra UI

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

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

圖片

圖片

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

NextUI

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

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

圖片

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

Elastic UI

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

圖片

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

Evergreen

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

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

圖片

圖片

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

ORBIT

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

圖片

圖片

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

Ant Design

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

• ?? 提煉自企業(yè)級中后臺產(chǎn)品的交互語言和視覺風格。
• ?? 開箱即用的高質(zhì)量 React 組件。
• ?? 使用 TypeScript 開發(fā)，提供完整的類型定義文件。
• ?? 全鏈路開發(fā)和設(shè)計工具體系。
• ?? 數(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 的設(shè)計風格。
• 借助 Geist 在文字排版、明暗表達、伸縮組件等諸多別具一格的優(yōu)勢，你可以輕易創(chuàng)建簡潔有力的個人站點，或是基于高度可定制化設(shè)計系統(tǒng)快速構(gòu)建現(xiàn)代化 Web 應(yīng)用。

圖片

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

React Bootstrap

• The most popular front-end framework, rebuilt for React.
• React-Bootstrap 取代了 Bootstrap JavaScript。每個組件都是作為真正的 React 組件從頭開始構(gòu)建的，沒有像 jQuery 這樣不需要的依賴項。
• 在構(gòu)建時考慮到兼容性，采用引導程序核心，并努力與世界上最大的 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)無限可能。