13個精選的React JS框架
React.js 和 React Native 是流行的用戶界面(UI)開發(fā)平臺，且都是開源技術。在 StackOverflow 的 2019 年開發(fā)人員調查中，它們在期望度和使用率方面都有很高的排名。React.js 是 Facebook 在 2011 年作為一個 JavaScript 庫開發(fā)而成的，目的是滿足跨平臺、動態(tài)和高性能 UI 的需求;而 Facebook 在 2015 年發(fā)布的 React Native 則是用來基于 JavaScript 構建原生應用程序的。
下面列舉了 13 個精選的 React JavaScript 框架，它們全都是開源的。前 11 個(就像 React 那樣)是根據(jù) MIT 許可授權的，后兩個則是根據(jù) Apache 2.0 授權。
1. Creat React App
這款由 Facebook 開發(fā)人員帶來的命令行界面是所有 React Native 項目的必備框架。因為 Create React App 易于使用，讓你省掉了手動設置和配置應用的麻煩，從而節(jié)省了大量時間和精力。
只需一條簡單的命令，一切就都準備就緒，你就能輕松創(chuàng)建 React Native 項目了。你可以用它來構建目錄和文件，該框架還包括用于構建、測試和發(fā)布應用程序的工具。
- # Install package $ npm install -g create-react-native-web-app # Run create-react-native-web-app <project-directory> $ create-react-native-web-app myApp # cd into your <project-directory> $ cd myApp # Run Web/Ios/Android development # Web $ npm run web # IOS (simulator) $ npm run ios # Android (connected device) $ npm run android
為什么選擇 Create React App：
- 帶有配置包、轉譯器和測試器的一流開發(fā)工具
- 應用結構中沒有配置，也沒有多余的文件。
- 穩(wěn)固的開發(fā)棧。
- 行之有效的快速開發(fā)工具。
2. Material Kit React
Material Kit React 受到了谷歌的 Material Design 系統(tǒng)啟發(fā)，是構建 React UI 組件的絕佳選擇。這個庫最大的優(yōu)點是它提供了許多組件，這些組件可以組合在一起生成難以置信的效果。庫中有超過 1000 個完全編碼的組件，每個組件都有單獨的層，這些層都在文件夾中分門別類組織好了。這意味著你有著成千上萬種選擇。如果你想獲取靈感，或與某人分享想法或概念，也有幾個示例頁面可用。
安裝 Material Kit：
- $ npm install @material-ui/core
實現(xiàn)：
- import React from 'react'; import Button from '@material-ui/core/Button'; const App = () => ( <Button variant="contained" color="primary"> Hello World </Button> );
Material-UI 組件無需任何額外設置即可工作，并且不會污染全局域。
優(yōu)點：
這款 React 組件可以支持更輕松、更快速的 Web 開發(fā)流程。有了它，你可以構建自己的設計系統(tǒng)，或者先從 Material Design 開始上手。
3. Shards React
這款現(xiàn)代 React UI 套件是為了實現(xiàn)高性能而從零開始打造的。它有著現(xiàn)代化的設計系統(tǒng)，讓你可以按照需要的方式自定義事物。你甚至可以下載源文件來在代碼級別自定義內容。此外，用于樣式的 SCSS 語法可以提升開發(fā)體驗。
Shards React 是基于 Shards 的，并使用了 React Datepicker、React Popper(定位引擎)和 noUISlider。它還提供了非常棒的 Material Design 圖標。還有一些預制的版本可以幫助你獲得靈感和上手入門。
用 Yarn 或 NPM 安裝 Shards：
- # Yarn yarn add shards-react # NPM npm i shards-react
優(yōu)點：
- Shards 是輕量化設計的，體積很小，gzip 壓縮最小化后只有大約 13kb。
- Shards 天生就是響應設計，所以其布局可以適應任何屏幕尺寸，針對不同的顯示大小重排版內容。
- Shards 的文檔很完善，因此你可以很快開始構建漂亮的界面。
4. Styled Components
這款高效的 CSS 工具可以幫助你構建用于應用可視界面的小巧、可重用的組件。使用傳統(tǒng)的 CSS 時，你可能會意外覆蓋網(wǎng)站上其他位置用到的選擇器，但是 Styled Components 可以直接在你的組件內部使用 CSS 語法，從而幫助你完全避免此類問題的困擾。
安裝：
- npm install --save styled-components
實現(xiàn)：
- const Button = styled.button` background: background_type; border-radius: radius_value; border: abc; color: name_of_color; Margin: margin_value; padding: value;
優(yōu)點：
- 使組件更具可讀性。
- 組件的樣式依賴于 JavaScript。
- 使用 CSS 構建自定義組件。
- 內聯(lián)樣式。
- 只需調用 styled()，即可將組件(甚至是自定義組件)轉換為樣式化組件。
5. Redux
Redux 是 JavaScript 應用程序的一個狀態(tài)管理解決方案。雖然它主要用于 React.js，但是你也可以將它用在其他類似 React 的框架上。
安裝：
- sudo npm install redux sudo npm install react-redux
實現(xiàn)：
- import { createStore } from "redux"; import rotateReducer from "reducers/rotateReducer"; function configureStore(state = { rotating: value}) { return createStore(rotateReducer,state); } export default configureStore;
優(yōu)點：
- 可預測的狀態(tài)更新有助于定義應用程序的數(shù)據(jù)流。
- 有了 reducer 函數(shù)，邏輯更易于測試和時間旅行調試。
- 狀態(tài)集中管理。
6. React Virtualized
這個 React Native JavaScript 框架可用于大列表和表格數(shù)據(jù)的渲染。使用 React Virtualized，你可以限制請求和文檔對象模型(DOM)元素的數(shù)量，從而提升 React 應用程序的性能。
安裝：
- npm install react-virtualized
實現(xiàn)：
- import 'react-virtualized/styles.css' import { Column, Table } from 'react-virtualized' import AutoSizer from 'react-virtualized/dist/commonjs/AutoSizer' import List from 'react-virtualized/dist/commonjs/List' { alias: { 'react-virtualized/List': 'react-virtualized/dist/es/List', }, ...rest }
優(yōu)點：
- 高效顯示大量數(shù)據(jù)。
- 渲染巨大的數(shù)據(jù)集。
- 使用一組組件實現(xiàn)虛擬渲染。
7. React DnD
ReactDnD 負責創(chuàng)建復雜的拖放界面。市面上的拖放庫有幾十種之多，但 React DnD 之所以能脫穎而出，是因為它構建在現(xiàn)代 HTML5 的拖放 API 之上，簡化了創(chuàng)建接口的過程。
安裝：
- npm install react-dnd-preview
實現(xiàn)：
- import Preview from 'react-dnd-preview'; const generatePreview = ({itemType, item, style}) => { return <div class="item-list" style={style}>{itemType}</div>; }; class App extends React.Component { ... render() { return ( <DndProvider backend={MyBackend}> <ItemList /> <Preview generator={generatePreview} /> // or <Preview>{generatePreview}</Preview> </DndProvider> ); } }
優(yōu)點：
- 元素拖動優(yōu)雅自然。
- 強大的鍵盤和屏幕閱讀器支持。
- 性能出色。
- 干凈而強大的 API。
- 在標準的瀏覽器交互中發(fā)揮出色。
- 未經(jīng)修飾的樣式。
- 沒有創(chuàng)建額外的包裝器 dom 節(jié)點。
8. React Bootstrap
這款 UI Kit 庫用 React 替換了 Bootstrap 的 JavaScript，讓你可以更好地控制每個組件的函數(shù)。因為每個組件都用易于訪問的方式構建，所以用 React Bootstrap 構建前端框架是很好用的。有成千上萬的引導主題可供選擇。
安裝：
- npm install react-bootstrap bootstrap
實現(xiàn)：
- import 'bootstrap/dist/css/bootstrap.min.css'; import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import registerServiceWorker from './registerServiceWorker'; ReactDOM.render(<App />, document.getElementById('root')); registerServiceWorker();
優(yōu)點：
- 可以輕松導入所需的代碼 / 組件。
- 通過壓縮 Bootstrap 來節(jié)省代碼、減少錯誤。
- 通過壓縮 Bootstrap 減少輸入工作和沖突。
- 用起來很簡單。
- 它封裝在元素中。
9. React Suite
React Suite 是又一款高效的 React.js 框架，其中包含用于企業(yè)系統(tǒng)產品的多種組件庫。它支持所有主流瀏覽器和平臺，使其適用于幾乎任何系統(tǒng)。它還支持服務端渲染。
安裝：
- npm i rsuite --save
實現(xiàn)：
- import { Button } from 'rsuite'; import 'rsuite/styles/less/index.less'; ReactDOM.render(<Button>Button</Button>, mountNode);
優(yōu)點：
- 借助全局訪問功能，輕松管理應用程序。
- Redux 庫集中了狀態(tài)管理操作。
- Redux 很靈活，它有所有的 UI 層，并有著龐大的生態(tài)系統(tǒng)。
- Redux 降低了復雜性，并提供了全局可訪問性。
10. PrimeReact
PrimeReact 的最大優(yōu)勢在于，它提供的組件幾乎可以滿足 UI 的所有基本要求，例如輸入選項、菜單、數(shù)據(jù)表示和消息等。這款框架還非常重視移動體驗，可以幫助你設計為觸控優(yōu)化的元素。
安裝：
- npm install primereact --save npm install primeicons --save
實現(xiàn)：
- import {Dialog} from 'primereact/dialog'; import {Accordion,AccordionTab} from 'primereact/accordion'; dependencies: { "react": "^16.0.0", "react-dom": "^16.0.0", "react-transition-group": "^2.2.1", "classnames": "^2.2.5", "primeicons": "^2.0.0" }
優(yōu)點：
- 簡單性和性能。
- 使用方便。
- Spring 應用程序。
- 創(chuàng)建豐富的用戶界面。
- 可用性和簡單性。
11. React Router
React Router 在 React Native 開發(fā)人員社區(qū)中非常流行，因為它很容易上手。你只需要在 PC 上安裝 Git 和 npm 軟件包管理器，有一些 React 的基本知識以及學習的意愿即可。沒有什么太復雜的。
安裝：
- $ npm install --save react-router
實現(xiàn)：
- import { Router, Route, Switch } from "react-router"; // using CommonJS modules var Router = require("react-router").Router; var Route = require("react-router").Route; var Switch = require("react-router").Switch;
優(yōu)點：
- 動態(tài)路由匹配。
- 跳轉時視圖上的 CSS 過渡效果。
- 標準化的應用結構和行為。
12. Grommet
Grommet 是用來創(chuàng)建可響應且可訪問的移動優(yōu)先 Web 應用的。它是 Apache 2.0 許可的 JavaScript 框架，其最大優(yōu)勢是它在一個小包中同時提供了可訪問性、模塊化、響應性和主題特性。也許這就是它被 Netflix、GE、Uber 和波音等公司廣泛使用的主要原因之一。
Yarn 和 npm 的安裝：
- $ npm install grommet styled-components --save
實現(xiàn)：
- "grommet-controls/chartjs": { "transform": "grommet-controls/es6/chartjs/${member}", "preventFullImport": true, "skipDefaultConversion": true
優(yōu)點：
- 一個工具包一站式解決方案。
- 將開放政策發(fā)揮到極致。
- 重構過程對發(fā)展中的組織有益。
13. Onsen UI
Onsen UI 是另一個使用 HTML5 和 JavaScript 的移動應用開發(fā)框架，并提供與 Angular、Vue 和 React 的集成。它的許可基于 Apache 2.0。
Onsen 提供一些選項卡、一個側面菜單、堆棧導航和其他組件。這款框架的最大優(yōu)勢是，它的所有組件都具有 iOS 和 Android Material Design 支持以及自動樣式，這樣就能根據(jù)平臺改變應用程序的外觀。
安裝：
- npm install onsenui
實現(xiàn)：
- (function() { 'use strict'; var module = angular.module('app', ['onsen']); module.controller('AppController', function($scope) { // more to come here }); })();
優(yōu)點：
- Onsen UI 的代碼免費且開源。
- 它不要求用它開發(fā)的應用強制使用任何類型的 DRM。
- 編譯 JavaScript 和 HTML5 代碼。
- 為終端用戶提供原生體驗。
