(翻譯自 medium :Top 10 React Libraries on GitHub 原文地址)
由Facebook建立的 React 已經成為一個十分強大的 Javascript 框架,它使得前端開發者的開發工作更加容易。如果你曾經用 React 開發過一些應用,你也會贊同開發 React 應用需要配合一些其他的庫一起使用,才能獲得最好的開發體驗。
從經驗來看,使用開源專案對開發者來說意義重大,而且 Github 上有大量的與 React JS 有關的開源庫,這使得我們在開發 React 應用的時候有充分的選擇。儘管有大批可用的庫,對於我們來說如果能篩選出一些最佳的那也是極好的。So, 這篇文章致力於介紹10個最好用的 react 相關庫(按 github 上 stars 數從大到小排名),言不贅述,讓我們直接開始吧。
MATERIAL UI
31,194 ★
Version 0.20.0
Dependencies 11
Material UI 是一個基於谷歌的 Materail 設計模式實現的 React UI 元件庫。它使得開發出色的單頁web應用(SAP)更加容易。
如果在服務端渲染使用 Material-UI ,開發者必須在服務端和客戶端使用相同的開發環境。
使用 npm 命令安裝:
npm install material-ui複製程式碼
Demo演示地址:www.material-ui.com/#/component…
ANT-DESIGN
20,995 ★
Version 3.0.1
Dependencies 42
Ant-Design 是由阿里巴巴螞蟻金服團隊開發的基於 React 的元件庫,使用它可以建立生動漂亮的 react 應用,開發體驗也十分愉悅,而且開發出的應用使用者體驗也十分棒。
使用 npm 命令安裝:
npm install antd複製程式碼
Demo演示地址:antd-admin.zuiidea.com/login?from=…
SOTRYBOOK
16,559 ★
Version 1.0.1
Dependencies 12
通過使用像 Meteor 、 Firebase這樣的框架,後端開發變得越來越簡單。 React Storybook 這個庫為前端人員也提供了類似的便捷。
React Storybook 通過提供一個獨立的UI 開發環境,讓你可以在應用程式之外為你的 react 應用建立和設計UI 元件。這樣也使得開發團隊中的其他人更容易在自己的專案中複用 UI 元件。
使用 npm 命令安裝:
npm install -g @storybook/cli
cd my-react-appgetstorybook複製程式碼
安裝後,通過使用以下命令執行 React Storybook:
npm run storybook複製程式碼
GATSBY
15,712 ★
Version 1.9.130
Dependencies 51
Gatsby 是一個基於 React JS 快速搭建靜態網站的庫。通過使用 Gatsby, 你可以不用花太多時間在編碼上就能把普通的文字轉化為精美的網站。
現在已經有很多使用靜態網站生成器來搭建高質量的網站了。使用 Gatsby 生成的網站可以更易於維護和擴充套件。
如果你作為開發者已經對 React 框架很熟悉了,那麼結合 Gatsby 你開啟發體驗將會更好。
使用 npm 命令安裝:
npm install gatsby複製程式碼
你也可以使用命令列的腳手架:
npm install --global gatsby-cli複製程式碼
ENZYME
11,846 ★
Version 3.2.0
Dependencies 11
Enzyme是 Airbnb開發的一個基於React構建的輕量級測試庫,可以作為React的JavaScript測試工具。這也使得斷言,操縱和遍歷React元件輸出的任務變得非常容易。
它通過模仿jQuery的API進行DOM操作和遍歷(如查詢,模擬等),併為不同型別的渲染(如shallow, mount 和 static)提供選項。
其他測試庫如 Mocha, Expect, Chai, Jasmine 和 Enzyme一起使用,也不會產生衝突。
Enzyme 非常容易上手,安裝命令:
npm install enzyme
假設我們有兩個元件 ToDoItem 和 ToDoList,我們可以這樣測試:具體內容參考:示例
BLUEPRINT
7,762 ★
Version 1.34.0
Blueprint是一個基於react 的 UI元件庫,對於使用優秀程式碼構建複雜的Web介面以及可重用性的元件非常有效。
該庫主要是為PC端網頁構建的,但是,未來也會支援移動端。 它非常靈活的,因為它可以與其他JavaScript框架,如AngularJS,VueJS等一起使用
Blueprint既可以用於CSS,TypesScript也可以用於JavaScript。
使用npm命令安裝:
npm install blueprint複製程式碼
SPECTACLE
5,693 ★
Version 4.0.4
Dependencies 16
Spectacle 是一個基於 React 的庫,用於建立高質量動態的網頁演示幻燈片。你可以通過使用 React 元件來輕鬆進行演示。
使用這個庫建立簡報特別容易,因為它擁有像 <Slide> 、<BlockQuote> 這樣的開箱即用的元件。這將使得你在建立大量UI的簡報的時候變得非常愉悅。
這個庫很靈活,你可以編寫你的構建配置或者是使用官方提供的模板來讓你的Web演示更好的呈現。
使用 npm 命令安裝,然後自己配置你的演示:
npm install spectacle複製程式碼
或者使用模板:
$ git clone git@github.com:FormidableLabs/spectacle-boilerplate.git my-spectacle-demo$
cd my-spectacle-demo$
rm -fr .git複製程式碼
ELEMENTAL UI
3,848 ★
Version 0.6.1
Dependencies 2
Elemental UI 是一個非常靈活高效的 UI 框架,使用它可以快速構建設計出色的 Web 應用。
這個框架與 Materail UI 非常相似,但是 Elemental UI 更輕量級。它是一個靈活且CSS樣式漂亮的 React 庫。使用npm安裝,並通過 Browserify 或 Webpack構建到你的專案中。
使用 npm 輕鬆安裝:
npm install elemental複製程式碼
GROMMET
2,621 ★
Version 2.0.0-alpha.5
Dependencies 8
Grommet 是一個用於提升Web使用者體驗的 react 庫。用他們自己的話說:這是“企業級應用程式最先進的使用者體驗框架”。它是一個非常靈活的庫,它有用於 Dashboards, Login, Search, Meters 等大型元件。通過配置屬性來增強它的靈活性。
藉助Grommet附帶的開箱即用元件,你可以建立讓人驚歎的,可複用的使用者介面元素,為使用者提供在使用Web應用程式時的絕佳體驗。
Grommet 元件具有可訪問、跨瀏覽器相容、 主題定製等特性。
使用 npm 安裝:
npm install -g grommet複製程式碼
MOZAIK
2,284 ★
Version 1.4.4
Dependencies 31
Mozaik是一個基於 nodejs / react / d3 / stylus的很棒的工具庫,它可以為web應用程式建立生動的的dashboards。
它提供了很好的自定義選項,同時它可以進行響應式佈局。這意味著它可以在所有平臺上執行,無論是在大螢幕、PC端上還是在移動裝置上。
Mozaik有很多主題可供開發人員用來建立個性化應用。它允許柵格佈局,優化的後端通訊,並且還可以在需要時使用多個dashboards。
總結
使用上面的這些庫會讓你的開發更有效率,這些庫可用於:
- 設計出色的使用者互動介面
- 構建吸引人的使用者互動體驗
- 對JS 和 React 程式碼進行測試
- 生成靜態網頁
這些庫都用到了 React 的特性和元件特徵,讓你的開發變得更簡單有效。
原文作者:Anton Shaleynikov