值得選用的十三種優秀React JS框架
譯文【51CTO.com快譯】朋友，您是否曾經使用過React.js或React Native來創建用戶界面?它們都是用于開發用戶界面(UI)的流行開源平臺。Facebook于2011年將React.js作為JavaScript的庫進行開發，以滿足跨平臺、動態且高性能的UI需求。而Facebook在2015年發布的React Native，可用于通過JavaScript來構建原生的應用程序。2019年，在StackOverflow針對開發人員的調查中，React.js和React Native在可用性和被關注度方面均排名靠前。
本文將和您討論十三種優秀的React JavaScript框架，以方便您在實際項目中靈活選用。其中前十一個(如React)具有MIT的許可授權，而后兩個則持有Apache 2.0的授權。
作為每個React Native項目的必備功能，Create React App是由Facebook開發人員提供的命令行界面框架。它不但易用，并且免去了手動設置和應用配置，因此節省了用戶的大量時間和精力。
您可以使用Create React App來構建目錄和文件。同時，該框架還提供了用于構建，測試和啟動應用程序的工具。如下所示，您只需一個簡單的命令，便可以輕松地創建React的原生項目。
為何選擇Create React App
- 提供可用于開發的一流的工具集，包括：配置包、編譯器和測試運行程序。
- 應用程序結構中沒有配置，也沒有多余的文件。
- 固定的開發棧(請參見：https://dzone.com/articles/why-full-stack-development-is-too-good-for-you-in)。
- 高效且快速的開發工具。
源于Google Material Design系統的Material Kit React是構建React UI組件的絕佳選擇。該框架庫提供了多種組件的組合，以及超過1000個完全編碼的組件。每一個組件都有著單獨的一層。它們分布在不同的文件夾中，以提供成千上萬種選擇。另外，Material Kit React的示例頁面還會給您提供各種設計靈感，并能與人分享概念。
安裝Material Kit
- $ npm install @material-ui/core
應用
優勢
- Material-UI組件在運行時，既無需要任何其他的設置，又不會“污染”全局范圍的環境。
- 該React組件支持更輕松、更快速的Web開發方式。有了它，您既可以自行構建設計系統，也可以從Material Design入手。
3. Shards React
這種現代化的React UI套件能夠提供快速的性能。您可以從零開始，按照自己所需的方式去定義與構建系統。您甚至可以下載源文件，并在代碼級別自定義內容。此外，Shards React提供的SCSS語法可通過樣式來增強用戶的開發體驗。
顧名思義，基于Shards的Shards React用到了React Datepicker、React Popper(定位引擎)和noUISlider。除了支持各種酷炫的Material Design圖標，它的一些預制版本還能夠幫助您更容易地上手該框架，并有助于獲得其他設計靈感。
用Yarn或NPM安裝Shards
- # Yarn yarn add shards-react
- # NPM npm i shards-react
優勢
- 輕量級的Shards，被壓縮后只有13kb。
- 默認情況下，Shards能夠通過重排布局，來適應任何一種屏幕尺寸。
- Shards通過全面的文檔，方便您盡快地開始構建自己的界面。
這款高效的CSS工具可以針對應用程序的可視化界面，構建出小型的、且可以重用的組件。使用傳統的CSS，您可能會意外地覆蓋掉目標網站上其他位置所使用到的selectors。但是Styled Components可以通過直接在組件內部使用CSS語法，來幫助您完全避免此類問題的發生。
安裝
- npm install --save styled-components
應用
優勢
- 能夠使得組件更具有可讀性。
- 其樣式依賴于JavaScript。
- 使用CSS來構建自定義的組件。
- 能夠內聯樣式。
- 只需調用styled()，即可將對應的組件(甚至是自定義的組件)轉換為樣式化的組件。
5. Redux
Redux是一種JavaScript應用的狀態管理解決方案。雖然它主要適用于React.js，但是您也可以將其用在其他類似React的框架中。
安裝
- sudo npm install redux sudo npm install react-redux
應用
優勢
- 可預測的狀態更新，有助于定義應用的數據流。
- 通過reducer功能，用戶在邏輯上更易于進行測試和time-travel式的調試。
- 有利于狀態的中心化。
該React Native的JS框架適合于大型列表和表格數據的呈現。使用React Virtualized，您可以通過限制各種請求的數量，以及文檔對象模型(DOM)的元素，來提高React應用程序的整體性能。
安裝
- npm install react-virtualized
應用
優勢
- 能夠有效地顯示大量的數據。
- 能夠呈現巨大的數據集。
- 可以使用整套組件，來實現虛擬化渲染。
7. React DnD
React DnD主要負責創建復雜的拖放界面。它能夠從數十種拖放庫中脫穎而出的原因是：它構建在基于HTML5的拖放API之上，從而使得創建接口的過程更加容易。
安裝
- npm install react-dnd-preview
應用
優勢
- 能夠實現項目之間流暢的拖曳與移動。
- 具有強大的鍵盤和屏幕讀取和識別能力。
- 具有卓越的性能。
- 提供簡潔而功能強大的API。
- 在標準的瀏覽器上，具有出色的交互能力。
- 提供未經修飾的樣式。
- 無需創建其他的wrapper dom節點。
該UI工具庫使用React替換了Bootstrap的JavaScript，以方面用戶能夠更好地控制每一個組件的功能。由于每個組件都能夠在構建時輕松地被訪問到，因此React Bootstrap能夠協助前端框架的構建，并自帶有上萬個bootstrap主題可供選擇。
安裝
- npm install react-bootstrap bootstrap
應用
優勢
- 可以輕松地導入各種所需的代碼與組件。
- 可以壓縮Bootstrap，以減少各種輸入錯誤和潛在沖突。
- 非常易用。
- 可以被封裝在各種元素中。
9. React Suite
React Suite是另一種高效的React.js框架。它包含了可用于企業級系統產品的各種組件庫。由于能夠支持所有主流的瀏覽器和平臺，因此React Suite幾乎適用并支持任何系統的服務器端渲染。
安裝
- npm i rsuite --save
應用
優勢
- l通過全局訪問功能，來輕松地管理應用程序。
- Redux庫集成了各種狀態管理。
- Redux具有所有UI層的靈活性，并且具有龐大的生態系統。
- 在降低復雜性的同時，Redux提供了全局的可訪問性。
10. PrimeReact
PrimeReact的主要特點是：它所提供的組件幾乎能夠滿足UI的所有基本要求，其中包括：輸入選項、菜單、數據表示、以及消息等。同時，該框架還考慮到了移動應用方面的體驗，能夠幫助用戶設計出易于觸控的各種元素。
安裝
- npm install primereact --save npm install primeicons --save
應用
優勢
- 不但簡單實用，而且性能優秀。
- 使用方便。
- 支持Spring類應用。
- 可以創建豐富的用戶界面。
11. React Router
由于容易上手，因此React Router在React Native開發人員社區中非常流行。您只需要在PC上安裝了Git和npm軟件包管理器，便可開始相關基本知識的學習。
安裝
- $ npm install --save react-router
應用
優勢
- 具有動態路由匹配功能。
- 在導航時，能夠在視圖上提供CSS過渡。
- 能夠標準化的應用程序的結構和行為。
12. Grommet
Grommet可用于創建帶有互動響應的移動類Web應用。作為獲得了Apache 2.0許可的JavaScript框架，它在一個體積不大的程序包中提供了可訪問性、模塊化、響應性、以及各種主題。目前，它被Netflix、GE、Uber和Boeing等公司廣泛使用著。
yarn和npm的安裝
- $ npm install grommet styled-components --save
應用
優勢
- 提供一整套打包好的工具集。
- 提供開放的策略。
- 可對現有應用進行重組。
13. Onsen UI
Onsen UI是另一種使用HTML5和JavaScript來進行移動應用開發的框架。它不但提供了與Angular、Vue和React的集成，還獲得了Apache 2.0的許可。
Onsen能夠提供選項卡、側邊菜單、棧導航、以及其他組件。該框架的亮點是：它的所有組件都具有針對iOS和Android的Material Design自動樣式支持。因此它能夠根據不同的目標平臺，來改變應用程序的外觀。
安裝
- npm install onsenui
應用
優勢
- Onsen UI是免費且開源的。
- 它不會強制要求應用開發使用任何類型的DRM。
- 能夠編譯JavaScript和HTML5代碼。
- 可以為最終用戶提供原生的應用體驗。
原文標題：13 of the Best React JavaScript Frameworks，作者：Amit Dua
【51CTO譯稿，合作站點轉載請注明原文譯者和出處為51CTO.com】
