如果你正在用 React.js 或 React Native 來(lái)開發(fā)用戶界面的話，試試這些框架。

React.js 和 React Native 都是用來(lái)開發(fā)用戶界面（UI）的很受歡迎的開源平臺(tái)。在 StackOverflow 2019 年度開發(fā)者調(diào)查里，兩個(gè)框架的可取性和使用情況都排名靠前。React.js 是 Facebook 在 2011 年開發(fā)的一個(gè) JavaScript 庫(kù)，來(lái)實(shí)現(xiàn)跨平臺(tái)，動(dòng)態(tài)以及高性能的 UI 設(shè)計(jì)需求；而 React Native 則是 Facebook 在 2015 年發(fā)布的框架，目的是使用 JavaScript 構(gòu)建原生應(yīng)用。

下面介紹 13 個(gè)最好的 React JavaScript 框架，都是開源項(xiàng)目。前 11 個(gè)（和 React 一樣）都使用 MIT 許可證授權(quán)，后面兩個(gè)使用 Apache 2.0 許可證。

1、Create React App

這個(gè) Facebook 開發(fā)的命令行工具是 React Native 項(xiàng)目一定要用的。因?yàn)?Create React App使用很簡(jiǎn)單，還可以避免你自己手動(dòng)設(shè)定和配置應(yīng)用，因此能節(jié)省大量的時(shí)間和精力。僅僅使用給一個(gè)簡(jiǎn)單的命令，就可以為你準(zhǔn)備好創(chuàng)建 React 原生項(xiàng)目所需的一切。你可以用它來(lái)創(chuàng)建分類和文件，而且該框架還自帶了工具用來(lái)構(gòu)建，測(cè)試和啟動(dòng)應(yīng)用。

# 安裝軟件包$ npm install -g create-react-native-web-app # 運(yùn)行 create-react-native-web-app $ create-react-native-web-app myApp # 切換到創(chuàng)建的 $ cd myApp # 運(yùn)行 Web/Ios/Android 調(diào)試# Web$ npm run web # IOS（模擬）$ npm run ios # Android（實(shí)際連接的設(shè)備）$ npm run android

為什么選擇 Create React App

1. 使用配置包、轉(zhuǎn)碼器，以及測(cè)試運(yùn)行器進(jìn)行開發(fā)的一流工具
2. 在應(yīng)用架構(gòu)里不需要配置以及沒有額外文件
3. 確定的開發(fā)棧
4. 高效快速的開發(fā)工具

2、Material Kit React

Material Kit React是受谷歌的 Material Design 系統(tǒng)啟發(fā)開發(fā)的，很適合用來(lái)創(chuàng)建 React UI 組件。這個(gè)庫(kù)最大的優(yōu)點(diǎn)是提供了大量的組件，可以互相搭配做出非常好的效果。有超過一千個(gè)完全編碼的組件，每一個(gè)都有用文件夾組織起來(lái)的獨(dú)立層。這樣你就可以有上千個(gè)選項(xiàng)可以選擇。它同時(shí)也包含一些示例頁(yè)面，方便你從中尋找靈感，或者向別人分享你的點(diǎn)子或創(chuàng)意。

安裝 Material Kit

$ npm install @material-ui/core

使用

import React from \'react\';import Button from \'@material-ui/core/Button\';const App = => (

Material-UI 組件不需要其他額外設(shè)置，也不會(huì)干擾全局變量空間。

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

這個(gè) React 組件支持簡(jiǎn)易快速的網(wǎng)頁(yè)開發(fā)。你可以用它創(chuàng)建自己的設(shè)計(jì)系統(tǒng)，或者直接開始 Material Design。

3、Shards react

這個(gè)現(xiàn)代的 React UI 工具為了追求高效率，是從最底層開始構(gòu)建的。它擁有現(xiàn)代的設(shè)計(jì)系統(tǒng)，可以讓你按自己的想法任意定制。你甚至可以下載源文件，然后從代碼級(jí)別定制。另外，它用來(lái)設(shè)計(jì)樣式的 SCSS 語(yǔ)法提高了開發(fā)體驗(yàn)。

Shards React基于 Shards，使用了 React Datepicker、React Popper（一個(gè)定位引擎）和 noUISlider。還帶有非常優(yōu)秀的 Material Design 圖標(biāo)。還有很多設(shè)計(jì)好的版本，可以幫你尋找靈感或上手。

用 Yarn 或 NPM 安裝 Shards

# Yarnyarn add shards-react# NPMnpm i shards-react

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

1. Shards 是一個(gè)輕量級(jí)的腳本，壓縮后大概 13kb
2. Shards 默認(rèn)支持響應(yīng)式，圖層可以適配任意大小屏幕
3. Shards 有完整的文檔，可以快速開始構(gòu)建漂亮的界面

4、Styled Components

這個(gè)高效的 CSS 工具可以用來(lái)為應(yīng)用的可視界面創(chuàng)建小型可重用的組件。使用傳統(tǒng)的 CSS，你可能會(huì)不小心覆蓋掉網(wǎng)站其他位置的選擇器，但 Styled Components通過使用直接內(nèi)嵌到組件里的 CSS 語(yǔ)法，可以完全避免這個(gè)問題。

安裝

npm install --save styled-components

使用

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)

1. 讓組件有更好的可讀性
2. 組件樣式依賴 JavaScript
3. 創(chuàng)建定制 CSS 組件
4. 內(nèi)嵌樣式
5. 簡(jiǎn)單地調(diào)用 styled可以將組件甚至是自定義組件轉(zhuǎn)換成樣式組件

5、redux

Redux是一個(gè)為 JavaScript 應(yīng)用提供狀態(tài)管理的方案。常用于 React.js，也可以用在其他類 React 框架里。

安裝

sudo npm install reduxsudo npm install react-redux

使用

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)

1. 可預(yù)計(jì)的狀態(tài)更新有助于定義應(yīng)用里的數(shù)據(jù)流
2. 邏輯上測(cè)試更簡(jiǎn)單，使用 reducer 函數(shù)進(jìn)行時(shí)間旅行調(diào)試也更容易
3. 統(tǒng)一管理狀態(tài)

6、React Virtualized

這個(gè) React Native JavaScript 框架幫助渲染 large-list 和 tabular-data。使用 React Virtualized，你可以限制請(qǐng)求和文檔對(duì)象模型（DOM）元素的數(shù)量，從而提高 React 應(yīng)用的性能。

安裝

npm install react-virtualized

使用

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\', }, ...等等}

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

1. 高效展示大量數(shù)據(jù)
2. 渲染超大數(shù)據(jù)集
3. 使用一系列組件實(shí)現(xiàn)虛擬渲染

7、React DnD

React DnD用來(lái)創(chuàng)建復(fù)雜的拖放界面。拖放控件庫(kù)有很多，選用 React DnD 是因?yàn)樗腔?HTML5 的拖放 API 的，創(chuàng)建界面更簡(jiǎn)單。

安裝

npm install react-dnd-preview

使用

import Preview from \'react-dnd-preview\'; const generatePreview = ({itemType, item, style}) => { return

; }; class App extends React.Component { ... render { return (review generator={generatePreview} /> // or &ltreview>{generatePreview}

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

1. 漂亮自然的控件移動(dòng)
2. 強(qiáng)大的鍵盤和屏幕閱讀支持
3. 極限性能
4. 強(qiáng)大整潔的接口
5. 標(biāo)準(zhǔn)瀏覽器支持非常好
6. 中性樣式
7. 沒有額外創(chuàng)建 DOM 節(jié)點(diǎn)

8、React bootstrap

這個(gè) UI 庫(kù)將 Bootstrap 的 JavaScript 替換成了 React，可以更好地控制每個(gè)組件的功能。每個(gè)組件都構(gòu)建成能輕易訪問，因此 React Bootstrap有利于構(gòu)建前端框架。有上千種 Bootstrap 主題可以選擇。

安裝

npm install react-bootstrap bootstrap

使用

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(, document.getElementById(\'root\'));registerServiceWorker;

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

1. 可以簡(jiǎn)單導(dǎo)入所需的代碼/組件
2. 通過壓縮 Bootstrap 節(jié)省了輸入和問題
3. 通過壓縮 Bootstrap 減少了輸入工作和沖突
4. 使用簡(jiǎn)單
5. 使用元素封裝

9、React Suite

React Suite是另一個(gè)高效的 React.js 框架，包含了大量組件庫(kù)，方便開發(fā)企業(yè)級(jí)產(chǎn)品。支持所有主流瀏覽器和平臺(tái)，適用于任何系統(tǒng)。還支持服務(wù)器端渲染。

安裝

npm i rsuite --save

使用

import { Button } from \'rsuite\';import \'rsuite/styles/less/index.less\';ReactDOM.render(

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

1. 通過全局訪問特性輕松管理應(yīng)用
2. 使用 Redux 庫(kù)集中管理系統(tǒng)狀態(tài)
3. Redux 庫(kù)有靈活的 UI 層，以及廣泛的生態(tài)
4. Redux 庫(kù)減少系統(tǒng)復(fù)雜度，并提供了全局訪問特性

10、PrimeReact

PrimeReact最值得推薦的是它提供了幾乎覆蓋所有基本 UI 需求的組件，比如輸入選項(xiàng)，菜單，數(shù)據(jù)展示，消息，等等。這個(gè)框架還優(yōu)化了移動(dòng)體驗(yàn)，幫助你設(shè)計(jì)觸摸優(yōu)化的元素。

安裝

npm install primereact --savenpm install primeicons --save

使用

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)

1. 簡(jiǎn)單而高效
2. 容易使用
3. Spring 應(yīng)用
4. 創(chuàng)建復(fù)雜用戶界面
5. 好用而簡(jiǎn)單

11、React Router

React Router在 React Native 開發(fā)社區(qū)很受歡迎，因?yàn)樗鲜趾苋菀?。只需要你在電腦上安裝 Git 和 npm 包管理工具，有 React 的基礎(chǔ)知識(shí)，以及好學(xué)的意愿。沒什么特別難的地方。

安裝

$ npm install --save react-Router

使用

import { Router, Route, Switch } from \"react-router\"; // 使用 CommonJS 模塊var Router = require(\"react-router\").Router;var Route = require(\"react-router\").Route;var Switch = require(\"react-router\").Switch;

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

1. 動(dòng)態(tài)路由匹配
2. 在導(dǎo)航時(shí)支持不同頁(yè)面的 CSS 切換
3. 統(tǒng)一的應(yīng)用結(jié)構(gòu)和行為

12、Grommet

Grommet常用于開發(fā)響應(yīng)式、可訪問的移動(dòng)網(wǎng)頁(yè)應(yīng)用。這個(gè)用 Apache 2.0 許可證授權(quán)的 JavaScript 框架最大的優(yōu)點(diǎn)是用很小的包提供了可訪問性、模塊化、響應(yīng)式以及主題功能。這可能是它被一些公司廣泛使用的主要原因，比如奈飛、通用電氣、優(yōu)步以及波音。

安裝 for yarn and npm

$ npm install grommet styled-components --save

使用

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

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

1. 創(chuàng)建一個(gè)工具包來(lái)打包
2. 把開放政策發(fā)揮到極致
3. 重構(gòu)有助于影響已成立的組織

13、Onsen UI

Onsen UI另一個(gè)使用 HTML5 和 JavaScript 的手機(jī)應(yīng)用開發(fā)框架，集成了 Angular、Vue 和 React，使用 Apache 2.0 許可證授權(quán)。

Onsen 提供了標(biāo)簽、側(cè)邊欄、堆棧導(dǎo)航以及其他組件。這個(gè)框架最好的地方是，它所有的組件都支持 iOS 和安卓 Material Design 自動(dòng)適配，會(huì)根據(jù)不同的平臺(tái)切換應(yīng)用的外觀。

安裝

npm install onsenui

使用

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

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

1. Onsen UI 基于自由而開源代碼
2. 不強(qiáng)制基于它開發(fā)的應(yīng)用使用任何形式的 DRM
3. 內(nèi)置了 JavaScript 和 HTML5 代碼
4. 給最終用戶帶來(lái)原生體驗(yàn)

你最喜歡哪個(gè) React JavaScript 框架？請(qǐng)?jiān)谠u(píng)論區(qū)分享。

via: https://opensource.com/article/20/1/react-javascript-frameworks

作者：Amit Dua選題：lujun9972譯者：zpl1025校對(duì)：wxy

本文由 LCTT原創(chuàng)編譯，Linux中國(guó)榮譽(yù)推出