首页 web前端 前端问答 react用什么ui组件库

react用什么ui组件库

Jul 14, 2022 pm 06:52 PM
react

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组件库的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

热门话题

Java教程
1664
14
CakePHP 教程
1423
52
Laravel 教程
1317
25
PHP教程
1268
29
C# 教程
1246
24
如何利用React和RabbitMQ构建可靠的消息传递应用 如何利用React和RabbitMQ构建可靠的消息传递应用 Sep 28, 2023 pm 08:24 PM

如何利用React和RabbitMQ构建可靠的消息传递应用引言:现代化的应用程序需要支持可靠的消息传递,以实现实时更新和数据同步等功能。React是一种流行的JavaScript库,用于构建用户界面,而RabbitMQ是一种可靠的消息传递中间件。本文将介绍如何结合React和RabbitMQ构建可靠的消息传递应用,并提供具体的代码示例。RabbitMQ概述:

React Router使用指南:如何实现前端路由控制 React Router使用指南:如何实现前端路由控制 Sep 29, 2023 pm 05:45 PM

ReactRouter使用指南:如何实现前端路由控制随着单页应用的流行,前端路由成为了一个不可忽视的重要部分。ReactRouter作为React生态系统中最受欢迎的路由库,提供了丰富的功能和易用的API,使得前端路由的实现变得非常简单和灵活。本文将介绍ReactRouter的使用方法,并提供一些具体的代码示例。安装ReactRouter首先,我们需

PHP、Vue和React:如何选择最适合的前端框架? PHP、Vue和React:如何选择最适合的前端框架? Mar 15, 2024 pm 05:48 PM

PHP、Vue和React:如何选择最适合的前端框架?随着互联网技术的不断发展,前端框架在Web开发中起着至关重要的作用。PHP、Vue和React作为三种具有代表性的前端框架,每一种都具有其独特的特点和优势。在选择使用哪种前端框架时,开发人员需要根据项目需求、团队技能和个人偏好做出明智的决策。本文将通过比较PHP、Vue和React这三种前端框架的特点和使

Java框架与前端React框架的整合 Java框架与前端React框架的整合 Jun 01, 2024 pm 03:16 PM

Java框架与React框架的整合:步骤:设置后端Java框架。创建项目结构。配置构建工具。创建React应用。编写RESTAPI端点。配置通信机制。实战案例(SpringBoot+React):Java代码:定义RESTfulAPI控制器。React代码:获取并显示API返回的数据。

如何利用React开发一个响应式的后台管理系统 如何利用React开发一个响应式的后台管理系统 Sep 28, 2023 pm 04:55 PM

如何利用React开发一个响应式的后台管理系统随着互联网的快速发展,越来越多的企业和组织需要一个高效、灵活、易于管理的后台管理系统来处理日常的操作事务。React作为目前最受欢迎的JavaScript库之一,提供了一种简洁、高效和可维护的方式来构建用户界面。本文将介绍如何利用React开发一个响应式的后台管理系统,并给出具体的代码示例。创建React项目首先

vue.js vs.反应:特定于项目的考虑因素 vue.js vs.反应:特定于项目的考虑因素 Apr 09, 2025 am 12:01 AM

Vue.js适合中小型项目和快速迭代,React适用于大型复杂应用。1)Vue.js易于上手,适用于团队经验不足或项目规模较小的情况。2)React的生态系统更丰富,适合有高性能需求和复杂功能需求的项目。

React在HTML中的作用:增强用户体验 React在HTML中的作用:增强用户体验 Apr 09, 2025 am 12:11 AM

React通过JSX与HTML结合,提升用户体验。1)JSX嵌入HTML,使开发更直观。2)虚拟DOM机制优化性能,减少DOM操作。3)组件化管理UI,提高可维护性。4)状态管理和事件处理增强交互性。

react有哪些闭包 react有哪些闭包 Oct 27, 2023 pm 03:11 PM

react有事件处理函数、useEffect和useCallback、高阶组件等等闭包。详细介绍:1、事件处理函数闭包:在React中,当我们在组件中定义一个事件处理函数时,该函数会形成一个闭包,可以访问组件作用域内的状态和属性。这样可以在事件处理函数中使用组件的状态和属性,实现交互逻辑;2、useEffect和useCallback中的闭包等等。

See all articles