• 技术文章 >web前端 >前端问答

    react都有哪些组件

    藏色散人藏色散人2023-01-19 15:09:30原创61

    react组件有:1、Ant Design;2、Bootstrap;3、Bulma;4、Chakra UI;5、Material UI;6、Semantic UI;7、Reach UI;8、Reakit;9、Rebass等。

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

    react都有哪些组件?

    顶级React组件库推荐

    Ant Design

    1a668a3648173180c4f0cf2c0e40112.jpg

    项目链接:

    优点:

    缺点:

    Bootstrap

    8cda246430c609a5118d2cfa4bd0d94.jpg

    其实我主要把 Bootstrap 看作是一个 UI 库。它不会帮你赢得任何设计奖项,但可以用来完成一些边缘项目和最小可行产品。

    不过这取决于你要使用它的目的。如果你不熟悉 React,那么它是一个很好的入门库。对于经验更丰富的开发人员来说,他们可能会去研究 styled-components / Emotion。

    有两个流行的库带有 Bootstrap 的 React 绑定,我个人仅使用 Reactstrap。

    项目链接:

    优点:

    缺点:

    Bulma

    2da915483d0535c8822a5a14673108a.jpg

    Bulma 与本文介绍的其他库不太一样,因为 Bulma 是纯 CSS 框架,不需要 JS。你可以选择直接使用 Bulma 中的类,也可以使用包装库,例如 react-bulma-components。

    项目链接:

    优点:

    缺点:

    Chakra UI

    3fe92b93efdc538266c4de1cbc90d80.jpg

    项目链接:

    优点:

    缺点:

    注意:

    它非常接近 v1 版本,因此请注意 v0.8.0 之后的重大更改。

    Material UI

    b8b09ab6a657fe45ba4a156b9d5a9d3.jpg

    MaterialUI 是我又爱又恨的库之一。过去,它帮助我扛过了一些非常紧张的项目死线,但到最后我总是尽快把它从所有角落赶走。

    过去,你只能通过编写 JSS 来自定义 MaterialUI 的样式,但值得庆幸的是,现在可以使用 styled-components 和 Emotion 覆盖样式。

    material-ui.com/guides/

    项目链接:

    优点:

    缺点:

    Semantic UI

    44ec866ee3187bb77cf2929dbc21bdc.jpg

    项目链接:

    优点

    缺点

    荣誉奖

    Reach UI

    ReachUI 是一个底层组件库,允许开发人员在其设计系统中构建可访问的 React 组件。

    没有可用的包大小,因为每个组件都单独导出为自己的 npm 包。

    Reakit

    Reakit 是另一个底层组件库。从技术上讲它是一个 UI 库,但不附带 CSS。因此你仍然需要找到一种样式解决方案。

    Rebass

    6227110f4da423ccf54724e7102daa1.jpg

    我关注 Rebass 已经有一段时间了。它是一个功能强大的组件库,没有自带主题,但可以轻松改变主题。关于它的实践示例,请参见其演示:

    rebassjs.org/demo

    项目链接:

    提示

    在编写这份列表时,我曾试着避免加入商业化的设计系统,但是有些系统(Material UI)已得到广泛采用,因此没有它们列表就不完整了。

    我还特意省略了 CSS-in-JS(如 styled-components 和 Emotion)以及实用工具 CSS 系统(如 Tailwind,tailwindcss.com/),因为它们不是明确的“React 组件库”,而是用来制作组件的工具。

    推荐学习:《react视频教程

    以上就是react都有哪些组件的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:React
    上一篇:react怎么将时间戳转换成日期 下一篇:自己动手写 PHP MVC 框架(40节精讲/巨细/新人进阶必看)

    相关文章推荐

    • react native怎么更改版本• react null报错怎么办• react 怎么设置 style属性• react怎么将时间戳转换成日期
    1/1

    PHP中文网