?? 前言

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

Material UI

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

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

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

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

圖片

圖片

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

Chakra UI

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

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

圖片

圖片

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

NextUI

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

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

圖片

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

Elastic UI

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

圖片

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

Evergreen

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

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

圖片

圖片

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

ORBIT

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

圖片

圖片

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

Ant Design

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

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

圖片

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

REAVIZ

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

圖片

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

Geist

• Geist UI 是一個(gè)優(yōu)雅美觀，擁有濃厚 Geek 風(fēng)格的 React 組件庫(kù)，靈感來自于 Vercel 的設(shè)計(jì)風(fēng)格。
• 借助 Geist 在文字排版、明暗表達(dá)、伸縮組件等諸多別具一格的優(yōu)勢(shì)，你可以輕易創(chuàng)建簡(jiǎn)潔有力的個(gè)人站點(diǎn)，或是基于高度可定制化設(shè)計(jì)系統(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。每個(gè)組件都是作為真正的 React 組件從頭開始構(gòu)建的，沒有像 jQuery 這樣不需要的依賴項(xiàng)。
• 在構(gòu)建時(shí)考慮到兼容性，采用引導(dǎo)程序核心，并努力與世界上最大的 UI 生態(tài)系統(tǒng)兼容。

圖片

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

?? 寫在最后

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