由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命令進行安裝：
|
1 |
npm install material-ui |
你可以從GitHub程式碼倉庫和官方網站瞭解更多資訊。
檢視示例——由@abottega製作的Material UI風格動畫核取方塊。
2.Ant Design
20 995★
版本3.0.1
依賴性42
Ant Design是一個基於React的庫，用於為react應用程式新增可愛的設計。它專為設計桌面應用程式和提供令人愉快的開發體驗而建立，以帶來更好的使用者體驗。
雖然，這是一個來自中國的庫。但是，志願者已經正確地翻譯了語言，這使得講英語的開發者也可以很容易使用它。
你可以使用npm命令輕鬆安裝Ant Design：
|
1 |
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：
|
1 2 3 4 5 |
npm i -g @storybook/cli cd my-react-app getstorybook |
安裝完成後，可以使用以下命令執行React Storybook：
|
1 |
npm run storybook |
你可以從官方網站以及官方GitHub程式碼倉庫中找到有關這個庫的更多資訊。
4.Gatsby
15,712★
版本1.9.130
依賴性51
Gatsby是一個建立在React.js框架之上的快速靜態站點生成器。使用Gatsby，你可以將純文字轉換成超棒的網站，而無需花費大量的時間在程式碼上。
很多網站已經開始使用靜態網站生成器來建設高質量的網站。使用Gatsby，生成的網站以後可以很容易地維護，並且允許更容易擴充套件web功能。
如果你作為開發人員已經花了充足的時間工作於React框架，那麼與Gatsby合作會創造更好的開發體驗。
你可以使用npm命令輕鬆安裝Gatsby：
|
1 |
npm install gatsby |
它還附帶了一個命令列工具，可以使用以下方法進行安裝：
|
1 |
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很容易使用和安裝：
|
1 |
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：
|
1 |
npm install blueprint |
從GitHub程式碼倉庫和官方網站檢視更多資訊。
7.Spectacle
5,693★
版本4.0.4
依賴性16
Spectacle是一個基於React的庫，用於為Web演示建立優質和動態的幻燈片。你可以使用React元件非常輕鬆地進行演示。
使用Spectacle建立簡報非常容易，因為它帶有像<slide>和<blockquote>這樣開箱即用的元件，可以讓大量UI的實現變得非常令人愉快。
Spectacle可以使用以下命令安裝：
|
1 |
npm install spectacle |
這個庫還具有一定的靈活性，因此你可以決定編寫你自己的構建配置，或使用樣板配置為Web演示提供一個很好的外觀。
有關這個庫的更多資訊可以在GitHub程式碼倉庫和官方網站上看到。
寫入deck的main.js檔案是/presentation/index.js。看個例子——如何用Spectacle建立簡報。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
// 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：
|
1 |
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：
|
1 |
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框架的特性和元件，為開發過程提供了更輕鬆的體驗。