13 个精选的 React JS 框架

# Install package $ npm install -gcreate-react-native-web-app  #Runcreate-react-native-web-app  $ create-react-native-web-appmyApp   #cdinto your  $cdmyApp   #RunWeb/Ios/Android development # Web $ npmrunweb   # IOS (simulator) $ npmrunios   # Android (connected device) $ npmrunandroid

$npminstall @material-ui/core

importReactfrom'react';importButtonfrom'@material-ui/core/Button';constApp =()=>(      Hello World  );

# Yarn yarn add shards-react # NPM npm i shards-react

npm install --savestyled-components

const Button = styled.button`  background:background_type;   border-radius:radius_value;  border:abc;  color:name_of_color;  Margin:margin_value;  padding:value;

sudo npminstallredux sudo npminstallreact-redux

import { createStore }from"redux"; import rotateReducerfrom"reducers/rotateReducer"; function configureStore(state = { rotating: value}) {   return createStore(rotateReducer,state); }exportdefaultconfigureStore;

npminstallreact-virtualized

import'react-virtualized/styles.css'import{ Column, Table }from'react-virtualized'importAutoSizerfrom'react-virtualized/dist/commonjs/AutoSizer'importListfrom'react-virtualized/dist/commonjs/List'{   alias: {    'react-virtualized/List':'react-virtualized/dist/es/List',   },   ...rest }

npminstallreact-dnd-preview

importPreviewfrom'react-dnd-preview';    constgeneratePreview =({itemType, item, style}) =>{    return{itemType}

优点

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
）构建前端框架是很好用的。有成千上万的引导主题可供选择。

安装

    <span></span>

复制代码

npminstallreact-bootstrapbootstrap

<h4>实现</h4>

    <span></span>

复制代码

import 'bootstrap/dist/css/bootstrap.min.css';import Reactfrom 'react';import ReactDOMfrom 'react-dom';import './index.css';import Appfrom './App';import registerServiceWorkerfrom './registerServiceWorker'; ReactDOM.render(, document.getElementById('root')); registerServiceWorker();

<h4>优点</h4>
<ol><li>可以轻松导入所需的代码 / 组件。</li>
    <li>通过压缩 Bootstrap 来节省代码、减少错误。</li>
    <li>通过压缩 Bootstrap 减少输入工作和冲突。</li>
    <li>用起来很简单。</li>
    <li>它封装在元素中。</li>
</ol><h2>9.React Suite</h2>

React Suite（ https://github.com/rsuite/rsuite
）是又一款高效的 React.js 框架，其中包含用于企业系统产品的多种组件库。它支持所有主流浏览器和平台，使其适用于几乎任何系统。它还支持服务端渲染。

安装

    <span></span>

复制代码

npm i rsuite--save

<h4>实现</h4>

    <span></span>

复制代码

import { Button } from 'rsuite';import 'rsuite/styles/less/index.less'; ReactDOM.render(Button, mountNode);

<h4>优点</h4>
<ol><li>借助全局访问功能，轻松管理应用程序。</li>
    <li>Redux 库集中了状态管理操作。</li>
    <li>Redux 很灵活，它有所有的 UI 层，并有着庞大的生态系统。</li>
    <li>Redux 降低了复杂性，并提供了全局可访问性。</li>
</ol><h2>10.PrimeReact</h2>

PrimeReact（ https://github.com/primefaces/primereact
）的最大优势在于，它提供的组件几乎可以满足 UI 的所有基本要求，例如输入选项、菜单、数据表示和消息等。这款框架还非常重视移动体验，可以帮助你设计为触控优化的元素。

安装

    <span></span>

复制代码

npminstallprimereact--savenpminstallprimeicons--save

<h4>实现</h4>

    <span></span>

复制代码

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"}

<h4>优点</h4>
<ol><li>简单性和性能。</li>
    <li>使用方便。</li>
    <li>Spring 应用程序。</li>
    <li>创建丰富的用户界面。</li>
    <li>可用性和简单性。</li>
</ol><h2>11.React Router</h2>

React Router（ https://github.com/ReactTraining/react-router
）在 React Native 开发人员社区中非常流行，因为它很容易上手。你只需要在 PC 上安装 Git 和 npm 软件包管理器，有一些 React 的基本知识以及学习的意愿即可。没有什么太复杂的。

安装

    <span></span>

复制代码

$ npminstall--save react-router

<h4>实现</h4>

    <span></span>

复制代码

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

<h4>优点</h4>
<ol><li>动态路由匹配</li>
    <li>跳转时视图上的 CSS 过渡效果</li>
    <li>标准化的应用结构和行为</li>
</ol><h2>12.Grommet</h2>

Grommet（ https://github.com/grommet/grommet
）是用来创建可响应且可访问的移动优先 Web 应用的。它是 Apache 2.0 许可的 JavaScript 框架，其最大优势是它在一个小包中同时提供了可访问性、模块化、响应性和主题特性。也许这就是它被 Netflix、GE、Uber 和波音等公司广泛使用的主要原因之一。

Yarn 和 npm 的安装

    <span></span>

复制代码

$ npm install grommet styled-components--save

<h4>实现</h4>

    <span></span>

复制代码

"grommet-controls/chartjs": {          "transform":"grommet-controls/es6/chartjs/${member}",          "preventFullImport":true,          "skipDefaultConversion":true

<h4>优点</h4>
<ol><li>一个工具包一站式解决方案</li>
    <li>将开放政策发挥到极致</li>
    <li>重构过程对发展中的组织有益</li>
</ol><h2>13.Onsen UI</h2>

Onsen UI（ https://github.com/OnsenUI/OnsenUI
）是另一个使用 HTML5 和 JavaScript 的移动应用开发框架，并提供与 Angular、Vue 和 React 的集成。它的许可基于 Apache 2.0。
Onsen 提供一些选项卡、一个侧面菜单、堆栈导航和其他组件。这款框架的最大优势是，它的所有组件都具有 iOS 和 Android Material Design 支持以及自动样式，这样就能根据平台改变应用程序的外观。

安装

    <span></span>

复制代码

npminstallonsenui

<h4>实现</h4>

    <span></span>

复制代码

(function(){    'use strict';    varmodule= angular.module('app', ['onsen']);    module.controller('AppController',function($scope){      // more to come here     }); })();

<h4>优点</h4>
<ol><li>Onsen UI 的代码免费且开源。</li>
    <li>它不要求用它开发的应用强制使用任何类型的 DRM。</li>
    <li>编译 JavaScript 和 HTML5 代码。</li>
    <li>为终端用户提供原生体验。</li>
</ol><h4>延伸阅读</h4>

    <a href="https://dzone.com/articles/13-of-the-best-react-javascript-frameworks" rel="nofollow,noindex" target="_blank">https://dzone.com/articles/13-of-the-best-react-javascript-frameworks</a>