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

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

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

1、Create React App

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

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

為什么選擇 Create React App

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

2、Material Kit React

Material Kit React是受谷歌的 Material Design 系統(tǒng)啟發(fā)開發(fā)的，很適合用來創(chuàng)建 React UI 組件。這個庫最大的優(yōu)點是提供了大量的組件，可以互相搭配做出非常好的效果。有超過一千個完全編碼的組件，每一個都有用文件夾組織起來的獨立層。這樣你就可以有上千個選項可以選擇。它同時也包含一些示例頁面，方便你從中尋找靈感，或者向別人分享你的點子或創(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è)置，也不會干擾全局變量空間。

優(yōu)點

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

3、Shards react

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

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

用 Yarn 或 NPM 安裝 Shards

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

優(yōu)點

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

4、Styled Components

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

安裝

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)點

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

5、redux

Redux是一個為 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)點

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

6、React Virtualized

這個 React Native JavaScript 框架幫助渲染 large-list 和 tabular-data。使用 React Virtualized，你可以限制請求和文檔對象模型（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)點

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

7、React DnD

React DnD用來創(chuàng)建復雜的拖放界面。拖放控件庫有很多，選用 React DnD 是因為它是基于 HTML5 的拖放 API 的，創(chuàng)建界面更簡單。

安裝

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)點

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

8、React bootstrap

這個 UI 庫將 Bootstrap 的 JavaScript 替換成了 React，可以更好地控制每個組件的功能。每個組件都構(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)點

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

9、React Suite

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

安裝

npm i rsuite --save

使用

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

優(yōu)點

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

10、PrimeReact

PrimeReact最值得推薦的是它提供了幾乎覆蓋所有基本 UI 需求的組件，比如輸入選項，菜單，數(shù)據(jù)展示，消息，等等。這個框架還優(yōu)化了移動體驗，幫助你設(shè)計觸摸優(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)點

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

11、React Router

React Router在 React Native 開發(fā)社區(qū)很受歡迎，因為它上手很容易。只需要你在電腦上安裝 Git 和 npm 包管理工具，有 React 的基礎(chǔ)知識，以及好學的意愿。沒什么特別難的地方。

安裝

$ 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)點

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

12、Grommet

Grommet常用于開發(fā)響應(yīng)式、可訪問的移動網(wǎng)頁應(yīng)用。這個用 Apache 2.0 許可證授權(quán)的 JavaScript 框架最大的優(yōu)點是用很小的包提供了可訪問性、模塊化、響應(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)點

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

13、Onsen UI

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

Onsen 提供了標簽、側(cè)邊欄、堆棧導航以及其他組件。這個框架最好的地方是，它所有的組件都支持 iOS 和安卓 Material Design 自動適配，會根據(jù)不同的平臺切換應(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)點

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

你最喜歡哪個 React JavaScript 框架？請在評論區(qū)分享。

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

作者：Amit Dua選題：lujun9972譯者：zpl1025校對：wxy

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