[[424707]]

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

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

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

1、Create React App

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

# 安裝軟件包
$ npm install -g create-react-native-web-app
 
# 運行 create-react-native-web-app <項目目錄>
$ create-react-native-web-app myApp
 
# 切換到創建的 <項目目錄>
$ cd myApp
 
# 運行 Web/Ios/Android 調試
# Web
$ npm run web
 
# IOS（模擬）
$ npm run ios
 
# Android（實際連接的設備）
$ npm run android

為什么選擇 Create React App

• 使用配置包、轉碼器，以及測試運行器進行開發的一流工具
• 在應用架構里不需要配置以及沒有額外文件
• 確定的開發棧
• 高效快速的開發工具

2、Material Kit React

Material Kit React 是受谷歌的 Material Design 系統啟發開發的，很適合用來創建 React UI 組件。這個庫最大的優點是提供了大量的組件，可以互相搭配做出非常好的效果。有超過一千個完全編碼的組件，每一個都有用文件夾組織起來的獨立層。這樣你就可以有上千個選項可以選擇。它同時也包含一些示例頁面，方便你從中尋找靈感，或者向別人分享你的點子或創意。

安裝 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 組件不需要其他額外設置，也不會干擾全局變量空間。

優點

這個 React 組件支持簡易快速的網頁開發。你可以用它創建自己的設計系統，或者直接開始 Material Design。

3、Shards React

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

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

用 Yarn 或 NPM 安裝 Shards

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

優點

• Shards 是一個輕量級的腳本，壓縮后大概 13kb
• Shards 默認支持響應式，圖層可以適配任意大小屏幕
• Shards 有完整的文檔，可以快速開始構建漂亮的界面

4、Styled Components

這個高效的 CSS 工具可以用來為應用的可視界面創建小型可重用的組件。使用傳統的 CSS，你可能會不小心覆蓋掉網站其他位置的選擇器，但 Styled Components 通過使用直接內嵌到組件里的 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`;

優點

• 讓組件有更好的可讀性
• 組件樣式依賴 JavaScript
• 創建定制 CSS 組件
• 內嵌樣式
• 簡單地調用 styled() 可以將組件甚至是自定義組件轉換成樣式組件

5、Redux

Redux 是一個為 JavaScript 應用提供狀態管理的方案。常用于 React.js，也可以用在其他類 React 框架里。

安裝

sudo npm install redux
sudo 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;

優點

• 可預計的狀態更新有助于定義應用里的數據流
• 邏輯上測試更簡單，使用 reducer 函數進行時間旅行調試也更容易
• 統一管理狀態

6、React Virtualized

這個 React Native JavaScript 框架幫助渲染 large-list 和 tabular-data。使用 React Virtualized，你可以限制請求和文檔對象模型（DOM）元素的數量，從而提高 React 應用的性能。

安裝

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

優點

• 高效展示大量數據
• 渲染超大數據集
• 使用一系列組件實現虛擬渲染

7、React DnD

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

安裝

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>
    );
  }
}

優點

• 漂亮自然的控件移動
• 強大的鍵盤和屏幕閱讀支持
• 極限性能
• 強大整潔的接口
• 標準瀏覽器支持非常好
• 中性樣式
• 沒有額外創建 DOM 節點

8、React Bootstrap

這個 UI 庫將 Bootstrap 的 JavaScript 替換成了 React，可以更好地控制每個組件的功能。每個組件都構建成能輕易訪問，因此 React Bootstrap 有利于構建前端框架。有上千種 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();

優點

• 可以簡單導入所需的代碼/組件
• 通過壓縮 Bootstrap 節省了輸入和問題
• 通過壓縮 Bootstrap 減少了輸入工作和沖突
• 使用簡單
• 使用元素封裝

9、React Suite

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

安裝

npm i rsuite --save

使用

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

優點

• 通過全局訪問特性輕松管理應用
• 使用 Redux 庫集中管理系統狀態
• Redux 庫有靈活的 UI 層，以及廣泛的生態
• Redux 庫減少系統復雜度，并提供了全局訪問特性

10、PrimeReact

PrimeReact 最值得推薦的是它提供了幾乎覆蓋所有基本 UI 需求的組件，比如輸入選項，菜單，數據展示，消息，等等。這個框架還優化了移動體驗，幫助你設計觸摸優化的元素。

安裝

npm install primereact --save
npm 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"
}

優點

• 簡單而高效
• 容易使用
• Spring 應用
• 創建復雜用戶界面
• 好用而簡單

11、React Router

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

安裝

$ 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;

優點

• 動態路由匹配
• 在導航時支持不同頁面的 CSS 切換
• 統一的應用結構和行為

12、Grommet

Grommet 常用于開發響應式、可訪問的移動網頁應用。這個用 Apache 2.0 許可證授權的 JavaScript 框架最大的優點是用很小的包提供了可訪問性、模塊化、響應式以及主題功能。這可能是它被一些公司廣泛使用的主要原因，比如奈飛、通用電氣、優步以及波音。

安裝 for yarn and npm

$ npm install grommet styled-components --save

使用

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

優點

• 創建一個工具包來打包
• 把開放政策發揮到極致
• 重構有助于影響已成立的組織

13、Onsen UI

Onsen UI 另一個使用 HTML5 和 JavaScript 的手機應用開發框架，集成了 Angular、Vue 和 React，使用 Apache 2.0 許可證授權。

Onsen 提供了標簽、側邊欄、堆棧導航以及其他組件。這個框架最好的地方是，它所有的組件都支持 iOS 和安卓 Material Design 自動適配，會根據不同的平臺切換應用的外觀。

安裝

npm install onsenui

使用

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

優點

• Onsen UI 基于自由而開源代碼
• 不強制基于它開發的應用使用任何形式的 DRM
• 內置了 JavaScript 和 HTML5 代碼
• 給最終用戶帶來原生體驗

你最喜歡哪個 React JavaScript 框架？