React JS框架有哪些

本篇內容主要講解“React JS框架有哪些”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“React JS框架有哪些”吧!

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 受到了谷歌的 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 代碼。

• 為終端用戶提供原生體驗。

到此，相信大家對“React JS框架有哪些”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！