十三個優秀的 React JavaScript 框架

語言: CN / TW / HK

如果你正在用 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

  1. 使用配置包、轉碼器,以及測試執行器進行開發的一流工具
  2. 在應用架構裡不需要配置以及沒有額外檔案
  3. 確定的開發棧
  4. 高效快速的開發工具

2、Material Kit React

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

安裝 Material Kit

$ npm [email protected]/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

優點

  1. Shards 是一個輕量級的指令碼,壓縮後大概 13kb
  2. Shards 預設支援響應式,圖層可以適配任意大小螢幕
  3. 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`;

優點

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;

優點

  1. 可預計的狀態更新有助於定義應用裡的資料流
  2. 邏輯上測試更簡單,使用 reducer 函式進行時間旅行除錯也更容易
  3. 統一管理狀態

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

優點

  1. 高效展示大量資料
  2. 渲染超大資料集
  3. 使用一系列元件實現虛擬渲染

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

優點

  1. 漂亮自然的控制元件移動
  2. 強大的鍵盤和螢幕閱讀支援
  3. 極限效能
  4. 強大整潔的介面
  5. 標準瀏覽器支援非常好
  6. 中性樣式
  7. 沒有額外建立 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();

優點

  1. 可以簡單匯入所需的程式碼/元件
  2. 通過壓縮 Bootstrap 節省了輸入和問題
  3. 通過壓縮 Bootstrap 減少了輸入工作和衝突
  4. 使用簡單
  5. 使用元素封裝

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

優點

  1. 通過全域性訪問特性輕鬆管理應用
  2. 使用 Redux 庫集中管理系統狀態
  3. Redux 庫有靈活的 UI 層,以及廣泛的生態
  4. 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"
}

優點

  1. 簡單而高效
  2. 容易使用
  3. Spring 應用
  4. 建立複雜使用者介面
  5. 好用而簡單

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;

優點

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

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

優點

  1. 建立一個工具包來打包
  2. 把開放政策發揮到極致
  3. 重構有助於影響已成立的組織

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

優點

  1. Onsen UI 基於自由而開原始碼
  2. 不強制基於它開發的應用使用任何形式的 DRM
  3. 內建了 JavaScript 和 HTML5 程式碼
  4. 給終端使用者帶來原生體驗

你最喜歡哪個 React JavaScript 框架?

【責任編輯:龐桂玉 TEL:(010)68476606】