react用什么ui组件库

react可用ui组件库有:1、Material-UI,有用于布局、表单、导航、数据显示和许多其他小部件的组件;2、Ant Design,有60多个组件,带有可预测的静态类型;3、Blueprint,有40多个组件;4、React Bootstrap,提供了与大量已经存在的Bootstrap主题的完全兼容性;5、Onsen UI,提供选项卡、边菜单、堆栈导航、列表、表单等组件。

react用什么ui组件库

本教程操作环境:Windows7系统、react18版、Dell G3电脑。

react的组件库

1、Material-UI

1.jpg

Material-UI是GitHub上最流行而常用的React组件库。它简单,重量轻,并根据谷歌的Material-UI规格建造。有用于布局、表单、导航、数据显示和许多其他小部件的组件。

你可以使用@material-ui/styles来为你的组件设计样式,这是一个快速、可扩展的CSS-in-JS解决方案,并且具有与样式化组件相同的优点。Material-UI也可以与其他主要的样式解决方案互操作,所以您不必使用它的样式。

2、蚂蚁设计(Ant Design)

Ant Design是一家拥有React库的中国公司,该库专为大公司的web应用程序设计。例如腾讯、阿里巴巴和百度。这个库有60多个组件,是用TypeScript编写的,带有可预测的静态类型。它的中英文文档简洁、文笔优美、内容全面。

但是Ant Design不仅仅是一个React UI库。它是一个围绕成长、意义、确定性和自然的价值建立起来的整个设计系统。看看他们的资源Figma UI套件,登陆页面模板,一个草图插件,和更多,它是我们常用的React组件库。

3、Blueprint

3.jpg

作为一个常用的React组件库,Blueprint提供丰富而流行的组件。Blueprint是一个React UI库,由美国大数据分析科技公司Palantir开发。他们的React库有40多个组件,特别针对桌面应用程序的复杂数据密集接口进行了优化。

Blueprint是用TypeScript编写的,它们文档中的所有代码示例也是如此。该库支持Chrome、Firefox、Safari、IE 11和Microsoft Edge。IE10及以下版本由于缺乏对CSS flex布局的支持而不受支持。

4、React Bootstrap

React Bootstrap作为Bootstrap JavaScript的替代品。每个组件都是作为真正的React组件构建的,所以不需要依赖jQuery。React Bootstrap是最古老的React库之一,并随着React本身稳步增长,由于使用Bootstrap有一大批老用户,所以React Bootstrap也是一个较为常用的React组件库。

Bootstrap的网格系统意味着你的布局将拥有完全响应的一系列容器、行和列。你可以在数十个组件之间进行选择,包括徽章、旋转木马、toast和超大屏幕。

它提供了与大量已经存在的 Bootstrap 主题的完全兼容性,以及一长串对每个主题都具有总权力的组件。React Bootstrap 将状态更新为虚拟 DOM,借助将 Bootstrap 的功能整合到 React 的虚拟 DOM 中,这是一种更稳定的开发解决方案。

5、Onsen UI

5.jpg

Onsen UI是一个常用的Reac组件t库,旨在构建HTML5和移动网页应用。它的组件包括选项卡、边菜单、堆栈导航、列表、表单等。所有的组件都支持iOS和Android的材质设计,并根据平台自动改变应用程序的外观。

在它的内部,Onsen由三层组成: 用cssnext编写的CSS组件,用原生JavaScript编写的web组件,易于与React集成的框架绑定,还有Vue和Angular。

6、Grommet

7.jpg

Grommet是一个为响应性、可访问性和移动优先的web项目设计的组件库。它包含了原子设计方法,并允许键盘导航、屏幕阅读器标签等。它甚至有一个svg图标列表。

包括Netflix、Uber、波音、惠普、三星和Twilio在内的许多大公司都使用Grommet来设计他们的web应用程序。如果你想让你的设计感觉不那么“Googly”,看看Grommet的组件。,它是一个出色而常用的React组件库,其组件非常好看。

7、Gestalt

8.jpg

Gestalt是一组React UI组件,它强化了Pinterest的设计语言。它的目的是创建一个设计最佳实践的共享库。该库支持从右到左、国际化和暗模式。

由于它的自动设计和代码更新跨平台运行,Gestalt的维护相对较低。当一个发布会导致破坏性的更改时——在用法或输入方面——它会提供一个codemod来简化升级过程。

8、Semantic UI React

9.jpg

React是官方的Semantic UI插件。它与jquery无关,并且具有声明性API、简化道具、子组件、扩展、自动控制状态等等。该库拥有超过50个组件的集合,包括片段、进度条、过渡、分页等。

Semantic UI React提供组件,而Semantic UI以CSS样式表的形式提供主题。你也可以使用 而不是 . 本人比较喜欢Semantic UI,有过一些使用经验,Semantic UI React也作为一个相对常用的React组件库。

9、Rebass

10.jpg

Rebass是一个原始组件库,也是一个常用的React组件库,由Brent Jackson用样式系统构建。它是为了创建一个具有设计约束和用户定义规模的一致UI而构建的。Rebass的占用空间只有4KB,这意味着快速的设计和开发。

Rebass希望通过一流的主题化支持和与Theme UI的兼容性,实现最小、有用、无约束、可扩展和主题化。

10、React Virtualized

React Virtualized 在独特的 React 组件库中,专注于任何 UI 的特定方面,在大多数情况下渲染表格相当容易。借助 React Virtualized,Web 开发人员可以通过使用列表、表格、网格、集合等组件轻松渲染大量数据,可以使用它来创建更加用户友好的表格。React Virtualized 已经有一个完整的指令序列来进行设置。

11、Blueprint UI React

Blueprint UI React 组件框架与所有新的数据密集型桌面和 Web 应用程序的 UI 开发路径相同。它是一个基于 React 的 UI 工具包,专为桌面应用程序创建复杂的数据密集界面而设计。这是一个很棒的 UI 包,它旨在为所有组件提供开箱即用的可用性标准,并让你可以访问明暗主题模式。

12、React Toolbox

React Toolbox 是一系列执行 Google Material Design 要求的 React 组件。它基于一些最常见的提议,例如 CSS Modules(用 SASS 编写)、Webpack 和 ES6。该库与你的 Web 包的工作流程紧密结合,完全可配置且用途广泛。

它提供了很多组件,例如按钮、卡片、日期选择器、对话和其他常用元素。使 Web 开发人员能够构建令人惊叹的 Web 应用程序,该库还包含全面的文档。

【相关推荐:Redis视频教程】

以上就是react用什么ui组件库的详细内容,更多请关注【创想鸟】其它相关文章!

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

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2927920.html

(0)
上一篇 2025年3月11日 19:30:17
下一篇 2025年3月3日 21:41:25

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • react为什么要用合成事件

    react使用合成事件主要有三个目的:1、进行浏览器兼容,实现更好的跨平台;React提供的合成事件可用来抹平不同浏览器事件对象之间的差异,将不同平台事件模拟合成事件。2、避免垃圾回收;React事件对象不会被释放掉,而是存放进一个数组中,…

    2025年3月11日 编程技术
    200
  • react.js是用es6写的吗

    react.js是用es6写的,可以用Babel转译为ES5,也可以用Babel转译为JavaScript的JSX;由于React的设计思想极其独特,属于革命性创新,性能出众,代码逻辑却非常简单。使用ES6来创建组件的语法更加简洁,这种语法…

    2025年3月11日
    200
  • react是不是Spa

    react是Spa模式,即组件嵌套,其主要的传参方式有:1、在挂载的地方给组件传参;2、父子传参,即用props或ref方式传参;3、子父传参,即子组件通过触发父组件的方法来改变父组件的状态;4、兄弟传参,即通过改变公有组件的状态进而改变子…

    2025年3月11日
    200
  • ie无法识别react怎么办

    ie无法识别react的解决办法:1、安装“react-app-polyfill”,并在“src/main.js”中引入;2、在“babel.config.js”中配置参数;3、在“vue.config.js”中配置“transpileDe…

    2025年3月11日 编程技术
    200
  • react更新state方法有哪些

    react更新state方法有:1、通过key变化子组件,代码如“”;2、利用ref父组件调用子组件函数;3、通过父级给子级传数据,子级只负责渲染。 本教程操作环境:Windows7系统、react17.0.1版、Dell G3电脑。 re…

    2025年3月11日
    200
  • react axios请求拦截怎么实现

    react axios请求拦截的实现方法:1、下载axios;2、在src目录下创建一个utils文件夹用于存放公用js;3、在utils目录下创建http.js文件;4、创建axios实例;5、添加请求拦截器;6、判断cookie有没有存…

    2025年3月11日
    200
  • react框架什么时候出来的

    react框架是2013年出来的;React起源于Facebook的内部项目,于2013年5月开源。React是用于构建用户界面的JavaScript库,主要用于构建UI;用户可以在React里传递多种类型的参数,如声明代码,帮助你渲染出U…

    2025年3月11日
    200
  • react的component是什么

    在react中,component中文意思为“组件”,是封装起来的具有独立功能的UI部件;将要展示的内容,分成多个独立部分,每一个这样的部分,就是一个组件。组件有两个重要的东西,一个是属性,一个是状态。组件的属性是父组件给它的,存储的是父组…

    2025年3月11日 编程技术
    200
  • react为什么推荐函数组件

    原因:1、函数组件语法更短、更简单,这使得它更容易开发、理解和测试;2、类组件过多的使用this让整个逻辑看起来很混乱;3、hooks功能也只支持函数组件;4、React团队针对函数组件做了更多的优化来避免非必要的检查和内存泄漏;5、函数式…

    2025年3月11日
    200
  • react的合成事件如何形容

    React合成事件是React模拟原生DOM事件所有能力的一个事件对象,即浏览器原生事件的跨浏览器包装器;它根据W3C规范来定义合成事件,兼容所有浏览器,拥有与浏览器原生事件相同的接口。在React中,所有事件都是合成的,不是原生DOM事件…

    2025年3月11日
    200

发表回复

登录后才能评论