13 个最好的 React JavaScript 框架

如果你正在用 React.js 或 React Native 来开发用户界面的话,试试这些框架。

3

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 原生项目所需的一切。你可以用它来创建分类和文件,而且该框架还自带了工具用来构建,测试和启动应用。

# 安装软件包$ npm install -g create-react-native-web-app # 运行 create-react-native-web-app $ create-react-native-web-app myApp # 切换到创建的 $ cd myApp # 运行 Web/Ios/Android 调试# Web$ npm run web # IOS(模拟)$ npm run ios # Android(实际连接的设备)$ npm run android

为什么选择 Create React App

  1. 使用配置包、转码器,以及测试运行器进行开发的一流工具
  2. 应用架构里不需要配置以及没有额外文件
  3. 确定的开发栈
  4. 高效快速的开发工具

2、Material Kit React

Material Kit React是受谷歌的 Material Design 系统启发开发的,很适合用来创建 React UI 组件。这个库最大的优点是提供了大量的组件,可以互相搭配做出非常好的效果。有超过一千个完全编码的组件,每一个都有用文件夹组织起来的独立层。这样你就可以有上千个选项可以选择。它同时也包含一些示例页面,方便你从中寻找灵感,或者向别人分享你的点子或创意。

安装 Material Kit

$ npm install @material-ui/core

使用

import React from \'react\';import Button from \'@material-ui/core/Button\';const App = => (

Material-UI 组件不需要其他额外设置,也不会干扰全局变量空间。

优点

这个 React 组件支持简易快速的网页开发。你可以用它创建自己的设计系统,或者直接开始 Material Design

3、Shards react

这个现代的 React UI 工具为了追求高效率,是从最底层开始构建的。它拥有现代的设计系统,可以让你按自己的想法任意定制。你甚至可以下载源文件,然后从代码级别定制。另外,它用来设计样式的 SCSS 语法提高了开发体验。

Shards React基于 Shards,使用了 React Datepicker、React Popper(一个定位引擎)和 noUISlider。还带有非常优秀的 Material Design 图标。还有很多设计好的版本,可以帮你寻找灵感或上手。

用 Yarn 或 NPM 安装 Shards

# Yarnyarn add shards-react# NPMnpm i shards-react

优点

  1. Shards 是一个轻量级的脚本,压缩后大概 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 reduxsudo 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 框架帮助渲染 large-list 和 tabular-data。使用 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\', }, ...等等}

优点

  1. 高效展示大量数据
  2. 渲染超大数据集
  3. 使用一系列组件实现虚拟渲染

7、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

{itemType}

; }; class App extends React.Component { ... render { return (review generator={generatePreview} /> // or &ltreview>{generatePreview}

优点

  1. 漂亮自然的控件移动
  2. 强大的键盘和屏幕阅读支持
  3. 极限性能
  4. 强大整洁的接口
  5. 标准浏览器支持非常好
  6. 中性样式
  7. 没有额外创建 DOM 节点

8、React bootstrap

这个 UI 库将 Bootstrap 的 JavaScript 替换成了 React,可以更好地控制每个组件的功能。每个组件都构建成能轻易访问,因此 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(, 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(

优点

  1. 通过全局访问特性轻松管理应用
  2. 使用 Redux 库集中管理系统状态
  3. Redux 库有灵活的 UI 层,以及广泛的生态
  4. Redux 库减少系统复杂度,并提供了全局访问特性

10、PrimeReact

PrimeReact最值得推荐的是它提供了几乎覆盖所有基本 UI 需求的组件,比如输入选项,菜单,数据展示,消息,等等。这个框架还优化了移动体验,帮助你设计触摸优化的元素。

安装

npm install primereact --savenpm 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 开发社区很受欢迎,因为它上手很容易。只需要你在电脑上安装 Git 和 npm 包管理工具,有 React 的基础知识,以及好学的意愿。没什么特别难的地方。

安装

$ npm install --save react-Router

使用

import { Router, Route, Switch } from \"react-router\"; // 使用 CommonJS 模块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常用于开发响应式、可访问的移动网页应用。这个用 Apache 2.0 许可证授权的 JavaScript 框架最大的优点是用很小的包提供了可访问性、模块化、响应式以及主题功能。这可能是它被一些公司广泛使用的主要原因,比如奈飞、通用电气优步以及波音

安装 for yarn and 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 和安卓 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 框架?请在评论区分享。

via: https://opensource.com/article/20/1/react-javascript-frameworks

作者:Amit Dua选题:lujun9972译者:zpl1025校对:wxy

本文由 LCTT原创编译,Linux中国荣誉推出

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

(0)
上一篇 2023年4月28日 上午10:12
下一篇 2023年4月28日 上午10:22

相关推荐

  • 协同自动化办公系统

    协同自动化办公系统:提升工作效率的神器 随着现代办公方式的不断变革,协同自动化办公系统逐渐成为了现代企业必备的重要工具之一。协同自动化办公系统可以帮助企业更加高效地协同工作,提高员…

    科研百科 2024年8月25日
    41
  • 无代码一体化管理平台——人事档案管理系统(无代码是什么意思)

    对于员工人数较多的企业来说,人事档案信息非常庞大和复杂。传统纸质档案管理和excel管理方式非常耗时耗力,数据也容易出错,企业需要一个集中化的系统来有效管理员工档案信息,以取代传统…

    科研百科 2024年3月8日
    149
  • 怎样叫参与科研项目

    参与科研项目是一种挑战性但也很有趣的经历。在这个过程中,你将会学习到很多新的知识和技能,并且与一群志同道合的科学家一起工作,共同解决一个复杂的问题。 参与科研项目可以让你接触到最新…

    科研百科 2025年2月27日
    1
  • 留学付费科研项目推荐

    留学付费科研项目推荐 随着留学热的升温,越来越多的学生选择海外留学。留学不仅代表着一种语言能力和文化的开阔,同时也需要付出大量的经济代价和时间成本。为了让学生们能够在留学期间获得更…

    科研百科 2025年3月13日
    0
  • 强烈推荐15个超级涨知识的神级App(强烈推荐15个超级涨知识的神级App)

    推荐15个小众、有趣、又好玩的APP,每一个都是我精挑细选,用了之后你一定会大呼原来涨知识还能这么有趣!不光能将学习变成娱乐,还能化为谈资,再也不用担心接不上小伙伴的话啦! 1、西…

    科研百科 2022年7月29日
    392
  • 酒店信息管理系统项目

    酒店信息管理系统项目 随着旅游业的不断发展,酒店行业也越来越受到人们的关注。酒店信息管理系统是酒店行业的重要工具,可以帮助酒店更好地管理员工、客户、资产等信息,提高服务质量和效率。…

    科研百科 2025年1月22日
    0
  • 商丘市一刻钟便民生活圈试点建设方案(商丘一刻标识)

    发展目标 以社区为试点单元,采取“一社一圈、一圈一策”的方式,构建便民生活圈,打造便民服务链,提高民生满意度;以商业化逻辑扩大生活服务供给,发展流通新业态新模式,满足多元化市场需求…

    科研百科 2023年5月1日
    233
  • 科研项目在科委备案

    科研项目在科委备案 科研项目在科委备案是确保科研项目合法合规的重要步骤。备案的目的是确保科研项目符合当地的法律法规和政策,并保护科学研究的公正性和客观性。 在科委备案的科研项目需要…

    科研百科 2025年3月14日
    0
  • 免费远程控制软件的天花板-同时远程控制电脑和手机(远程控制电脑 免费)

    现代人对手机和电脑的终极需求是什么?就是能互相控制。电脑控制手机能做什么?我们需要利用电脑软件办公的时候、需要改ppt方案的时候还有玩游戏和追剧的时候,手机的小屏幕都无法满足这些需…

    科研百科 2024年4月28日
    81
  • 想退出科研项目

    想退出科研项目 最近我一直在思考是否要退出我的科研项目。这种感觉越来越强烈,因为我越来越感到不适合这个项目。 我开始觉得自己的热情被耗尽了。我已经不再像以前一样感兴趣,而是感到越来…

    科研百科 2025年2月27日
    1