必須收藏!這13個優秀React JS框架,沒用過就很離譜!
技術標籤:reactjs
如果你正在使用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(https://github.com/facebook/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(https://github.com/creativetimofficial/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(https://github.com/DesignRevision/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(https://github.com/styled-components/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(https://github.com/reduxjs/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函式,邏輯更易於測試和時間旅行除錯。
- 狀態集中管理。
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片儲存下來直接上傳(img-caEc9zgG-1608259616695)(https://gitee.com/goutouaa/pic/raw/master/image/20201218103522.png)]
6.React Virtualized
這個React Native JavaScript框架可用於大列表和表格資料的渲染。使用React Virtualized(https://github.com/bvaughn/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(https://github.com/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> ); } }
優點
- 元素拖動優雅自然。
- 強大的鍵盤和螢幕閱讀器支援。
- 效能出色。
- 乾淨而強大的API。
- 在標準的瀏覽器互動中發揮出色。
- 未經修飾的樣式。
- 沒有建立額外的包裝器dom節點。
8.React Bootstrap
這款UI Kit庫用React替換了Bootstrap的JavaScript,讓你可以更好地控制每個元件的函式。因為每個元件都用易於訪問的方式構建,所以用React Bootstrap(https://github.com/react-bootstrap/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(https://github.com/rsuite/rsuite)是又一款高效的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(https://github.com/primefaces/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(https://github.com/ReactTraining/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(https://github.com/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(https://github.com/OnsenUI/OnsenUI)是另一個使用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程式碼。
- 為終端使用者提供原生體驗。
結尾
本期就分享到這裡,我是小編南風吹,專注分享好玩有趣、新奇、實用的開源專案及開發者工具、學習資源!
希望能與大家共同學習交流,歡迎關注我的公眾號**【Github導航站】**。
往期推薦
程式設計師接私活必備後臺框架,不用重複造輪子,網友:太好用了!