2021 年 5 大 React UI 設計框架

什麼是反應？

React 的教科書定義是它是一個開源的前端 JavaScript 庫，由 Facebook 開發者社區創建和維護。 它用於構建用戶界面或 UI 組件。

但是，此定義假定您已經知道那裡提到的一些關鍵術語。 我們有一篇完美的博客文章，它從頭開始詳細介紹了 React 是什麼，您可以在此處找到。

React 也為客戶和程序員帶來了福音，允許開發人員快速輕鬆地構建 MVP，從而實現跨平台開發，幫助程序員成為全棧。

為什麼我們需要設計框架？

從用戶界面的角度來看，有很多設計語言。 Material UI 就是一個很好的例子。 當您擁有特定的設計語言時，組件總是被重用，並且它們具有特定的預定義結構。 即使您沒有嚴格遵循某種設計語言，也有很多跨應用程序相似的組件。

設計框架為開發人員提供了常用 UI 組件的工具包。 這允許開發人員快速開發項目，因為他們不必繼續重新發明輪子。

話雖如此，以下是前 5 個 React UI 設計框架：

1. 材質界面

Material Design 是谷歌開發的最流行的設計語言之一。 它使用更多基於網格的佈局、響應式動畫和過渡、填充和深度效果，例如照明和陰影。

Material UI 是一個使用 Material Design 的 React 框架。 這意味著它有一些組件可以更容易地將 Material Design 實現到你的 React 項目中。

它的一些功能如下所述：

• Material UI 是最受歡迎和積極維護的庫之一，在 GitHub 上有 2.1k 貢獻者和 68.6k 星
• 使用 <MuiThemeProvider> 組件可以非常輕鬆地為您的應用程序和字體定義自定義顏色主題。 它還有一個預定義的調色板
• 不依賴於任何全局樣式表，例如 normalize.css，Material UI 組件是自支持的，並且只會注入它們需要顯示的樣式。
• 它有一個龐大的組件庫，例如應用欄、數據表、滑塊、工具提示等，它們都具有相似的設計語言，因此您的應用程序看起來具有凝聚力，無需太多努力

2. 反應引導

如果你對前端開發有一個模糊的概念，你可能聽說過 Bootstrap。 它是一個開源 CSS 框架，旨在響應式前端 Web 開發，它是移動優先的。 它包含大量模板，從排版、表單到按鈕、導航和其他基於 CSS 和 JavaScript 的界面組件。

顧名思義，React Bootstrap 取代了 Bootstrap JavaScript。 每個組件都是作為 React 組件從頭開始開發的，沒有像 jQuery 這樣的不需要的依賴項。

它的一些功能如下所述：

• 它在 GitHub 上有 19.5k 星和 406 位貢獻者。
• React Bootstrap 的網格系統使用一系列容器、行和列來佈局和對齊內容。 它是用 flexbox 構建的，並且是完全響應的。
• Bootstrap 包含一些通用的 CSS 過渡，可以應用於許多組件。 React Bootstrap 將它們捆綁到 react-transition-group 中的幾個可組合的 <Transition> 組件中，這是 React 常用的動畫包裝器。
• 將動畫封裝到組件中還有一個額外的好處，那就是使它們更廣泛地有用，並且便於在其他庫中使用。 所有可以動畫的 React Bootstrap 組件都支持可插入的 <Transition> 組件。

3. 反應 - 管理員

對於每個以業務為中心的軟件，管理面板都是必不可少的，幾乎所有的管理面板都具有許多基於業務領域的類似功能。 這方面的一些示例可能是查找用戶的地址、將訂單標記為已退款、重置密碼等。

React Admin 是一個使用 React、Material UI、React Router、Redux 和 React-final-form 的框架。 使用這些，它提供了一個可定制的統一管理框架，可用於構建儀表板。

這裡提到的是它的一些功能：

• 它在 GitHub 上有 17k 顆星和 425 位貢獻者。
• React-Admin 是一個前端框架。 它是為使用項目中現有的 REST / GraphQL API 而構建的。
• 它支持創建前端管理應用程序，這些應用程序通過數據提供程序以標準化方式與後端交互。
• 它使用適配器方法，簡要說明如下：
  • 數據提供者充當框架和後端之間的接口。
  • 它處理前端和各自後端 API 之間的查詢和響應處理，從而將重點放在以模塊化步驟構建儀表板。
• React Admin 提供的一些東西是：
  • 關係支持
  • 條件格式
  • 功能齊全的數據網格
  • 樂觀渲染

4. 螞蟻設計

就像 React 的 Material UI 遵循 Google 的 Material Design 原則一樣，Ant Design for React 也遵循 Ant Design 原則。 它由中國企業集團阿里巴巴創建，並被阿里巴巴、騰訊、百度等多家知名企業使用。

根據他們的設計價值觀頁面，Ant Design 專注於以下方面：

• 自然——使用自然的交互，避免任何復雜性
• 確定的——以這樣的方式創建設計規則，以避免低效率和維護繁重的產品
• 有意義——牢記最終用戶的需求，並圍繞該需求進行設計
• 成長——專注於通過設計發現產品的功能和價值

它的一些特點是：

• 目前 Ant Design 在 GitHub 上有 72k 顆星和 1,423 位貢獻者
• Ant 佈局系統由一個 24 等分（表示整體的一部分）網格和一個單獨的佈局組件組成，您可以選擇使用它。
  • 網格使用熟悉的 Row 和 Col 系統，但也可以指定一個名為 flex 的屬性，它允許利用 Flexbox 屬性來定義響應式 UI。
• 這些組件由一家中國企業集團製造，包括對數十種語言的國際化支持。
• 使用 Less.js 作為其樣式語言，還可以根據特定的設計規範自定義組件。
• 它具有佈局、網格、表單、麵包屑導航、分頁等組件。

我們 Creole Studios 喜歡使用 Ant Design 框架，並已將其用於許多項目。 一個例子是連接雇主和專家以完成任務的在線職位發布和跟踪門戶，其中一個屏幕如下所示：

我們有許多專家致力於 Ant Design 和 Material UI 以及其他設計框架，您的想法就像聯繫我們一樣簡單，我們將為您的項目提供無可挑剔的設計。

5. 反應基礎

Foundation 是一系列響應式前端框架，可幫助設計在任何設備上看起來都很棒的漂亮的響應式網站、應用程序和電子郵件。 基金會背後的組織 Zurb 將他們的框架描述為語義、可讀、靈活和完全可定制的

它是一個類似於 bootstrap 的 CSS 框架，React Foundation 基本上是按照框架的最佳實踐將 Foundation 的每個部分包裝成可重用的 React 組件。 它的一些特性描述如下：

• 它有 579 個 GitHub 星和 21 個貢獻者
• React Foundation 使用純渲染組件，也稱為無狀態組件，盡可能將內存使用量保持在最低限度
• 有狀態組件僅用於較大的組件，例如 ResponsiveNavigation，其中狀態實際上是必需的。

沒有“完美”的 React UI 設計框架是所有項目的最佳選擇，但是，有一些特點，例如詳盡的文檔、大量的組件、維護良好且不斷更新的存儲庫以及大型社區論壇可以提供幫助您在 Web 和移動應用程序開發過程的每一步中，使框架易於使用。