十三個(gè)優(yōu)秀的 React JavaScript 框架
如果你正在用 React.js 或 React Native 來開發(fā)用戶界面的話，試試這些框架。
React.js 和 React Native 都是用來開發(fā)用戶界面（UI）的很受歡迎的開源平臺(tái)。在 StackOverflow 2019 年度開發(fā)者調(diào)查里，兩個(gè)框架的可取性和使用情況都排名靠前。React.js 是 Facebook 在 2011 年開發(fā)的一個(gè) JavaScript 庫，來實(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)?nbsp;Create React App 使用很簡單，還可以避免你自己手動(dòng)設(shè)定和配置應(yīng)用，因此能節(jié)省大量的時(shí)間和精力。僅僅使用給一個(gè)簡單的命令，就可以為你準(zhǔn)備好創(chuàng)建 React 原生項(xiàng)目所需的一切。你可以用它來創(chuàng)建分類和文件，而且該框架還自帶了工具用來構(gòu)建，測試和啟動(dòng)應(yīng)用。
# 安裝軟件包$ npm install -g create-react-native-web-app# 運(yùn)行 create-react-native-web-app <項(xiàng)目目錄>$ create-react-native-web-app myApp# 切換到創(chuàng)建的 <項(xià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
- 使用配置包、轉(zhuǎn)碼器，以及測試運(yùn)行器進(jìn)行開發(fā)的一流工具
- 在應(yīng)用架構(gòu)里不需要配置以及沒有額外文件
- 確定的開發(fā)棧
- 高效快速的開發(fā)工具
2、Material Kit React
Material Kit React 是受谷歌的 Material Design 系統(tǒng)啟發(fā)開發(fā)的，很適合用來創(chuàng)建 React UI 組件。這個(gè)庫最大的優(yōu)點(diǎn)是提供了大量的組件，可以互相搭配做出非常好的效果。有超過一千個(gè)完全編碼的組件，每一個(gè)都有用文件夾組織起來的獨(dú)立層。這樣你就可以有上千個(gè)選項(xiàng)可以選擇。它同時(shí)也包含一些示例頁面，方便你從中尋找靈感，或者向別人分享你的點(diǎn)子或創(chuàng)意。
安裝 Material Kit
$ npm install @material-ui/core
使用
import React from 'react';import Button from '@material-ui/core/Button';const App = () => (<Button variant="contained" color="primary">Hello World</Button>);
Material-UI 組件不需要其他額外設(shè)置，也不會(huì)干擾全局變量空間。
優(yōu)點(diǎn)
這個(gè) React 組件支持簡易快速的網(wǎng)頁開發(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)，可以讓你按自己的想法任意定制。你甚至可以下載源文件，然后從代碼級別定制。另外，它用來設(shè)計(jì)樣式的 SCSS 語法提高了開發(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)
- Shards 是一個(gè)輕量級的腳本，壓縮后大概 13kb
- Shards 默認(rèn)支持響應(yīng)式，圖層可以適配任意大小屏幕
- Shards 有完整的文檔，可以快速開始構(gòu)建漂亮的界面
4、Styled Components
這個(gè)高效的 CSS 工具可以用來為應(yīng)用的可視界面創(chuàng)建小型可重用的組件。使用傳統(tǒng)的 CSS，你可能會(huì)不小心覆蓋掉網(wǎng)站其他位置的選擇器，但 Styled Components 通過使用直接內(nèi)嵌到組件里的 CSS 語法，可以完全避免這個(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)
- 讓組件有更好的可讀性
- 組件樣式依賴 JavaScript
- 創(chuàng)建定制 CSS 組件
- 內(nèi)嵌樣式
- 簡單地調(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)
- 可預(yù)計(jì)的狀態(tài)更新有助于定義應(yīng)用里的數(shù)據(jù)流
- 邏輯上測試更簡單，使用 reducer 函數(shù)進(jìn)行時(shí)間旅行調(diào)試也更容易
- 統(tǒng)一管理狀態(tài)
6、React Virtualized
這個(gè) 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)點(diǎn)
- 高效展示大量數(shù)據(jù)
- 渲染超大數(shù)據(jù)集
- 使用一系列組件實(shí)現(xiàn)虛擬渲染
7、React DnD
React DnD 用來創(chuàng)建復(fù)雜的拖放界面。拖放控件庫有很多，選用 React DnD 是因?yàn)樗腔?HTML5 的拖放 API 的，創(chuàng)建界面更簡單。
安裝
npm install react-dnd-preview
使用
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)
- 強(qiáng)大的鍵盤和屏幕閱讀支持
- 極限性能
- 強(qiáng)大整潔的接口
- 標(biāo)準(zhǔn)瀏覽器支持非常好
- 中性樣式
- 沒有額外創(chuàng)建 DOM 節(jié)點(diǎn)
8、React Bootstrap
這個(gè) UI 庫將 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(<App />, document.getElementById('root'));registerServiceWorker();
優(yōu)點(diǎn)
- 可以簡單導(dǎo)入所需的代碼/組件
- 通過壓縮 Bootstrap 節(jié)省了輸入和問題
- 通過壓縮 Bootstrap 減少了輸入工作和沖突
- 使用簡單
- 使用元素封裝
9、React Suite
React Suite 是另一個(gè)高效的 React.js 框架，包含了大量組件庫，方便開發(fā)企業(yè)級產(chǎn)品。支持所有主流瀏覽器和平臺(tái)，適用于任何系統(tǒng)。還支持服務(wù)器端渲染。
安裝
npm i rsuite --save
使用
import { Button } from 'rsuite';import 'rsuite/styles/less/index.less';ReactDOM.render(<Button>Button</Button>, mountNode);
優(yōu)點(diǎn)
- 通過全局訪問特性輕松管理應(yīng)用
- 使用 Redux 庫集中管理系統(tǒng)狀態(tài)
- Redux 庫有靈活的 UI 層，以及廣泛的生態(tài)
- Redux 庫減少系統(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)
- 簡單而高效
- 容易使用
- Spring 應(yīng)用
- 創(chuàng)建復(fù)雜用戶界面
- 好用而簡單
11、React Router
React Router 在 React Native 開發(fā)社區(qū)很受歡迎，因?yàn)樗鲜趾苋菀住Ｖ恍枰阍陔娔X上安裝 Git 和 npm 包管理工具，有 React 的基礎(chǔ)知識，以及好學(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)
- 動(dòng)態(tài)路由匹配
- 在導(dǎo)航時(shí)支持不同頁面的 CSS 切換
- 統(tǒng)一的應(yīng)用結(jié)構(gòu)和行為
12、Grommet
Grommet 常用于開發(fā)響應(yīng)式、可訪問的移動(dòng)網(wǎng)頁應(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)
- 創(chuàng)建一個(gè)工具包來打包
- 把開放政策發(fā)揮到極致
- 重構(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)
- Onsen UI 基于自由而開源代碼
- 不強(qiáng)制基于它開發(fā)的應(yīng)用使用任何形式的 DRM
- 內(nèi)置了 JavaScript 和 HTML5 代碼
- 給最終用戶帶來原生體驗(yàn)
你最喜歡哪個(gè) React JavaScript 框架？
