必須收藏！這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（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

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

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

優勢

1. Shards是輕量化設計的，體積很小，gzip壓縮最小化後只有大約13kb
2. Shards天生就是響應設計，因此其佈局能夠適應任何屏幕尺寸，針對不一樣的顯示大小重排版內容。
3. 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;

優勢

1. 使組件更具可讀性。
2. 組件的樣式依賴於JavaScript。
3. 使用CSS構建自定義組件。
4. 內聯樣式。
5. 只需調用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;

優勢

1. 可預測的狀態更新有助於定義應用程序的數據流。
2. 有了reducer函數，邏輯更易於測試和時間旅行調試。
3. 狀態集中管理。

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 }

優勢

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

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

優勢

1. 元素拖動優雅天然。
2. 強大的鍵盤和屏幕閱讀器支持。
3. 性能出色。
4. 乾淨而強大的API。
5. 在標準的瀏覽器交互中發揮出色。
6. 未經修飾的樣式。
7. 沒有建立額外的包裝器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();

優勢

1. 能夠輕鬆導入所需的代碼/組件。
2. 經過壓縮Bootstrap來節省代碼、減小錯誤。
3. 經過壓縮Bootstrap減小輸入工做和衝突。
4. 用起來很簡單。
5. 它封裝在元素中。

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

優勢

1. 藉助全局訪問功能，輕鬆管理應用程序。
2. Redux庫集中了狀態管理操做。
3. Redux很靈活，它有全部的UI層，並有着龐大的生態系統。
4. 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" }

優勢

1. 簡單性和性能。
2. 使用方便。
3. Spring應用程序。
4. 建立豐富的用戶界面。
5. 可用性和簡單性。

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;

優勢

1. 動態路由匹配
2. 跳轉時視圖上的CSS過渡效果
3. 標準化的應用結構和行爲

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

優勢

1. 一個工具包一站式解決方案
2. 將開放政策發揮到極致
3. 重構過程對發展中的組織有益

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

優勢

1. Onsen UI的代碼免費且開源。
2. 它不要求用它開發的應用強制使用任何類型的DRM。
3. 編譯JavaScript和HTML5代碼。
4. 爲終端用戶提供原生體驗。

結尾

本期就分享到這裏，我是小編南風吹，專一分享好玩有趣、新奇、實用的開源項目及開發者工具、學習資源！ 但願能與你們共同窗習交流,歡迎關注個人公衆號 【Github導航站】。

往期推薦

3000多人訪問一個html文件，多少寬帶才足夠支撐

程序員接私活必備後臺框架，不用重複造輪子，網友：太好用了！

還在從頭至尾擼項目？這6個SpringBoot項目用好了，事半功倍！

厲害了,這款程序員代碼補全工具，讓你的編程效率飛起來！