写点什么

13 个精选的 React JS 框架

  • 2020-03-27
  • 本文字数:4810 字

    阅读完需:约 16 分钟

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


延伸阅读


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


2020-03-27 14:2414284

评论 1 条评论

发布
用户头像
竟然没有Taro和ant design
2020-11-12 19:14
回复
没有更多了
发现更多内容

京东前端面试题

loveX001

JavaScript 前端

[极致用户体验] 在微信大字号模式下,网页样式乱了怎么办?

HullQin

CSS JavaScript html 前端 9月月更

数据治理(九):Atlas界面操作

Lansonli

数据治理 Atlas 9月月更

DDD领域驱动设计

源字节1号

软件开发 前端开发 后端开发 软件设计思想

SD-WAN网络可靠性设计

阿泽🧸

9月月更 网络可靠性设计

「工作小记」接口请求数据的缓存实践

叶一一

前端 设计思维 9月月更

剖析智能运维的五大应用场景

穿过生命散发芬芳

智能运维 9月月更

MVCC

急需上岸的小谢

9月月更

Linux系统安装MySQL

MySQL Centos 7 navicat 9月月更

C++学习------iso646.h与limits.h头文件的源码学习

桑榆

c++ 9月月更

小程序能否成为电商的突破口

Geek_99967b

小程序 小程序开发

2022-09-06:以下go语言代码输出什么?A:Hi All;B:Hi go All;C:Hi;D:go All。 package main import “fmt“ func app() f

福大大架构师每日一题

golang 福大大 选择题

SAP系统和微信集成的系列教程之二:如何通过微信公众号消费API

汪子熙

API 系统集成 SAP 微信开发 9月月更

边缘服务网格 osm-edge 数据平面基准测试

Flomesh

Service Mesh 服务网格

NFT商城开发——NFT数字收藏平台开发解决方案

开源直播系统源码

NFT 元宇宙 数字藏品 数字藏品开发

Java进阶(八)Java加密技术之对称加密、非对称加密、不可逆加密算法

No Silver Bullet

对称加密 非对称加密 9月月更 不可逆加密

《小米创业思考》之三:互联网七字诀

郭明

读书笔记

跟着卷卷龙一起学Camera--AWB

卷卷龙

ISP 9月月更

深入学习SAP UI5框架代码系列之四:HTML原生事件 VS UI5 Semantic事件

汪子熙

JavaScript SAP SAP UI5 ui5 9月月更

计算机网络——速率相关的性能指标

StackOverflow

计算机网络 编程‘ 9月月更

分布式中灰度方案实践

Java 架构

库调多了 都忘了最基础的概念-进程/线程篇

知识浅谈

9月月更 线程与进程

业务应用小程序化,一种潜在的技术趋势

Speedoooo

小程序 移动开发 小程序容器

LeetCode-21. 合并两个有序链表(java)

bug菌

9月日更 Leet Code 9月月更

在小程序中开启直播的解决方案

Geek_99967b

小程序容器 小程序开发

时代变了,企业网站应该这么策划内容

石头IT视角

深入学习SAP UI5框架代码系列之三:UI5 控件的渲染器

汪子熙

JavaScript 前端框架 SAP UI5 ui5 9月月更

SAP系统和微信集成的系列教程之一:微信开发环境的搭建

汪子熙

系统集成 SAP 微信开发 微信平台 9月月更

围绕“开源+深耕”策略和数字化监控手段,动态管理场景生态价值

易观分析

银行 易观 场景金融

你真的理解C语言的灵魂 “ 指针 ” 吗?(初阶篇)

Albert Edison

指针 C语言 野指针 9月月更

小程序容器技术加入到混合App开发队伍

Geek_99967b

小程序 混合开发

13个精选的 React JS 框架_大前端_Amit Dua_InfoQ精选文章