13 个最佳 React JavaScript 框架

如果您正在使用 React.js 或 React Native 创建用户界面，请尝试这些框架。
172 位读者喜欢这个。
Javascript code close-up with neon graphic overlay
图片来源

摄影：Jen Wike Huger

React.js 和 React Native 是流行的开源平台，用于开发用户界面 (UI)；在 StackOverflow 2019 年开发者调查中，两者在期望度和使用率方面均名列前茅。React.js 由 Facebook 于 2011 年开发，作为一个 JavaScript 库，旨在解决对跨平台、动态和高性能 UI 的需求，而 React Native 由 Facebook 于 2015 年发布，用于使用 JavaScript 构建原生应用程序。

以下是 13 个最佳 React JavaScript 框架；所有框架都是开源的——前 11 个（如 React）根据 MIT 许可证获得许可，后两个根据 Apache 2.0 获得许可。

1. Create 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

  1. 使用配置捆绑器、转译器和测试运行器开发的一流工具
  2. 应用程序结构中没有配置，也没有额外的文件
  3. 固定的开发堆栈
  4. 高效的快速开发工具

2. Material Kit React

受 Google 的 Material Design 系统启发，Material Kit React 可能是构建 React UI 组件的绝佳选择。关于这个库最好的事情是它提供了许多旨在组合在一起并看起来令人难以置信的组件。有超过 1,000 个完全编码的组件，每个组件都带有组织在文件夹中的单独层。这意味着您有数千种选择。还有几个示例页面，以防您想获得灵感或与某人分享想法或概念。

安装 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

优势

  1. Shards 是轻量级的，占用空间小，缩小和 gzip 压缩后约为 13kb
  2. Shards 默认是响应式的，能够调整和重排其布局以适应任何屏幕尺寸
  3. 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;

优势

  1. 使组件更具可读性
  2. 组件依赖 JavaScript 来实现其样式
  3. 使用 CSS 构建自定义组件
  4. 内联样式
  5. 通过简单地调用 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;

优势

  1. 可预测的状态更新有助于定义应用程序的数据流
  2. 逻辑更易于测试，并通过 reducer 函数进行时间旅行调试
  3. 集中状态

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
}

优势

  1. 高效地显示大量数据
  2. 渲染庞大的数据集
  3. 使用一组组件实现虚拟渲染

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

优势

  1. 项目花束的美丽自然的运动
  2. 强大的键盘和屏幕阅读器支持轮椅
  3. 极其高性能
  4. 简洁而强大的 api
  5. 与标准浏览器交互良好配合
  6. 无倾向性样式
  7. 不创建额外的包装器 dom 节点

8. React Bootstrap

这个 UI Kit 库用 React 替换了 Bootstrap 的 JavaScript，让您可以更好地控制每个组件的功能。由于每个组件都旨在易于访问，因此 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(<App />, document.getElementById('root'));
registerServiceWorker();

优势

  1. 可以轻松导入所需的代码/组件
  2. 通过压缩 Bootstrap 来节省打字和错误
  3. 通过压缩 Bootstrap 来减少打字工作量和冲突
  4. 它易于使用
  5. 它封装在元素中

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

优势

  1. 借助全局访问功能轻松管理应用程序
  2. Redux 库集中状态管理
  3. Redux 对所有 UI 层都很灵活，并拥有庞大的生态系统
  4. 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"
}

优势

  1. 简洁性和性能
  2. 易于使用
  3. Spring 应用程序
  4. 创建丰富的用户界面
  5. 可用性和简洁性

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;

优势

  1. 动态路由匹配
  2. 导航时视图上的 CSS 过渡
  3. 标准化的应用程序结构和行为

12. Grommet

Grommet 用于创建响应式和可访问的移动优先 Web 应用程序。关于这个获得 Apache 2.0 许可的 JavaScript 框架，最好的事情是它在一个小包中提供了可访问性、模块化、响应性和主题化。这也许是 Netflix、GE、Uber 和 Boeing 等公司广泛使用它的主要原因之一。

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 是另一个移动应用程序开发框架，它使用 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. 为最终用户提供原生体验

您最喜欢的 React JavaScript 框架是什么？请在评论中分享。

接下来阅读什么
标签
JavaScript
编程
Amit Dua
User profile image.
Signity Solutions 和 Your Team in India 的 CEO
更多关于我

1 条评论

Avatar
Anh88 | 2020 年 2 月 25 日
还没有读者喜欢这个。

有用的文章。谢谢。

相关内容

Creative Commons License本作品根据知识共享署名-相同方式共享 4.0 国际许可协议获得许可。
© . All rights reserved.