react用什麼ui組件函式庫

react可用ui元件庫有：1、Material-UI，有用於佈局、表單、導航、資料顯示和許多其他小工具的元件；2、Ant Design，有60多個元件，並附有可預測的靜態類型；3、Blueprint，有40多個元件；4、React Bootstrap，提供了與大量已經存在的Bootstrap主題的完全相容性；5、Onsen UI，提供選項卡、邊選單、堆疊導航、列表、表單等元件。

本教學操作環境：Windows7系統、react18版、Dell G3電腦。

react的元件庫

1、Material-UI

##1、Material-UI

##Material-UI是GitHub上最受歡迎且常用的React元件庫。它簡單，重量輕，並根據Google的Material-UI規格建造。有用於佈局、表單、導航、數據顯示和許多其他小部件的組件。

你可以使用@material-ui/styles來為你的元件設計樣式，這是一個快速、可擴展的CSS-in-JS解決方案，並且具有與樣式化元件相同的優點。 Material-UI也可以與其他主要的樣式解決方案互通，所以您不必使用它的樣式。

2、螞蟻設計（Ant Design）

Ant Design是一家擁有React庫的中國公司，該庫專為大公司的web應用程式設計。例如騰訊、阿里巴巴和百度。這個函式庫有60多個元件，是用TypeScript編寫的，帶有可預測的靜態類型。它的中英文文件簡潔、文筆優美、內容全面。

但是Ant Design不只是一個React UI函式庫。它是一個圍繞著成長、意義、確定性和自然的價值而建立的整個設計系統。看看他們的資源Figma UI套件，登陸頁面模板，一個草圖插件，和更多，它是我們常用的React元件庫。

3、Blueprint

作為一個常用的React元件庫，Blueprint提供豐富而流行的元件。 Blueprint是一個React UI庫，由美國大數據分析科技公司Palantir開發。他們的React庫有40多個元件，特別針對桌面應用程式的複雜資料密集介面進行了最佳化。

Blueprint是用TypeScript編寫的，它們文件中的所有程式碼範例也是如此。該程式庫支援Chrome、Firefox、Safari、IE 11和Microsoft Edge。 IE10及以下版本由於缺乏對CSS flex佈局的支援而不受支援。

4、React Bootstrap

React Bootstrap作為Bootstrap JavaScript的替代品。每個元件都是作為真正的React元件建構的，所以不需要依賴jQuery。 React Bootstrap是最古老的React函式庫之一，並隨著React本身穩定成長，由於使用Bootstrap有一大批老用戶，因此React Bootstrap也是一個較為常用的React元件庫。

Bootstrap的網格系統意味著你的佈局將擁有完全回應的一系列容器、行和列。你可以在數十個組件之間進行選擇，包括徽章、旋轉木馬、toast和超大螢幕。

它提供了與大量已經存在的 Bootstrap 主題的完全兼容性，以及一長串對每個主題都具有總權力的組件。 React Bootstrap 將狀態更新為虛擬 DOM，借助將 Bootstrap 的功能整合到 React 的虛擬 DOM 中，這是一種更穩定的開發解決方案。

5、Onsen UI

#Onsen UI是常用的Reac元件t庫，旨在建立HTML5和行動網頁應用。它的元件包括選項卡、邊選單、堆疊導航、清單、表單等。所有的組件都支援iOS和Android的材質設計，並根據平台自動改變應用程式的外觀。

在它的內部，Onsen由三層組成: 用cssnext編寫的CSS組件，用原生JavaScript編寫的web組件，易於與React集成的框架綁定，還有Vue和Angular。

6、Grommet

#Grommet是為響應性、可訪問性和行動優先的web專案設計的元件庫。它包含了原子設計方法，並允許鍵盤導航、螢幕閱讀器標籤等。它甚至有一個svg圖標列表。 ######包括Netflix、Uber、波音、惠普、三星和Twilio在內的許多大公司都使用Grommet來設計他們的web應用程式。如果你想讓你的設計感覺不那麼“Googly”，看看Grommet的組件。 ，它是一個出色而常用的React元件庫，其元件非常好看。 #########7、Gestalt######

Gestalt是一組React UI元件，它強化了Pinterest的設計語言。它的目的是創建一個設計最佳實踐的共享庫。該庫支援從右到左、國際化和暗模式。

由於它的自動設計和程式碼更新跨平台運行，Gestalt的維護相對較低。當一個發布會導致破壞性的更改時——在用法或輸入方面——它會提供一個codemod來簡化升級過程。

8、Semantic UI React

#React是官方的Semantic UI外掛程式。它與jquery無關，並且具有聲明性API、簡化道具、子組件、擴展、自動控制狀態等等。該庫擁有超過50個組件的集合，包括片段、進度條、過渡、分頁等。

Semantic UI React提供元件，而Semantic UI則以CSS樣式表的形式提供主題。你也可以使用而不是. 本人比較喜歡Semantic UI，有過一些使用經驗，Semantic UI React也作為一個相對常用的React元件庫。

9、Rebass

#Rebass是原始元件庫，也是常用的React元件庫，由Brent Jackson用樣式系統建構。它是為了創建一個具有設計約束和用戶定義規模的一致UI而構建的。 Rebass的佔用空間只有4KB，這意味著快速的設計和開發。

Rebass希望透過一流的主題化支援和與Theme UI的兼容性，實現最小、有用、無約束、可擴展和主題化。

10、React Virtualized

React Virtualized 在獨特的 React 元件庫中，專注於任何 UI 的特定方面，在大多數情況下渲染表格相當容易。借助 React Virtualized，Web 開發人員可以透過使用列表、表格、網格、集合等元件輕鬆渲染大量數據，可以使用它來創建更用戶友好的表格。 React Virtualized 已經有一個完整的指令序列來進行設定。

11、Blueprint UI React

Blueprint UI React 元件框架與所有新的資料密集型桌面和 Web 應用程式的 UI 開發路徑相同。它是一個基於 React 的 UI 工具包，專為桌面應用程式創建複雜的資料密集介面而設計。這是一個很棒的 UI 包，它旨在為所有元件提供開箱即用的可用性標準，並讓你可以存取明暗主題模式。

12、React Toolbox

React Toolbox 是一系列執行 Google Material Design 要求的 React 元件。它是基於一些最常見的提議，例如 CSS Modules(用 SASS 編寫)、Webpack 和 ES6。該庫與你的 Web 套件的工作流程緊密結合，完全可設定且用途廣泛。

它提供了許多元件，例如按鈕、卡片、日期選擇器、對話和其他常用元素。使 Web 開發人員能夠建立令人驚嘆的 Web 應用程序，該庫還包含全面的文件。

【相關推薦：Redis影片教學】

#

以上是react用什麼ui組件函式庫的詳細內容。更多資訊請關注PHP中文網其他相關文章！