2023 年八個(gè)優(yōu)秀 React UI 組件庫(kù)和框架
- 「React Bootstrap：」一個(gè)與 Bootstrap 框架集成的實(shí)用的 React UI 庫(kù)。
- 「Grommet：」如果您想在設(shè)計(jì)中實(shí)現(xiàn)可訪問(wèn)性，這個(gè) React UI 組件庫(kù)非常有用。
- 「Blueprint：」對(duì)于桌面 React 應(yīng)用程序，您需要查看 Blueprint 的產(chǎn)品。
- 「Ant Design：」這個(gè)庫(kù)的設(shè)計(jì)重點(diǎn)是與用戶的聯(lián)系：這是每個(gè)設(shè)計(jì)師都想實(shí)現(xiàn)的。
- **Onsen UI React:**如果你想構(gòu)建一個(gè)移動(dòng) React 應(yīng)用程序，這個(gè)庫(kù)將涵蓋 UI 設(shè)計(jì)。
- **Rebass:**這個(gè)庫(kù)的獨(dú)特之處在于你可以在你的代碼中使用樣式化的道具，而不需要打開(kāi)第二個(gè)樣式表。
- **Semantic UI React:**顧名思義，這個(gè) React 庫(kù)集成了語(yǔ)義 UI 開(kāi)發(fā)框架。
- **MUI:**為了實(shí)現(xiàn)類似Google 的 Material Design 的外觀，MUI 是一個(gè)很好的選擇——特別是考慮到它的實(shí)現(xiàn)簡(jiǎn)潔明了。
事實(shí)上，庫(kù)的數(shù)量遠(yuǎn)不止八個(gè)。但是，我們認(rèn)為這些代表了市場(chǎng)上最高的質(zhì)量。更重要的是，它們沒(méi)有任何順序——所以請(qǐng)隨意閱讀每一個(gè)，看看它們是如何比較的。
1、React Bootstrap
首先，我們有React Bootstrap。這是較舊的 React UI 庫(kù)之一，這意味著您為 UI 設(shè)計(jì)奠定了良好的基礎(chǔ)。
該庫(kù)具有以下特點(diǎn)：
- 使用TypeScript。
- 使用 Bootstrap 樣式表，將能夠?qū)⑺cBootstrap 主題一起使用。
你可以通過(guò)如下指令快速引入該包
npm install react-bootstrap bootstrapReact Bootstrap 使用“variants”來(lái)創(chuàng)建不同的元素：
function TypesExample() {
return (
<>
<Button variant="primary">Primary</Button>{' '}
<Button variant="secondary">Secondary</Button>{' '}
<Button variant="success">Success</Button>{' '}
<Button variant="warning">Warning</Button>{' '}
<Button variant="danger">Danger</Button>{' '}
<Button variant="info">Info</Button>{' '}
<Button variant="light">Light</Button>{' '}
<Button variant="dark">Dark</Button>
<Button variant="link">Link</Button>
</>
);
}
export default TypesExample;此示例將創(chuàng)建一系列的樣式按鈕：
總的來(lái)說(shuō)，React Bootstrap 使用起來(lái)很直觀，并且會(huì)幫助創(chuàng)建看起來(lái)很棒的 UI 元素。
2、Grommet
在我們最好的 React UI 組件庫(kù)和框架列表中，下一個(gè)是Grommet。這提倡簡(jiǎn)化的方法，如果將它與 React Bootstrap 進(jìn)行比較，它會(huì)提供更多的功能。
該框架不需要很長(zhǎng)的設(shè)計(jì)周期就可以開(kāi)始工作。例如，您有Grommet Themer來(lái)幫助您將組件庫(kù)與您的配色方案相匹配。更重要的是，您擁有專用的Grommet Designer，它使用簡(jiǎn)單的構(gòu)建器來(lái)創(chuàng)建您的組件設(shè)計(jì)。
使用 npm 或 Yarn 可以輕松安裝：
npm install grommet grommet-icons styled-components --save可以使用以下方式創(chuàng)建一個(gè)簡(jiǎn)單的光滑按鈕
export default () => (
<SandboxComponent>
<Button label='Submit' onClick={() => {}} />
</SandboxComponent>
);總而言之，我們喜歡 Grommet 的酷炫默認(rèn)設(shè)計(jì)、可訪問(wèn)性特性和其他設(shè)計(jì)工具。
3、Blueprint UI
如果您想要一個(gè)簡(jiǎn)潔又實(shí)用的 React UI 組件庫(kù)，Blueprint UI可能是適合您的工具包。
](https://www.designbombs.com/wp-content/uploads/2023/01/blueprint-ui.png)
你不會(huì)希望在移動(dòng)優(yōu)先的應(yīng)用程序中使用 Blueprint。這是一種開(kāi)發(fā)在瀏覽器中運(yùn)行的桌面應(yīng)用程序的方法: 復(fù)雜度越高越好！
你可以通過(guò)如下指令快速引入該包
npm add @blueprintjs/core react react-dom通過(guò)以下代碼可以創(chuàng)建一個(gè)按鈕：
<Button intent="success" text="button content" notallow={incrementCounter} />我們認(rèn)為 Blueprint UI 是一種簡(jiǎn)單易用的工具，非常適合快速啟動(dòng)設(shè)計(jì)。
4、Ant Design
Ant Design自稱是世界上第二受歡迎的 React UI 框架。即便如此，它仍然是你項(xiàng)目的首選。
Ant Design 的設(shè)計(jì)理念就是清晰。您可以在其默認(rèn)設(shè)計(jì)和工具包含中均可以看到這一點(diǎn)。例如，你有一個(gè)前端主題工具，還有豐富而現(xiàn)代的組件，看起來(lái)很漂亮。
你可以通過(guò)如下指令快速引入該包
npm install antd要?jiǎng)?chuàng)建一個(gè)按鈕，您只需要最少的行數(shù)：
import { Button } from 'antd';
const App = () => (
<>
<Button type="primary">PRESS ME</Button>
</>
);結(jié)果是一個(gè)直觀、簡(jiǎn)單且簡(jiǎn)潔的按鈕：
總的來(lái)說(shuō)，Ant Design 可以幫助你創(chuàng)建現(xiàn)代設(shè)計(jì)，在我們看來(lái)，它是最好的 React UI 組件庫(kù)和框架之一。
5、Onsen UI React
Onsen UI React是移動(dòng)應(yīng)用程序的組件庫(kù)。
它同時(shí)支持 Android 和 iOS，這意味著您擁有適用于 Material 和 Flat 設(shè)計(jì)的專用組件。更好的是，Onsen UI React 將自動(dòng)檢測(cè)您的設(shè)計(jì)適用于哪個(gè)平臺(tái)并相應(yīng)地進(jìn)行調(diào)整。
通過(guò)以下指令將引入該包。
npm install onsenui react-onsenui --save您將使用VOns<element>組件和修飾符來(lái)創(chuàng)建元素：
<v-ons-button>Normal</v-ons-button>
<v-ons-button modifier="quiet">Quiet</v-ons-button>
<v-ons-button modifier="outline">Outline</v-ons-button>
<v-ons-button modifier="cta">Call to action</v-ons-button>
<v-ons-button modifier="large">Large</v-ons-button>加上一些樣式，您將有一些漂亮的按鈕可以添加到您的項(xiàng)目中：
對(duì)于移動(dòng)應(yīng)用程序，您找不到許多容易使用的庫(kù)：所以強(qiáng)烈推薦使用該 React UI 組件庫(kù)。
6、Rebass
樣式對(duì)于任何UI設(shè)計(jì)來(lái)說(shuō)顯然都非常重要。Rebass試圖使用styled props，以便您可以將其編碼到React UI中。
Rebass 這個(gè) React UI 庫(kù)的設(shè)計(jì)理念是盡量減少需要編寫(xiě)的 CSS 代碼。這樣可以讓開(kāi)發(fā)者在開(kāi)發(fā)過(guò)程中更接近最終的設(shè)計(jì)效果，而不需要進(jìn)行第二輪的 CSS 樣式調(diào)整。此外，Rebass 提供了一組原始組件，這些組件也具有良好的外觀效果，并且整個(gè)庫(kù)非常輕量級(jí)。因此，Rebass 非常靈活、可擴(kuò)展，而且容易與您的項(xiàng)目集成。
通過(guò)以下指令引入該包：
npm i rebass通過(guò)以下方式添加一個(gè)按鈕：
<Button variant='primary' mr={2}>Primary</Button>Rebass for React 類似于 Bootstrap for CSS，但具有更好的標(biāo)記和一流的設(shè)計(jì)選項(xiàng)。該庫(kù)將幫助您進(jìn)行組件設(shè)計(jì)，而不是 HTML 和 CSS 設(shè)計(jì)。
7、Semantic UI React
與 React Bootstrap 非常相似，Semantic UI React是其父開(kāi)發(fā)框架的擴(kuò)展。
如果你選擇使用 Semantic UI，這將是最好的 React UI 組件庫(kù)和框架之一。更好的是，您將能夠快速集成它，并且使用起來(lái)很直觀。此外，Semantic UI還提供了一些強(qiáng)大的功能，例如增強(qiáng)、簡(jiǎn)寫(xiě)屬性和自動(dòng)控制狀態(tài)。這意味著您可以創(chuàng)建組件，并且它們將自我管理其狀態(tài)，無(wú)需您的輸入。
通過(guò)以下指令引入該包：
npm install semantic-ui-react semantic-ui-css簡(jiǎn)單使用
const ButtonExampleButton = () => <Button>Click Here</Button>如果您選擇使用Semantic UI，這個(gè) React UI 組件庫(kù)將最適合您的項(xiàng)目。
8、MUI
幾年前，Google's Material Design曾出現(xiàn)在公眾視野中一段時(shí)間。這個(gè)想法是將布局和設(shè)計(jì)選擇標(biāo)準(zhǔn)化,以達(dá)到 Google 認(rèn)為的“corrent”。在不討論這種方法的優(yōu)缺點(diǎn)的情況下，MUI是最好的 React UI 組件庫(kù)和框架之一，可以幫助您以這種風(fēng)格進(jìn)行創(chuàng)建。
MUI 是一個(gè)工具箱而不是一個(gè)簡(jiǎn)單的庫(kù)。例如，您有MUI Core，還有用于高級(jí)用例的MUI X。當(dāng)您需要樹(shù)視圖、數(shù)據(jù)選擇器、數(shù)據(jù)網(wǎng)格等時(shí)，這就是您要使用的工具。此外，還提供了 UI 布局模板和設(shè)計(jì)工具包可以幫助您完成項(xiàng)目。
引入所需要的包：
npm install @mui/material @emotion/react @emotion/styled簡(jiǎn)單使用：
<Button variant="contained">Contained</Button>考慮到可用性、實(shí)現(xiàn)和結(jié)果的綜合因素，選擇 MUI 是沒(méi)有錯(cuò)的。如果您需要將應(yīng)用程序與 Google 的設(shè)計(jì)風(fēng)格進(jìn)行整合，那么 MUI 是理想的選擇。
總的老說(shuō)
React是用來(lái)幫助你加快編碼速度的的一個(gè)庫(kù)，React UI能夠進(jìn)一步提速，如果你基于Google的設(shè)計(jì)原則進(jìn)行設(shè)計(jì)可以使用MUI；如果開(kāi)發(fā)面向移動(dòng)設(shè)備的UI設(shè)計(jì)可以使用Onsen UI React；如果開(kāi)發(fā)桌面應(yīng)用程序可以首選Blueprint UI。庫(kù)雖然很多，但是大部分人首選還是Antd。
參考文檔：https://www.designbombs.com/best-react-ui-component-libraries-frameworks/。
