13個精選的React JS框架

如果你正在使用 React.js 或 React Native 創建用戶介面，可以試一試本文推薦的這些框架。

React.js 和 React Native 是流行的用戶介面（UI）開發平台，且都是開源技術。在 StackOverflow 的 2019 年開發人員調查中，它們在期望度和使用率方面都有很高的排名。React.js 是 Facebook 在 2011 年作為一個 JavaScript 庫開發而成的，目的是滿足跨平台、動態和高性能 UI 的需求；而 Facebook 在 2015 年發布的 React Native 則是用來基於 JavaScript 構建原生應用程式的。

下面列舉了 13 個精選的 React JavaScript 框架，它們全都是開源的。前 11 個（就像 React 那樣）是根據 MIT 許可授權的，後兩個則是根據 Apache 2.0 授權。

1.Creat React App

這款由 Facebook 開發人員帶來的命令行介面是所有 React Native 項目的必備框架。因為 Create React App 易於使用，讓你省掉了手動設置和配置應用的麻煩，從而節省了大量時間和精力。

只需一條簡單的命令，一切就都準備就緒，你就能輕鬆創建 React Native 項目了。你可以用它來構建目錄和文件，該框架還包括用於構建、測試和發布應用程式的工具。

# Install package $ npm install -g create-react-native-web-app # Run create-react-native-web-app <project-directory> $ create-react-native-web-app myApp # cd into your <project-directory> $ cd myApp # Run Web/Ios/Android development # Web $ npm run web # IOS (simulator) $ npm run ios # Android (connected device) $ npm run android

為什麼選擇 Create React App

  • 帶有配置包、轉譯器和測試器的一流開發工具
  • 應用結構中沒有配置，也沒有多餘的文件。
  • 穩固的開發棧。
  • 行之有效的快速開發工具。

2.Material Kit React

Material Kit React 受到了Google的 Material Design 系統啟發，是構建 React UI 組件的絕佳選擇。這個庫最大的優點是它提供了許多組件，這些組件可以組合在一起生成難以置信的效果。庫中有超過 1000 個完全編碼的組件，每個組件都有單獨的層，這些層都在文件夾中分門別類組織好了。這意味著你有著成千上萬種選擇。如果你想獲取靈感，或與某人分享想法或概念，也有幾個示例頁面可用。

安裝 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 組件可以支援更輕鬆、更快速的 Web 開發流程。有了它，你可以構建自己的設計系統，或者先從 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 是輕量化設計的，體積很小，gzip 壓縮最小化後只有大約 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 框架可用於大列表和表格數據的渲染。使用 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', }, ...rest }

優點

  • 高效顯示大量數據。
  • 渲染巨大的數據集。
  • 使用一組組件實現虛擬渲染。

7.React DnD

ReactDnD 負責創建複雜的拖放介面。市面上的拖放庫有幾十種之多，但 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> ); } }

優點

  • 元素拖動優雅自然。
  • 強大的鍵盤和螢幕閱讀器支援。
  • 性能出色。
  • 乾淨而強大的 API。
  • 在標準的瀏覽器交互中發揮出色。
  • 未經修飾的樣式。
  • 沒有創建額外的包裝器 dom 節點。

8.React Bootstrap

這款 UI Kit 庫用 React 替換了 Bootstrap 的 JavaScript，讓你可以更好地控制每個組件的函數。因為每個組件都用易於訪問的方式構建，所以用 React 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 開發人員社區中非常流行，因為它很容易上手。你只需要在 PC 上安裝 Git 和 npm 軟體包管理器，有一些 React 的基本知識以及學習的意願即可。沒有什麼太複雜的。

安裝

$ npm install --save react-router

實現

import { Router, Route, Switch } from "react-router"; // using CommonJS modules var Router = require("react-router").Router; var Route = require("react-router").Route; var Switch = require("react-router").Switch;

優點

  • 動態路由匹配。
  • 跳轉時視圖上的 CSS 過渡效果。
  • 標準化的應用結構和行為。

12.Grommet

Grommet 是用來創建可響應且可訪問的移動優先 Web 應用的。它是 Apache 2.0 許可的 JavaScript 框架，其最大優勢是它在一個小包中同時提供了可訪問性、模組化、響應性和主題特性。也許這就是它被 Netflix、GE、Uber 和波音等公司廣泛使用的主要原因之一。

Yarn 和 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 和 Android 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 程式碼。
  • 為終端用戶提供原生體驗。

VirMach 便宜 VPS

QNews

QNews