React.js 和 React Native 是流行的用戶界面(UI)開發(fā)平臺(tái)，且都是開源技術(shù)。在 StackOverflow 的 2019 年開發(fā)人員調(diào)查中，它們?cè)谄谕群褪褂寐史矫娑加泻芨叩呐琶?。React.js 是 Facebook 在 2011 年作為一個(gè) JavaScript 庫(kù)開發(fā)而成的，目的是滿足跨平臺(tái)、動(dòng)態(tài)和高性能 UI 的需求;而 Facebook 在 2015 年發(fā)布的 React Native 則是用來(lái)基于 JavaScript 構(gòu)建原生應(yīng)用程序的。

[[320156]]

下面列舉了 13 個(gè)精選的 React JavaScript 框架，它們?nèi)际情_源的。前 11 個(gè)(就像 React 那樣)是根據(jù) MIT 許可授權(quán)的，后兩個(gè)則是根據(jù) Apache 2.0 授權(quán)。

1. Creat React App

這款由 Facebook 開發(fā)人員帶來(lái)的命令行界面是所有 React Native 項(xiàng)目的必備框架。因?yàn)?Create React App 易于使用，讓你省掉了手動(dòng)設(shè)置和配置應(yīng)用的麻煩，從而節(jié)省了大量時(shí)間和精力。

只需一條簡(jiǎn)單的命令，一切就都準(zhǔn)備就緒，你就能輕松創(chuàng)建 React Native 項(xiàng)目了。你可以用它來(lái)構(gòu)建目錄和文件，該框架還包括用于構(gòu)建、測(cè)試和發(fā)布應(yīng)用程序的工具。

# 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：

• 帶有配置包、轉(zhuǎn)譯器和測(cè)試器的一流開發(fā)工具
• 應(yīng)用結(jié)構(gòu)中沒有配置，也沒有多余的文件。
• 穩(wěn)固的開發(fā)棧。
• 行之有效的快速開發(fā)工具。

2. Material Kit React

Material Kit React 受到了谷歌的 Material Design 系統(tǒng)啟發(fā)，是構(gòu)建 React UI 組件的絕佳選擇。這個(gè)庫(kù)最大的優(yōu)點(diǎn)是它提供了許多組件，這些組件可以組合在一起生成難以置信的效果。庫(kù)中有超過 1000 個(gè)完全編碼的組件，每個(gè)組件都有單獨(dú)的層，這些層都在文件夾中分門別類組織好了。這意味著你有著成千上萬(wàn)種選擇。如果你想獲取靈感，或與某人分享想法或概念，也有幾個(gè)示例頁(yè)面可用。

安裝 Material Kit：

$ npm install @material-ui/core 

實(shí)現(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 組件無(wú)需任何額外設(shè)置即可工作，并且不會(huì)污染全局域。

優(yōu)點(diǎn)：

這款 React 組件可以支持更輕松、更快速的 Web 開發(fā)流程。有了它，你可以構(gòu)建自己的設(shè)計(jì)系統(tǒng)，或者先從 Material Design 開始上手。

3. Shards React

這款現(xiàn)代 React UI 套件是為了實(shí)現(xiàn)高性能而從零開始打造的。它有著現(xiàn)代化的設(shè)計(jì)系統(tǒng)，讓你可以按照需要的方式自定義事物。你甚至可以下載源文件來(lái)在代碼級(jí)別自定義內(nèi)容。此外，用于樣式的 SCSS 語(yǔ)法可以提升開發(fā)體驗(yàn)。

Shards React 是基于 Shards 的，并使用了 React Datepicker、React Popper(定位引擎)和 noUISlider。它還提供了非常棒的 Material Design 圖標(biāo)。還有一些預(yù)制的版本可以幫助你獲得靈感和上手入門。

用 Yarn 或 NPM 安裝 Shards：

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

優(yōu)點(diǎn)：

• Shards 是輕量化設(shè)計(jì)的，體積很小，gzip 壓縮最小化后只有大約 13kb。
• Shards 天生就是響應(yīng)設(shè)計(jì)，所以其布局可以適應(yīng)任何屏幕尺寸，針對(duì)不同的顯示大小重排版內(nèi)容。
• Shards 的文檔很完善，因此你可以很快開始構(gòu)建漂亮的界面。

4. Styled Components

這款高效的 CSS 工具可以幫助你構(gòu)建用于應(yīng)用可視界面的小巧、可重用的組件。使用傳統(tǒng)的 CSS 時(shí)，你可能會(huì)意外覆蓋網(wǎng)站上其他位置用到的選擇器，但是 Styled Components 可以直接在你的組件內(nèi)部使用 CSS 語(yǔ)法，從而幫助你完全避免此類問題的困擾。

安裝：

npm install --save styled-components 

實(shí)現(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)點(diǎn)：

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

5. Redux

Redux 是 JavaScript 應(yīng)用程序的一個(gè)狀態(tài)管理解決方案。雖然它主要用于 React.js，但是你也可以將它用在其他類似 React 的框架上。

安裝：

sudo npm install redux sudo npm install react-redux 

實(shí)現(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)點(diǎn)：

• 可預(yù)測(cè)的狀態(tài)更新有助于定義應(yīng)用程序的數(shù)據(jù)流。
• 有了 reducer 函數(shù)，邏輯更易于測(cè)試和時(shí)間旅行調(diào)試。
• 狀態(tài)集中管理。

6. React Virtualized

這個(gè) React Native JavaScript 框架可用于大列表和表格數(shù)據(jù)的渲染。使用 React Virtualized，你可以限制請(qǐng)求和文檔對(duì)象模型(DOM)元素的數(shù)量，從而提升 React 應(yīng)用程序的性能。

安裝：

npm install react-virtualized 

實(shí)現(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)點(diǎn)：

• 高效顯示大量數(shù)據(jù)。
• 渲染巨大的數(shù)據(jù)集。
• 使用一組組件實(shí)現(xiàn)虛擬渲染。

7. React DnD

ReactDnD 負(fù)責(zé)創(chuàng)建復(fù)雜的拖放界面。市面上的拖放庫(kù)有幾十種之多，但 React DnD 之所以能脫穎而出，是因?yàn)樗鼧?gòu)建在現(xiàn)代 HTML5 的拖放 API 之上，簡(jiǎn)化了創(chuàng)建接口的過程。

安裝：

npm install react-dnd-preview 

實(shí)現(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)點(diǎn)：

• 元素拖動(dòng)優(yōu)雅自然。
• 強(qiáng)大的鍵盤和屏幕閱讀器支持。
• 性能出色。
• 干凈而強(qiáng)大的 API。
• 在標(biāo)準(zhǔn)的瀏覽器交互中發(fā)揮出色。
• 未經(jīng)修飾的樣式。
• 沒有創(chuàng)建額外的包裝器 dom 節(jié)點(diǎn)。

8. React Bootstrap

這款 UI Kit 庫(kù)用 React 替換了 Bootstrap 的 JavaScript，讓你可以更好地控制每個(gè)組件的函數(shù)。因?yàn)槊總€(gè)組件都用易于訪問的方式構(gòu)建，所以用 React Bootstrap 構(gòu)建前端框架是很好用的。有成千上萬(wàn)的引導(dǎo)主題可供選擇。

安裝：

npm install react-bootstrap bootstrap 

實(shí)現(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)點(diǎn)：

• 可以輕松導(dǎo)入所需的代碼 / 組件。
• 通過壓縮 Bootstrap 來(lái)節(jié)省代碼、減少錯(cuò)誤。
• 通過壓縮 Bootstrap 減少輸入工作和沖突。
• 用起來(lái)很簡(jiǎn)單。
• 它封裝在元素中。

9. React Suite

React Suite 是又一款高效的 React.js 框架，其中包含用于企業(yè)系統(tǒng)產(chǎn)品的多種組件庫(kù)。它支持所有主流瀏覽器和平臺(tái)，使其適用于幾乎任何系統(tǒng)。它還支持服務(wù)端渲染。

安裝：

npm i rsuite --save 

實(shí)現(xiàn)：

import { Button } from 'rsuite'; import 'rsuite/styles/less/index.less'; ReactDOM.render(<Button>Button</Button>, mountNode); 

優(yōu)點(diǎn)：

• 借助全局訪問功能，輕松管理應(yīng)用程序。
• Redux 庫(kù)集中了狀態(tài)管理操作。
• Redux 很靈活，它有所有的 UI 層，并有著龐大的生態(tài)系統(tǒng)。
• Redux 降低了復(fù)雜性，并提供了全局可訪問性。

10. PrimeReact

PrimeReact 的最大優(yōu)勢(shì)在于，它提供的組件幾乎可以滿足 UI 的所有基本要求，例如輸入選項(xiàng)、菜單、數(shù)據(jù)表示和消息等。這款框架還非常重視移動(dòng)體驗(yàn)，可以幫助你設(shè)計(jì)為觸控優(yōu)化的元素。

安裝：

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

實(shí)現(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)點(diǎn)：

• 簡(jiǎn)單性和性能。
• 使用方便。
• Spring 應(yīng)用程序。
• 創(chuàng)建豐富的用戶界面。
• 可用性和簡(jiǎn)單性。

11. React Router

React Router 在 React Native 開發(fā)人員社區(qū)中非常流行，因?yàn)樗苋菀咨鲜?。你只需要?PC 上安裝 Git 和 npm 軟件包管理器，有一些 React 的基本知識(shí)以及學(xué)習(xí)的意愿即可。沒有什么太復(fù)雜的。

安裝：

$ npm install --save react-router 

實(shí)現(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)點(diǎn)：

• 動(dòng)態(tài)路由匹配。
• 跳轉(zhuǎn)時(shí)視圖上的 CSS 過渡效果。
• 標(biāo)準(zhǔn)化的應(yīng)用結(jié)構(gòu)和行為。

12. Grommet

Grommet 是用來(lái)創(chuàng)建可響應(yīng)且可訪問的移動(dòng)優(yōu)先 Web 應(yīng)用的。它是 Apache 2.0 許可的 JavaScript 框架，其最大優(yōu)勢(shì)是它在一個(gè)小包中同時(shí)提供了可訪問性、模塊化、響應(yīng)性和主題特性。也許這就是它被 Netflix、GE、Uber 和波音等公司廣泛使用的主要原因之一。

Yarn 和 npm 的安裝：

$ npm install grommet styled-components --save 

實(shí)現(xiàn)：

"grommet-controls/chartjs": { "transform": "grommet-controls/es6/chartjs/${member}", "preventFullImport": true, "skipDefaultConversion": true 

優(yōu)點(diǎn)：

• 一個(gè)工具包一站式解決方案。
• 將開放政策發(fā)揮到極致。
• 重構(gòu)過程對(duì)發(fā)展中的組織有益。

13. Onsen UI

Onsen UI 是另一個(gè)使用 HTML5 和 JavaScript 的移動(dòng)應(yīng)用開發(fā)框架，并提供與 Angular、Vue 和 React 的集成。它的許可基于 Apache 2.0。

Onsen 提供一些選項(xiàng)卡、一個(gè)側(cè)面菜單、堆棧導(dǎo)航和其他組件。這款框架的最大優(yōu)勢(shì)是，它的所有組件都具有 iOS 和 Android Material Design 支持以及自動(dòng)樣式，這樣就能根據(jù)平臺(tái)改變應(yīng)用程序的外觀。

安裝：

npm install onsenui 

實(shí)現(xiàn)：

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

優(yōu)點(diǎn)：

• Onsen UI 的代碼免費(fèi)且開源。
• 它不要求用它開發(fā)的應(yīng)用強(qiáng)制使用任何類型的 DRM。
• 編譯 JavaScript 和 HTML5 代碼。
• 為終端用戶提供原生體驗(yàn)。