GitHub 上需要關注的 10 大頂級 React 庫

由Facebook建立的React已經成為一個非常強大的JavaScript框架，它能使的前端開發工作更容易。

如果你已工作於React.js一段時間了，那麼你會贊同若干其他的庫可以和React一起使用以獲得最佳體驗。

從經驗來看，使用開源專案對於開發人員來說意義重大，而GitHub上提供了大量基於React的庫，讓人不知該如何選擇。

儘管可以選擇多個選項，但是將範圍縮小到三兩個框架和庫也是極好的。因此，本文討論了GitHub上的十大react庫。所討論的庫按照其在各種程式碼倉庫中的星星數量排序。

話不多說，讓我們一起來看看吧。

1.

31 194
版本0.20.0
依賴性11

Material UI是透過使用React元件來實現Google材料設計的庫。它能讓Web開發、建立出色的使用者介面以及開發單頁面應用程式變得容易起來。

將Material UI用於伺服器渲染時，開發人員必須為伺服器和客戶端使用相同的環境。

Material UI可以使用npm命令進行安裝：

npm install material-ui

你可以從和了解更多資訊。

檢視示例——由@abottega製作的。

2.Ant Design

20 995
版本3.0.1
依賴性42

Ant Design是一個基於React的庫，用於為react應用程式新增可愛的設計。它專為設計桌面應用程式和提供令人愉快的開發體驗而建立，以帶來更好的使用者體驗。

雖然，這是一個來自中國的庫。但是，志願者已經正確地翻譯了語言，這使得講英語的開發者也可以很容易使用它。

你可以使用npm命令輕鬆安裝Ant Design：

npm install antd

Ant Design是一個非常流行的庫，所以你可以從或上找到很多資訊。

請參閱CodePen上由Dash Bouquet（@dashbouquetdevelopment）製作的。

3.Storybook

16,559
版本1.0.0
依賴性12

藉助Meteor和Firebase等框架可以使得後端開發更加容易。而React Storybook是為前端開發人員建立的效果相同的庫。

透過提供它自己的UI開發環境，React Storybook允許你在應用程式之外構建和設計React應用程式的UI元件，這使得開發團隊中的其他人員可以更輕鬆地在他們自己的專案中使用UI元件。

你可以使用npm命令輕鬆安裝React Storybook：

npm i -g @storybook/cli 

cd my-react-app 

getstorybook

安裝完成後，可以使用以下命令執行React Storybook：

npm run storybook

你可以從以及中找到有關這個庫的更多資訊。

4.Gatsby

15,712
版本1.9.130
依賴性51

Gatsby是一個建立在React.js框架之上的快速靜態站點生成器。使用Gatsby，你可以將純文字轉換成超棒的網站，而無需花費大量的時間在程式碼上。

很多網站已經開始使用靜態網站生成器來建設高質量的網站。使用Gatsby，生成的網站以後可以很容易地維護，並且允許更容易擴充套件web功能。

如果你作為開發人員已經花了充足的時間工作於React框架，那麼與Gatsby合作會創造更好的開發體驗。

你可以使用npm命令輕鬆安裝Gatsby：

npm install gatsby

它還附帶了一個命令列工具，可以使用以下方法進行安裝：

npm install --global gatsby-cli

更多關於這個庫的資訊可以在它的和上找到。

5.Enzyme

11,846
版本3.2.0
依賴性11

Enzyme是一個基於React而構建的輕量級測試庫，可以作為用於React的JavaScript測試實用程式。這也使得斷言、操縱和遍歷React元件輸出的任務變得更容易。

它透過模仿jQuery的API進行DOM操作和遍歷（例如查詢、模擬等），併為不同型別的呈現（如shallow、mount和static）提供選項。

其他測試庫如Mocha、Expect、Chai和Jasmine可以與Enzyme一起使用，而沒有任何副作用。

Enzyme很容易使用和安裝：

npm install enzyme

更多關於這個偉大的庫的資訊可以在其和上找到。

6.Blueprint

7,762
版本1.34.0

Blueprint是一個基於UI的web React工具包。它在為桌面應用程式構建複雜的Web介面和鼓勵程式碼的可重用性方面非常高效。

這個庫主要是為桌面應用程式構建的，但是，也可以用於為移動應用程式新增功能。它非常靈活，因此可以和其他JavaScript框架，例如Angular，Vue.js等等一起使用。

Blueprint可以與CSS、TypeScript和JavaScript一起使用。

我們可以使用npm命令輕鬆安裝Blueprint：

npm install blueprint

從和檢視更多資訊。

7.Spectacle

5,693
版本4.0.4
依賴性16

Spectacle是一個基於React的庫，用於為Web演示建立優質和動態的幻燈片。你可以使用React元件非常輕鬆地進行演示。

使用Spectacle建立簡報非常容易，因為它帶有像和

這樣開箱即用的元件，可以讓大量UI的實現變得非常令人愉快。

Spectacle可以使用以下命令安裝：

npm install spectacle

這個庫還具有一定的靈活性，因此你可以決定編寫你自己的構建配置，或使用樣板配置為Web演示提供一個很好的外觀。

有關這個庫的更多資訊可以在和上看到。

寫入deck的main.js檔案是/presentation/index.js。看個例子——如何用Spectacle建立簡報。

// index.jsimport React, { Component } from 'react';import {
  Appear, BlockQuote, Cite, CodePane, Code, Deck, Fill, Fit,
  Heading, Image, Layout, ListItem, List, Quote, Spectacle, Slide, Text
} from 'spectacle';export default class extends Component {
  render() {    return (      
        
          
            Hello
          
        
      
    );
  }
}

8.Elemental UI

3,848
版本0.6.1
依賴性2

Elemental UI是一個非常靈活和高效的UI框架，用於構建設計超讚的web應用程式。

這個框架與Material UI框架非常相似，但是更輕巧。這是一個靈活和美麗的React 。它被設計為從npm安裝，並透過Browserify或Webpack構建到你的專案中。

你可以使用以下命令輕鬆安裝Elemental UI：

npm install elemental

來自和的更多資訊。

9.Grommet

2,651
版本2.0.0-alpha.5
依賴性8

Grommet是一個基於React的庫，用於改善web使用者的體驗。據說，這是“用於企業app最高階的UX框架”。

Grommet是一個非常靈活的庫，它具有用於Dashboards、Login、Search、Meters等的大型元件。透過屬性配置增強了這種靈活性。

藉助Grommet附帶的開箱即用元件，你可以建立引人入勝和可重複使用的使用者介面元素，為使用者提供在使用Web應用程式時的絕佳體驗。

Grommet元件是可訪問和跨瀏覽器相容的，也支援主題定製。

可以使用npm來安裝Grommet：

npm install -g grommet

來自和官方網站的更多資訊。

啟動的最快捷方式是訪問頁面。

在CodePen上檢視由Grommet UX（@grommet）製作的Pen 。

10.Mozaik

2,294
版本1.4.4
依賴性31

Mozaik是一個偉大的庫，用於為web應用程式建立可愛的儀表板。

它自帶很棒的自定義選項，因為它提供了一個響應式的佈局。這意味著它可以在所有平臺上執行，無論是在大螢幕上還是在智慧手機上。

Mozaik有很多主題可供開發人員用來建立個性化主題。它允許網格定位，最佳化的後端通訊，並且還可以在需要時使用多個儀表板。

來自和的更多資訊。

總結

好了，10個頂尖的React庫到這裡就完結了。上面討論的庫在執行任務時非常高效。這些庫可用於：

• 設計出色的使用者介面。

• 創造迷人的使用者體驗。

• 測試JavaScript和React程式碼。

• 生成靜態網站。

這些庫中的每一個都利用了React.js框架的特性和元件，為開發過程提供了更輕鬆的體驗。

譯文連結：
英文原文：
翻譯作者： – 小峰
[ 轉載必須在正文中標註並保留原文連結、譯文連結和譯者等資訊。]