[[315802]]

【51CTO.com快譯】朋友，您是否曾經(jīng)使用過React.js或React Native來創(chuàng)建用戶界面?它們都是用于開發(fā)用戶界面(UI)的流行開源平臺。Facebook于2011年將React.js作為JavaScript的庫進行開發(fā)，以滿足跨平臺、動態(tài)且高性能的UI需求。而Facebook在2015年發(fā)布的React Native，可用于通過JavaScript來構建原生的應用程序。2019年，在StackOverflow針對開發(fā)人員的調(diào)查中，React.js和React Native在可用性和被關注度方面均排名靠前。

本文將和您討論十三種優(yōu)秀的React JavaScript框架，以方便您在實際項目中靈活選用。其中前十一個(如React)具有MIT的許可授權，而后兩個則持有Apache 2.0的授權。

1.Create React App

作為每個React Native項目的必備功能，Create React App是由Facebook開發(fā)人員提供的命令行界面框架。它不但易用，并且免去了手動設置和應用配置，因此節(jié)省了用戶的大量時間和精力。

您可以使用Create React App來構建目錄和文件。同時，該框架還提供了用于構建，測試和啟動應用程序的工具。如下所示，您只需一個簡單的命令，便可以輕松地創(chuàng)建React的原生項目。

為何選擇Create React App

• 提供可用于開發(fā)的一流的工具集，包括：配置包、編譯器和測試運行程序。
• 應用程序結構中沒有配置，也沒有多余的文件。
• 固定的開發(fā)棧(請參見：https://dzone.com/articles/why-full-stack-development-is-too-good-for-you-in)。
• 高效且快速的開發(fā)工具。

2. Material Kit React

源于Google Material Design系統(tǒng)的Material Kit React是構建React UI組件的絕佳選擇。該框架庫提供了多種組件的組合，以及超過1000個完全編碼的組件。每一個組件都有著單獨的一層。它們分布在不同的文件夾中，以提供成千上萬種選擇。另外，Material Kit React的示例頁面還會給您提供各種設計靈感，并能與人分享概念。

安裝Material Kit

$ npm install @material-ui/core 

應用

優(yōu)勢

• Material-UI組件在運行時，既無需要任何其他的設置，又不會“污染”全局范圍的環(huán)境。
• 該React組件支持更輕松、更快速的Web開發(fā)方式。有了它，您既可以自行構建設計系統(tǒng)，也可以從Material Design入手。

3. Shards React

這種現(xiàn)代化的React UI套件能夠提供快速的性能。您可以從零開始，按照自己所需的方式去定義與構建系統(tǒng)。您甚至可以下載源文件，并在代碼級別自定義內(nèi)容。此外，Shards React提供的SCSS語法可通過樣式來增強用戶的開發(fā)體驗。

顧名思義，基于Shards的Shards React用到了React Datepicker、React Popper(定位引擎)和noUISlider。除了支持各種酷炫的Material Design圖標，它的一些預制版本還能夠幫助您更容易地上手該框架，并有助于獲得其他設計靈感。

用Yarn或NPM安裝Shards 

# Yarn yarn add shards-react 
# NPM npm i shards-react 

優(yōu)勢

• 輕量級的Shards，被壓縮后只有13kb。
• 默認情況下，Shards能夠通過重排布局，來適應任​​何一種屏幕尺寸。
• Shards通過全面的文檔，方便您盡快地開始構建自己的界面。

4. Styled Components

這款高效的CSS工具可以針對應用程序的可視化界面，構建出小型的、且可以重用的組件。使用傳統(tǒng)的CSS，您可能會意外地覆蓋掉目標網(wǎng)站上其他位置所使用到的selectors。但是Styled Components可以通過直接在組件內(nèi)部使用CSS語法，來幫助您完全避免此類問題的發(fā)生。

安裝

npm install --save styled-components 

應用

優(yōu)勢

• 能夠使得組件更具有可讀性。
• 其樣式依賴于JavaScript。
• 使用CSS來構建自定義的組件。
• 能夠內(nèi)聯(lián)樣式。
• 只需調(diào)用styled()，即可將對應的組件(甚至是自定義的組件)轉(zhuǎn)換為樣式化的組件。

5. Redux

Redux是一種JavaScript應用的狀態(tài)管理解決方案。雖然它主要適用于React.js，但是您也可以將其用在其他類似React的框架中。

安裝 

sudo npm install redux sudo npm install react-redux 

應用

優(yōu)勢

• 可預測的狀態(tài)更新，有助于定義應用的數(shù)據(jù)流。
• 通過reducer功能，用戶在邏輯上更易于進行測試和time-travel式的調(diào)試。
• 有利于狀態(tài)的中心化。

6. React Virtualized

該React Native的JS框架適合于大型列表和表格數(shù)據(jù)的呈現(xiàn)。使用React Virtualized，您可以通過限制各種請求的數(shù)量，以及文檔對象模型(DOM)的元素，來提高React應用程序的整體性能。

安裝

npm install react-virtualized 

應用

優(yōu)勢

• 能夠有效地顯示大量的數(shù)據(jù)。
• 能夠呈現(xiàn)巨大的數(shù)據(jù)集。
• 可以使用整套組件，來實現(xiàn)虛擬化渲染。

7. React DnD

React DnD主要負責創(chuàng)建復雜的拖放界面。它能夠從數(shù)十種拖放庫中脫穎而出的原因是：它構建在基于HTML5的拖放API之上，從而使得創(chuàng)建接口的過程更加容易。

安裝

npm install react-dnd-preview 

應用

優(yōu)勢

• 能夠?qū)崿F(xiàn)項目之間流暢的拖曳與移動。
• 具有強大的鍵盤和屏幕讀取和識別能力。
• 具有卓越的性能。
• 提供簡潔而功能強大的API。
• 在標準的瀏覽器上，具有出色的交互能力。
• 提供未經(jīng)修飾的樣式。
• 無需創(chuàng)建其他的wrapper dom節(jié)點。

8. React Bootstrap

該UI工具庫使用React替換了Bootstrap的JavaScript，以方面用戶能夠更好地控制每一個組件的功能。由于每個組件都能夠在構建時輕松地被訪問到，因此React Bootstrap能夠協(xié)助前端框架的構建，并自帶有上萬個bootstrap主題可供選擇。

安裝 

npm install react-bootstrap bootstrap 

應用

優(yōu)勢

• 可以輕松地導入各種所需的代碼與組件。
• 可以壓縮Bootstrap，以減少各種輸入錯誤和潛在沖突。
• 非常易用。
• 可以被封裝在各種元素中。

9. React Suite

React Suite是另一種高效的React.js框架。它包含了可用于企業(yè)級系統(tǒng)產(chǎn)品的各種組件庫。由于能夠支持所有主流的瀏覽器和平臺，因此React Suite幾乎適用并支持任何系統(tǒng)的服務器端渲染。

安裝

npm i rsuite --save 

應用

優(yōu)勢

• l通過全局訪問功能，來輕松地管理應用程序。
• Redux庫集成了各種狀態(tài)管理。
• Redux具有所有UI層的靈活性，并且具有龐大的生態(tài)系統(tǒng)。
• 在降低復雜性的同時，Redux提供了全局的可訪問性。

10. PrimeReact

PrimeReact的主要特點是：它所提供的組件幾乎能夠滿足UI的所有基本要求，其中包括：輸入選項、菜單、數(shù)據(jù)表示、以及消息等。同時，該框架還考慮到了移動應用方面的體驗，能夠幫助用戶設計出易于觸控的各種元素。

安裝

npm install primereact --save npm install primeicons --save 

應用

優(yōu)勢

• 不但簡單實用，而且性能優(yōu)秀。
• 使用方便。
• 支持Spring類應用。
• 可以創(chuàng)建豐富的用戶界面。

11. React Router

由于容易上手，因此React Router在React Native開發(fā)人員社區(qū)中非常流行。您只需要在PC上安裝了Git和npm軟件包管理器，便可開始相關基本知識的學習。

安裝

$ npm install --save react-router 

應用

優(yōu)勢

• 具有動態(tài)路由匹配功能。
• 在導航時，能夠在視圖上提供CSS過渡。
• 能夠標準化的應用程序的結構和行為。

12. Grommet

Grommet可用于創(chuàng)建帶有互動響應的移動類Web應用。作為獲得了Apache 2.0許可的JavaScript框架，它在一個體積不大的程序包中提供了可訪問性、模塊化、響應性、以及各種主題。目前，它被Netflix、GE、Uber和Boeing等公司廣泛使用著。

yarn和npm的安裝 

$ npm install grommet styled-components --save 

應用

優(yōu)勢

• 提供一整套打包好的工具集。
• 提供開放的策略。
• 可對現(xiàn)有應用進行重組。

13. Onsen UI

Onsen UI是另一種使用HTML5和JavaScript來進行移動應用開發(fā)的框架。它不但提供了與Angular、Vue和React的集成，還獲得了Apache 2.0的許可。

Onsen能夠提供選項卡、側邊菜單、棧導航、以及其他組件。該框架的亮點是：它的所有組件都具有針對iOS和Android的Material Design自動樣式支持。因此它能夠根據(jù)不同的目標平臺，來改變應用程序的外觀。

安裝

npm install onsenui 

應用

優(yōu)勢

• Onsen UI是免費且開源的。
• 它不會強制要求應用開發(fā)使用任何類型的DRM。
• 能夠編譯JavaScript和HTML5代碼。
• 可以為最終用戶提供原生的應用體驗。

原文標題：13 of the Best React JavaScript Frameworks，作者：Amit Dua

【51CTO譯稿，合作站點轉(zhuǎn)載請注明原文譯者和出處為51CTO.com】