建站
咨詢
售后
建站咨詢
新聞中心
如果你正在用 React.js 或 React Native 來開發(fā)用戶界面的話，試試這些框架。
React.js 和 React Native 都是用來開發(fā)用戶界面（UI）的很受歡迎的開源平臺。在 StackOverflow 2019 年度開發(fā)者調查里，兩個框架的可取性和使用情況都排名靠前。React.js 是 Facebook 在 2011 年開發(fā)的一個 JavaScript 庫，來實現(xiàn)跨平臺，動態(tài)以及高性能的 UI 設計需求；而 React Native 則是 Facebook 在 2015 年發(fā)布的框架，目的是使用 JavaScript 構建原生應用。
下面介紹 13 個最好的 React JavaScript 框架，都是開源項目。前 11 個（和 React 一樣）都使用 MIT 許可證授權，后面兩個使用 Apache 2.0 許可證。
1、Create React App
這個 Facebook 開發(fā)的命令行工具是 React Native 項目一定要用的。因為 Create React App 使用很簡單，還可以避免你自己手動設定和配置應用，因此能節(jié)省大量的時間和精力。僅僅使用給一個簡單的命令，就可以為你準備好創(chuàng)建 React 原生項目所需的一切。你可以用它來創(chuàng)建分類和文件，而且該框架還自帶了工具用來構建，測試和啟動應用。
# 安裝軟件包$ npm install -g create-react-native-web-app# 運行 create-react-native-web-app <項目目錄>$ create-react-native-web-app myApp# 切換到創(chuàng)建的 <項目目錄>$ cd myApp# 運行 Web/Ios/Android 調試# Web$ npm run web# IOS（模擬）$ npm run ios# Android（實際連接的設備）$ npm run android
為什么選擇 Create React App
- 使用配置包、轉碼器，以及測試運行器進行開發(fā)的一流工具
- 在應用架構里不需要配置以及沒有額外文件
- 確定的開發(fā)棧
- 高效快速的開發(fā)工具
2、Material Kit React
Material Kit React 是受谷歌的 Material Design 系統(tǒng)啟發(fā)開發(fā)的，很適合用來創(chuàng)建 React UI 組件。這個庫最大的優(yōu)點是提供了大量的組件，可以互相搭配做出非常好的效果。有超過一千個完全編碼的組件，每一個都有用文件夾組織起來的獨立層。這樣你就可以有上千個選項可以選擇。它同時也包含一些示例頁面，方便你從中尋找靈感，或者向別人分享你的點子或創(chuàng)意。
安裝 Material Kit
$ npm install @material-ui/core
使用
import React from 'react';import Button from '@material-ui/core/Button';const App = () => (Hello World);
Material-UI 組件不需要其他額外設置，也不會干擾全局變量空間。
優(yōu)點
這個 React 組件支持簡易快速的網(wǎng)頁開發(fā)。你可以用它創(chuàng)建自己的設計系統(tǒng)，或者直接開始 Material Design。
3、Shards React
這個現(xiàn)代的 React UI 工具為了追求高效率，是從最底層開始構建的。它擁有現(xiàn)代的設計系統(tǒng)，可以讓你按自己的想法任意定制。你甚至可以下載源文件，然后從代碼級別定制。另外，它用來設計樣式的 SCSS 語法提高了開發(fā)體驗。
Shards React 基于 Shards，使用了 React Datepicker、React Popper（一個定位引擎）和 noUISlider。還帶有非常優(yōu)秀的 Material Design 圖標。還有很多設計好的版本，可以幫你尋找靈感或上手。
用 Yarn 或 NPM 安裝 Shards
# Yarnyarn add shards-react# NPMnpm i shards-react
優(yōu)點
- Shards 是一個輕量級的腳本，壓縮后大概 13kb
- Shards 默認支持響應式，圖層可以適配任意大小屏幕
- Shards 有完整的文檔，可以快速開始構建漂亮的界面
4、Styled Components
這個高效的 CSS 工具可以用來為應用的可視界面創(chuàng)建小型可重用的組件。使用傳統(tǒng)的 CSS，你可能會不小心覆蓋掉網(wǎng)站其他位置的選擇器，但 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`;
優(yōu)點
- 讓組件有更好的可讀性
- 組件樣式依賴 JavaScript
- 創(chuàng)建定制 CSS 組件
- 內嵌樣式
- 簡單地調用
styled()可以將組件甚至是自定義組件轉換成樣式組件
5、Redux
Redux 是一個為 JavaScript 應用提供狀態(tài)管理的方案。常用于 React.js，也可以用在其他類 React 框架里。
安裝
sudo npm install reduxsudo 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;
優(yōu)點
- 可預計的狀態(tài)更新有助于定義應用里的數(shù)據(jù)流
- 邏輯上測試更簡單，使用 reducer 函數(shù)進行時間旅行調試也更容易
- 統(tǒng)一管理狀態(tài)
6、React Virtualized
這個 React Native JavaScript 框架幫助渲染 large-list 和 tabular-data。使用 React Virtualized，你可以限制請求和文檔對象模型（DOM）元素的數(shù)量，從而提高 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',},...等等}
優(yōu)點
- 高效展示大量數(shù)據(jù)
- 渲染超大數(shù)據(jù)集
- 使用一系列組件實現(xiàn)虛擬渲染
7、React DnD
React DnD 用來創(chuàng)建復雜的拖放界面。拖放控件庫有很多，選用 React DnD 是因為它是基于 HTML5 的拖放 API 的，創(chuàng)建界面更簡單。
安裝
npm install react-dnd-preview
使用
import Preview from 'react-dnd-preview';const generatePreview = ({itemType, item, style}) => {return{itemType};};class App extends React.Component {...render() {return (// or{generatePreview} );}}
優(yōu)點
- 漂亮自然的控件移動
- 強大的鍵盤和屏幕閱讀支持
- 極限性能
- 強大整潔的接口
- 標準瀏覽器支持非常好
- 中性樣式
- 沒有額外創(chuàng)建 DOM 節(jié)點
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(, document.getElementById('root')); registerServiceWorker();
優(yōu)點
- 可以簡單導入所需的代碼/組件
- 通過壓縮 Bootstrap 節(jié)省了輸入和問題
- 通過壓縮 Bootstrap 減少了輸入工作和沖突
- 使用簡單
- 使用元素封裝
9、React Suite
React Suite 是另一個高效的 React.js 框架，包含了大量組件庫，方便開發(fā)企業(yè)級產品。支持所有主流瀏覽器和平臺，適用于任何系統(tǒng)。還支持服務器端渲染。
安裝
npm i rsuite --save
使用
import { Button } from 'rsuite';import 'rsuite/styles/less/index.less';ReactDOM.render(, mountNode);
優(yōu)點
- 通過全局訪問特性輕松管理應用
- 使用 Redux 庫集中管理系統(tǒng)狀態(tài)
- Redux 庫有靈活的 UI 層，以及廣泛的生態(tài)
- Redux 庫減少系統(tǒng)復雜度，并提供了全局訪問特性
10、PrimeReact
PrimeReact 最值得推薦的是它提供了幾乎覆蓋所有基本 UI 需求的組件，比如輸入選項，菜單，數(shù)據(jù)展示，消息，等等。這個框架還優(yōu)化了移動體驗，幫助你設計觸摸優(yōu)化的元素。
安裝
npm install primereact --savenpm 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"}
優(yōu)點
- 簡單而高效
- 容易使用
- Spring 應用
- 創(chuàng)建復雜用戶界面
- 好用而簡單
11、React Router
React Router 在 React Native 開發(fā)社區(qū)很受歡迎，因為它上手很容易。只需要你在電腦上安裝 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;
優(yōu)點
- 動態(tài)路由匹配
- 在導航時支持不同頁面的 CSS 切換
- 統(tǒng)一的應用結構和行為
12、Grommet
Grommet 常用于開發(fā)響應式、可訪問的移動網(wǎng)頁應用。這個用 Apache 2.0 許可證授權的 JavaScript 框架最大的優(yōu)點是用很小的包提供了可訪問性、模塊化、響應式以及主題功能。這可能是它被一些公司廣泛使用的主要原因，比如奈飛、通用電氣、優(yōu)步以及波音。
安裝 for yarn and npm
$ npm install grommet styled-components --save
使用
"grommet-controls/chartjs": {"transform": "grommet-controls/es6/chartjs/${member}","preventFullImport": true,"skipDefaultConversion": true
優(yōu)點
- 創(chuàng)建一個工具包來打包
- 把開放政策發(fā)揮到極致
- 重構有助于影響已成立的組織
13、Onsen UI
Onsen UI 另一個使用 HTML5 和 JavaScript 的手機應用開發(fā)框架，集成了 Angular、Vue 和 React，使用 Apache 2.0 許可證授權。
Onsen 提供了標簽、側邊欄、堆棧導航以及其他組件。這個框架最好的地方是，它所有的組件都支持 iOS 和安卓 Material Design 自動適配，會根據(jù)不同的平臺切換應用的外觀。
安裝
npm install onsenui
使用
(function() {'use strict';var module = angular.module('app', ['onsen']);module.controller('AppController', function($scope) {// more to come here});})();
優(yōu)點
- Onsen UI 基于自由而開源代碼
- 不強制基于它開發(fā)的應用使用任何形式的 DRM
- 內置了 JavaScript 和 HTML5 代碼
- 給最終用戶帶來原生體驗
你最喜歡哪個 React JavaScript 框架？
當前文章：十三個優(yōu)秀的ReactJavaScript框架
文章鏈接：http://fisionsoft.com.cn/article/cdjpjdc.html
