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