源 | 碼農網 文 | Anton Shaleynikov 譯 | 小峯
由Facebook創建的React已經成爲一個非常強大的JavaScript框架，它能使程序員的前端開發工作更容易。
如果你已工作於React.js一段時間了，那麼你會贊同若干其他的庫可以和React一起使用以獲得最佳體驗。
從經驗來看，使用開源項目對於開發人員來說意義重大，而GitHub上提供了大量基於React的庫，讓人不知該如何選擇。
儘管可以選擇多個選項，但是將範圍縮小到三兩個框架和庫也是極好的。因此，本文討論了GitHub上的十大react庫。所討論的庫按照其在各種代碼倉庫中的星星數量排序。
話不多說，讓我們一起來看看吧。
1.Material UI
31 194★
版本0.20.0
依賴性11
Material UI是通過使用React組件來實現Google材料設計的庫。它能讓Web開發、創建出色的用戶界面以及開發單頁面應用程序變得容易起來。
將Material UI用於服務器渲染時，開發人員必須爲服務器和客戶端使用相同的環境。
Material UI可以使用npm命令進行安裝：
npm install material-ui
你可以從GitHub代碼倉庫和官方網站了解更多信息。
查看示例——由@abottega製作的Material UI風格動畫複選框。
2.Ant Design
20 995★
版本3.0.1
依賴性42
Ant Design是一個基於React的庫，用於爲react應用程序添加可愛的設計。它專爲設計桌面應用程序和提供令人愉快的開發體驗而創建，以帶來更好的用戶體驗。
雖然，這是一個來自中國的庫。但是，志願者已經正確地翻譯了語言，這使得講英語的開發者也可以很容易使用它。
你可以使用npm命令輕鬆安裝Ant Design：
npm install antd
Ant Design是一個非常流行的庫，所以你可以從GitHub代碼倉庫或官方網站上找到很多信息。
請參閱CodePen上由Dash Bouquet（@dashbouquetdevelopment）製作的Pen Ant-design。
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
你可以從官方網站以及官方GitHub代碼倉庫中找到有關這個庫的更多信息。
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
更多關於這個庫的信息可以在它的GitHub代碼倉庫和官方網站上找到。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
更多關於這個偉大的庫的信息可以在其GitHub代碼倉庫和官方網站上找到。
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
從GitHub代碼倉庫和官方網站查看更多信息。
7.Spectacle
5,693★
版本4.0.4
依賴性16
Spectacle是一個基於React的庫，用於爲Web演示創建優質和動態的幻燈片。你可以使用React組件非常輕鬆地進行演示。
使用Spectacle創建演示文稿非常容易，因爲它帶有像<slide>和<blockquote>這樣開箱即用的組件，可以讓大量UI的實現變得非常令人愉快。
Spectacle可以使用以下命令安裝：
npm install spectacle
這個庫還具有一定的靈活性，因此你可以決定編寫你自己的構建配置，或使用樣板配置爲Web演示提供一個很好的外觀。
有關這個庫的更多信息可以在GitHub代碼倉庫和官方網站上看到。
寫入deck的main.js文件是/presentation/index.js。看個例子——如何用Spectacle創建演示文稿。
// index.js
import 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 (
<Spectacle>
<Deck>
<Slide>
<Text>Hello</Text>
</Slide>
</Deck>
</Spectacle>
);
}
}
8.Elemental UI
3,848★
版本0.6.1
依賴性2
Elemental UI是一個非常靈活和高效的UI框架，用於構建設計超讚的web應用程序。
這個框架與Material UI框架非常相似，但是更輕巧。這是一個靈活和美麗的React CSS UI框架。它被設計爲從npm安裝，並通過Browserify或Webpack構建到你的項目中。
你可以使用以下命令輕鬆安裝Elemental UI：
npm install elemental
來自GitHub代碼倉庫和官方網站的更多信息。
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
來自GitHub代碼倉庫和官方網站的更多信息。
啓動的最快捷方式是訪問Hello World頁面。
在CodePen上查看由Grommet UX（@grommet）製作的Pen Hello World。
10.Mozaik
2,294★
版本1.4.4
依賴性31
Mozaik是一個偉大的庫，用於爲web應用程序創建可愛的儀表板。
它自帶很棒的自定義選項，因爲它提供了一個響應式的佈局。這意味着它可以在所有平臺上運行，無論是在大屏幕上還是在智能手機上。
Mozaik有很多主題可供開發人員用來創建個性化主題。它允許網格定位，優化的後端通信，並且還可以在需要時使用多個儀表板。
來自GitHub代碼倉庫和官方網站的更多信息。
總結
好了，10個頂尖的React庫到這裏就完結了。上面討論的庫在執行任務時非常高效。這些庫可用於：
設計出色的用戶界面。
創造迷人的用戶體驗。
測試JavaScript和React代碼。
生成靜態網站。
這些庫中的每一個都利用了React.js框架的特性和組件，爲開發過程提供了更輕鬆的體驗。
-END-
轉載聲明：本文轉載自「前端開發」，搜索「qianduan1024」即可關注。
歡迎關注小象公衆號：AIReport 獲取更多資訊