当先锋百科网

首页 1 2 3 4 5 6 7

react ui框架_13个精选的React JS框架

834d7bc98e09eaac5fe9f70c96494b06.png 作者 | Amit Dua 译者 | 王强 策划 | 李俊辰 如果你正在使用 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 易于使用，让你省掉了手动设置和配置应用的麻烦，从而节省了大量时间和精力。

只需一条简单的命令，一切就都准备就绪，你就能轻松创建 React Native 项目了。你可以用它来构建目录和文件，该框架还包括用于构建、测试和发布应用程序的工具。 
# Install package $ npm install -g create-react-native-web-app # Run create-react-native-web-app  $ create-react-native-web-app myApp # cd into your  $ 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 受到了谷歌的 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 是基于 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 构建前端框架是很好用的。有成千上万的引导主题可供选择。

安装

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();
优点

  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>ButtonButton>, 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 和波音等公司广泛使用的主要原因之一。

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. 为终端用户提供原生体验。

延伸阅读

https://dzone.com/articles/13-of-the-best-react-javascript-frameworks

c0e569a26fc5f541832197700ad9fc19.gif