• 原文地址：11 React UI Component Libraries you Should Know in 2019
• 原文作者：Jonathan Saring
• 譯文出自：掘金翻譯計劃
• 本文永久連結：github.com/xitu/gold-m…
• 譯者：ElizurHz
• 校對者：wuzhengyan2015, xiaxiayang

2019 年你應該要知道的 11 個 React UI 元件庫

雖然 React 的使用者量落後於 Angular 很多，但它在 Stack overflow 的最受喜愛的元件庫中排名領先:

React 在 2017 年的受歡迎程度上升

React 的虛擬 DOM、宣告式地描述使用者介面併為介面構建相應狀態的能力、對有一定水平的 JavaScript 開發者來說入門門檻低，這些都使 React 成為了一個非常棒的構建 UI 的 專業庫。

使用 React 的另一個重要原因是它的元件。元件能夠讓你把 UI 分割成獨立的、可複用的塊。這裡有 11 個很棒的 React 元件庫可以幫助你開始使用 React 的元件。

你還可以使用 Bit 把這些元件結合起來，並將你的元件轉化成能夠統一管理並在多個專案間同步的模組。

• Bit — 共享和構建元件：Bit 讓使用更小的元件開發軟體、團隊間共享和在你的所有專案中同步變得有趣且容易

有了 Bit，你可以輕鬆地在多個專案和應用間共享、開發和同步元件，為你的團隊管理元件，以及改進具有雙向程式碼變更的 React 的元件的工作流。這裡有 一個例子。

React Hero UI component with Bit

1. React Material-UI

React Material-UI 是一套實現了 Google 的 Material Design 的 React 元件。它在 GitHub 上有 30k+ stars，大概是目前最受歡迎的 React 元件庫了。它的 v1 版本快要推出了。

2. React-Bootstrap

React-Bootstrap 是一個具有 Twitter 的 Bootstrap 的觀感的 React 元件庫。它的極簡風格在社群中有很高的熱度，有超過 11k 的 stars。

3. React toolbox

React Toolbox 是一套實現了 Google Material Design 規範的 React 元件。它是基於如 CSS Modules（基於 SASS）、webpack 和 ES6 這樣的最新提案構建的。它的網站提供了一個線上的元件 playground。

4. React Belle

React Belle 是一套針對移動端和桌面端都有優化的 React 元件。它的樣式可以高度定製，因此你可以配置所有元件通用的基礎樣式，也可以在每個元件中單獨修改樣式。這裡也有一個 不錯的例子。

5. React Grommet

React Grommet 提供了相當豐富的元件，這些元件按使用方式分類，所有的元件都是易用的、跨瀏覽器相容的、支援主題定製的。

6. React Components by Khan Academy

Khan Academy 的 React 元件 是以有行內 CSS 和註釋的元件庫的形式釋出的。單獨的元件也可以通過向 Bit 新增這個庫建立的 這個 Bit Scope 安裝。

7. Material Components Web

Material Components Web 是由 Google 的一個核心團隊的工程師和 UX 設計師開發的，它的元件支援可靠的開發工作流以構建美觀且實用的 Web 專案。它取代了 react-mdl（現在已經廢棄了），已經有接近 7k 的 stars 了。

8. Ant Design React

根據 Ant Design 的規範，React Ant Design 是一個包含了元件和 demo 的 React UI 庫。它是用 TypeScript 寫的，並有完整的型別定義，也提供了一個 npm + webpack + dva 的前端開發流程。

9. Semantic UI React

Semantic UI React 是 Semantic-UI-React 的官方整合庫。它有大概 5k 的 stars，並被 Netflix 和 Amazon 所採用，提供了有趣而靈活的“武器庫”。

10. Onsen UI

Onsen UI React Components 可以與 Onsen UI 的 React bindings 一起使用，並提供了使用 React 和 Onsen UI 框架的混合開發移動應用。它有 81 個貢獻者和超過 5.6k 的 stars，是個可以考慮的有意思的庫。

11. React Virtualized

React Virtualized 有大概 8k 的 stars，它提供了可以高效渲染長列表和扁平資料的 React 元件。

單獨的元件

每個單獨的元件都可以在 awesome-react 和 awesome-react-components 這兩個專案中找到。你也可以將 Bit 新增到任意一個倉庫或者庫來追蹤與隔離倉庫或者庫裡的元件。然後，這些元件可以很快地直接從倉庫中的任何路徑中匯出，開發者就可以使用 npm 或者 yarn 來安裝它們，並在任意的專案中進行修改。

似乎在 2018 年，React 的熱度會持續上升，並且 React 元件會逐漸成為更多日常使用的應用的組成模組。

如果發現譯文存在錯誤或其他需要改進的地方，歡迎到 掘金翻譯計劃 對譯文進行修改並 PR，也可獲得相應獎勵積分。文章開頭的 本文永久連結 即為本文在 GitHub 上的 MarkDown 連結。

---

掘金翻譯計劃 是一個翻譯優質網際網路技術文章的社群，文章來源為 掘金 上的英文分享文章。內容覆蓋 Android、iOS、前端、後端、區塊鏈、產品、設計、人工智慧等領域，想要檢視更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。