13個精選的React JS框架

首頁>技術>Echa攻城獅2020-03-28 23:22

13個精選的React JS框架

如果你正在使用 React.js 或 React Native 建立使用者介面，可以試一試本文推薦的這些框架。

React.js 和 React Native 是流行的使用者介面（UI）開發平臺，且都是開源技術。在 StackOverflow 的 2019 年開發人員調查中，它們在期望度和使用率方面都有很高的排名。React.js 是 Facebook 在 2011 年作為一個 JavaScript 庫開發而成的，目的是滿足跨平臺、動態和高效能 UI 的需求；而 Facebook 在 2015 年釋出的 React Native 則是用來基於 JavaScript 構建原生應用程式的。

下面列舉了 13 個精選的 React JavaScript 框架，它們全都是開源的。前 11 個（就像 React 那樣）是根據 MIT 許可授權的，後兩個則是根據 Apache 2.0 授權。

1.Creat React App

這款由 Facebook 開發人員帶來的命令列介面是所有 React Native 專案的必備框架。因為 Create React App 易於使用，讓你省掉了手動設定和配置應用的麻煩，從而節省了大量時間和精力。

只需一條簡單的命令，一切就都準備就緒，你就能輕鬆建立 React Native 專案了。你可以用它來構建目錄和檔案，該框架還包括用於構建、測試和釋出應用程式的工具。

# Install package $ npm install -g create-react-native-web-app # Run create-react-native-web-app&nbsp;&lt;project-directory&gt;&nbsp;$ create-react-native-web-app myApp #&nbsp;cd&nbsp;into your&nbsp;&lt;project-directory&gt;&nbsp;$&nbsp;cd&nbsp;myApp # Run Web/Ios/Android development # Web $ npm run web # IOS (simulator) $ npm run ios # Android (connected device) $ npm run android

為什麼選擇 Create React App

帶有配置包、轉譯器和測試器的一流開發工具應用結構中沒有配置，也沒有多餘的檔案。穩固的開發棧。行之有效的快速開發工具。

github: https://github.com/facebook/create-react-app

2.Material Kit React

Material Kit React 受到了谷歌的 Material Design 系統啟發，是構建 React UI 元件的絕佳選擇。這個庫最大的優點是它提供了許多元件，這些元件可以組合在一起生成難以置信的效果。庫中有超過 1000 個完全編碼的元件，每個元件都有單獨的層，這些層都在資料夾中分門別類組織好了。這意味著你有著成千上萬種選擇。如果你想獲取靈感，或與某人分享想法或概念，也有幾個示例頁面可用。

安裝 Material Kit

$&nbsp;npm&nbsp;install @material-ui/core

實現

import&nbsp;React&nbsp;from&nbsp;&#39;react&#39;;&nbsp;import&nbsp;Button&nbsp;from&nbsp;&#39;@material-ui/core/Button&#39;;&nbsp;const&nbsp;App =&nbsp;()&nbsp;=&gt;&nbsp;(&nbsp;&lt;Button&nbsp;variant=&#34;contained&#34;&nbsp;color=&#34;primary&#34;&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;Hello World&nbsp;&lt;/Button&gt;&nbsp;);

Material-UI 元件無需任何額外設定即可工作，並且不會汙染全域性域。

優點

這款 React 元件可以支援更輕鬆、更快速的 Web 開發流程。有了它，你可以構建自己的設計系統，或者先從 Material Design 開始上手。

github: https://github.com/creativetimofficial/material-kit-react

3.Shards React

這款現代 React UI 套件是為了實現高效能而從零開始打造的。它有著現代化的設計系統，讓你可以按照需要的方式自定義事物。你甚至可以下載原始檔來在程式碼級別自定義內容。此外，用於樣式的 SCSS 語法可以提升開發體驗。

Shards React 是基於 Shards 的，並使用了 React Datepicker、React Popper（定位引擎）和 noUISlider。它還提供了非常棒的 Material Design 圖示。還有一些預製的版本可以幫助你獲得靈感和上手入門。

用 Yarn 或 NPM 安裝 Shards

#&nbsp;Yarn yarn add shards-react&nbsp;# NPM npm i shards-react

優點

Shards 是輕量化設計的，體積很小，gzip 壓縮最小化後只有大約 13kb。Shards 天生就是響應設計，所以其佈局可以適應任何螢幕尺寸，針對不同的顯示大小重排版內容。Shards 的文件很完善，因此你可以很快開始構建漂亮的介面。

github: https://github.com/DesignRevision/shards-react

4.Styled Components

這款高效的 CSS 工具可以幫助你構建用於應用可視介面的小巧、可重用的元件。使用傳統的 CSS 時，你可能會意外覆蓋網站上其他位置用到的選擇器，但是 Styled Components 可以直接在你的元件內部使用 CSS 語法，從而幫助你完全避免此類問題的困擾。

安裝

npm&nbsp;install&nbsp;--save styled-components

實現

const&nbsp;Button = styled.button` background: background_type; border-radius: radius_value; border: abc; color: name_of_color; Margin: margin_value; padding:&nbsp;value;

優點

使元件更具可讀性。元件的樣式依賴於 JavaScript。使用 CSS 構建自定義元件。內聯樣式。只需呼叫 styled()，即可將元件（甚至是自定義元件）轉換為樣式化元件。

github: https://github.com/styled-components/styled-components

5.Redux

Redux 是 JavaScript 應用程式的一個狀態管理解決方案。雖然它主要用於 React.js，但是你也可以將它用在其他類似 React 的框架上。

安裝

sudo npm&nbsp;install&nbsp;redux sudo npm&nbsp;install&nbsp;react-redux

實現

import&nbsp;{ createStore }&nbsp;from&nbsp;&#34;redux&#34;;&nbsp;import&nbsp;rotateReducer&nbsp;from&nbsp;&#34;reducers/rotateReducer&#34;;&nbsp;function&nbsp;configureStore(state = { rotating: value})&nbsp;{&nbsp;return&nbsp;createStore(rotateReducer,state); }&nbsp;export&nbsp;default&nbsp;configureStore;

優點

可預測的狀態更新有助於定義應用程式的資料流。有了 reducer 函式，邏輯更易於測試和時間旅行除錯。狀態集中管理。

github: https://github.com/reduxjs/redux

6.React Virtualized

這個 React Native JavaScript 框架可用於大列表和表格資料的渲染。使用 React Virtualized，你可以限制請求和文件物件模型（DOM）元素的數量，從而提升 React 應用程式的效能。

安裝

npm&nbsp;install&nbsp;react-virtualized

實現

import&nbsp;&#39;react-virtualized/styles.css&#39;&nbsp;import&nbsp;{ Column, Table }&nbsp;from&nbsp;&#39;react-virtualized&#39;&nbsp;import&nbsp;AutoSizer&nbsp;from&nbsp;&#39;react-virtualized/dist/commonjs/AutoSizer&#39;&nbsp;import&nbsp;List&nbsp;from&nbsp;&#39;react-virtualized/dist/commonjs/List&#39;&nbsp;{ alias: {&nbsp;&#39;react-virtualized/List&#39;:&nbsp;&#39;react-virtualized/dist/es/List&#39;, }, ...rest }

優點

高效顯示大量資料。渲染巨大的資料集。使用一組元件實現虛擬渲染。

github: https://github.com/bvaughn/react-virtualized

7.React DnD

ReactDnD 負責建立複雜的拖放介面。市面上的拖放庫有幾十種之多，但 React DnD 之所以能脫穎而出，是因為它構建在現代 HTML5 的拖放 API 之上，簡化了建立介面的過程。

安裝

npm&nbsp;install&nbsp;react-dnd-preview

實現

import&nbsp;Preview&nbsp;from&nbsp;&#39;react-dnd-preview&#39;;&nbsp;const&nbsp;generatePreview =&nbsp;({itemType, item, style}) =&gt;&nbsp;{&nbsp;return&nbsp;&lt;div&nbsp;class=&#34;item-list&#34;&nbsp;style={style}&gt;{itemType}&lt;/div&gt;; };&nbsp;class&nbsp;App&nbsp;extends&nbsp;React.Component&nbsp;{ ... render() {&nbsp;return&nbsp;(&nbsp;&lt;DndProvider&nbsp;backend={MyBackend}&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;ItemList&nbsp;/&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;Preview&nbsp;generator={generatePreview}&nbsp;/&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;// or&nbsp;&lt;Preview&gt;{generatePreview}&lt;/Preview&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/DndProvider&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;); } }

優點

元素拖動優雅自然。強大的鍵盤和螢幕閱讀器支援。效能出色。乾淨而強大的 API。在標準的瀏覽器互動中發揮出色。未經修飾的樣式。沒有建立額外的包裝器 dom 節點。

github: https://github.com/react-dnd/react-dnd/

8.React Bootstrap

這款 UI Kit 庫用 React 替換了 Bootstrap 的 JavaScript，讓你可以更好地控制每個元件的函式。因為每個元件都用易於訪問的方式構建，所以用 React Bootstrap 構建前端框架是很好用的。有成千上萬的引導主題可供選擇。

安裝

npm&nbsp;install&nbsp;react-bootstrap bootstrap

實現

import&nbsp;&#39;bootstrap/dist/css/bootstrap.min.css&#39;;&nbsp;import&nbsp;React&nbsp;from&nbsp;&#39;react&#39;;&nbsp;import&nbsp;ReactDOM&nbsp;from&nbsp;&#39;react-dom&#39;;&nbsp;import&nbsp;&#39;./index.css&#39;;&nbsp;import&nbsp;App&nbsp;from&nbsp;&#39;./App&#39;;&nbsp;import&nbsp;registerServiceWorker&nbsp;from&nbsp;&#39;./registerServiceWorker&#39;; ReactDOM.render(&lt;App /&gt;,&nbsp;document.getElementById(&#39;root&#39;)); registerServiceWorker();

優點

可以輕鬆匯入所需的程式碼 / 元件。通過壓縮 Bootstrap 來節省程式碼、減少錯誤。通過壓縮 Bootstrap 減少輸入工作和衝突。用起來很簡單。它封裝在元素中。

github: https://github.com/react-bootstrap/react-bootstrap

9.React Suite

React Suite 是又一款高效的 React.js 框架，其中包含用於企業系統產品的多種元件庫。它支援所有主流瀏覽器和平臺，使其適用於幾乎任何系統。它還支援服務端渲染。

安裝

npm i rsuite&nbsp;--save

實現

import&nbsp;{ Button }&nbsp;from&nbsp;&#39;rsuite&#39;;&nbsp;import&nbsp;&#39;rsuite/styles/less/index.less&#39;; ReactDOM.render(&lt;Button&gt;Button&lt;/Button&gt;, mountNode);

優點

藉助全域性訪問功能，輕鬆管理應用程式。Redux 庫集中了狀態管理操作。Redux 很靈活，它有所有的 UI 層，並有著龐大的生態系統。Redux 降低了複雜性，並提供了全域性可訪問性。

github: https://github.com/rsuite/rsuite

10.PrimeReact

PrimeReact 的最大優勢在於，它提供的元件幾乎可以滿足 UI 的所有基本要求，例如輸入選項、選單、資料表示和訊息等。這款框架還非常重視移動體驗，可以幫助你設計為觸控優化的元素。

安裝

npm&nbsp;install&nbsp;primereact&nbsp;--save npm install primeicons --save

實現

import&nbsp;{Dialog}&nbsp;from&nbsp;&#39;primereact/dialog&#39;;&nbsp;import&nbsp;{Accordion,AccordionTab}&nbsp;from&nbsp;&#39;primereact/accordion&#39;; dependencies: {&nbsp;&#34;react&#34;:&nbsp;&#34;^16.0.0&#34;,&nbsp;&#34;react-dom&#34;:&nbsp;&#34;^16.0.0&#34;,&nbsp;&#34;react-transition-group&#34;:&nbsp;&#34;^2.2.1&#34;,&nbsp;&#34;classnames&#34;:&nbsp;&#34;^2.2.5&#34;,&nbsp;&#34;primeicons&#34;:&nbsp;&#34;^2.0.0&#34;&nbsp;}

優點

簡單性和效能。使用方便。Spring 應用程式。建立豐富的使用者介面。可用性和簡單性。

github: https://github.com/primefaces/primereact

11.React Router

React Router 在 React Native 開發人員社群中非常流行，因為它很容易上手。你只需要在 PC 上安裝 Git 和 npm 軟體包管理器，有一些 React 的基本知識以及學習的意願即可。沒有什麼太複雜的。

安裝

$ npm&nbsp;install&nbsp;--save react-router

實現

import&nbsp;{ Router, Route, Switch }&nbsp;from&nbsp;&#34;react-router&#34;;&nbsp;//&nbsp;using CommonJS modules var Router =&nbsp;require(&#34;react-router&#34;).Router; var Route =&nbsp;require(&#34;react-router&#34;).Route; var Switch =&nbsp;require(&#34;react-router&#34;).Switch;

優點

動態路由匹配。跳轉時檢視上的 CSS 過渡效果。標準化的應用結構和行為。

github: https://github.com/ReactTraining/react-router

12.Grommet

Grommet 是用來建立可響應且可訪問的移動優先 Web 應用的。它是 Apache 2.0 許可的 JavaScript 框架，其最大優勢是它在一個小包中同時提供了可訪問性、模組化、響應性和主題特性。也許這就是它被 Netflix、GE、Uber 和波音等公司廣泛使用的主要原因之一。

Yarn 和 npm 的安裝

$ npm&nbsp;install&nbsp;grommet styled-components&nbsp;--save

實現

&#34;grommet-controls/chartjs&#34;: {&nbsp;&#34;transform&#34;:&nbsp;&#34;grommet-controls/es6/chartjs/${member}&#34;,&nbsp;&#34;preventFullImport&#34;:&nbsp;true,&nbsp;&#34;skipDefaultConversion&#34;:&nbsp;true

優點

一個工具包一站式解決方案。將開放政策發揮到極致。重構過程對發展中的組織有益。

github: https://github.com/grommet/grommet

13.Onsen UI

Onsen UI 是另一個使用 HTML5 和 JavaScript 的移動應用開發框架，並提供與 Angular、Vue 和 React 的整合。它的許可基於 Apache 2.0。

Onsen 提供一些選項卡、一個側面選單、堆疊導航和其他元件。這款框架的最大優勢是，它的所有元件都具有 iOS 和 Android Material Design 支援以及自動樣式，這樣就能根據平臺改變應用程式的外觀。

安裝

npm&nbsp;install&nbsp;onsenui

實現

(function()&nbsp;{&nbsp;&#39;use strict&#39;;&nbsp;var&nbsp;module&nbsp;= angular.module(&#39;app&#39;, [&#39;onsen&#39;]);&nbsp;module.controller(&#39;AppController&#39;,&nbsp;function($scope)&nbsp;{&nbsp;// more to come here }); })();

優點

Onsen UI 的程式碼免費且開源。它不要求用它開發的應用強制使用任何型別的 DRM。編譯 JavaScript 和 HTML5 程式碼。為終端使用者提供原生體驗。

github: https://github.com/OnsenUI/OnsenUI

原地址：https://dzone.com/articles/13-of-the-best-react-javascript-frameworks

171