React最受欢迎的5个UI框架

ゝ一纸荒年。 2023-02-14 13:21 19阅读 0赞

1：Ant-design

推荐指数：star:60.2k  
官网：[https://ant.design/docs/react/introduce-cn][https_ant.design_docs_react_introduce-cn]  
Github: [https://github.com/ant-design/ant-design/][https_github.com_ant-design_ant-design]

Ant Design一套企业级 UI 设计语言和 React 组件库，基于Ant Design 设计体系的 React UI 组件库，用于研发企业级中后台产品，风格素雅简洁，喜欢的可以选择使用，目前在react技术栈领域使用的较为广泛，各种文档也比较齐全，遇到问题好解决。

![format_png][]

2：Material-UI

推荐指数：star:57.9k  
英文文档：[https://material-ui.com][https_material-ui.com]  
Github: [https://github.com/mui-org/material-ui][https_github.com_mui-org_material-ui]

Material-UI当下流行的 React UI 框架，组件用于更快速、更简便的 web 开发，适合小团队，或者个人项目快速搭建前端界面，可以自定义主题，Github上面的star挺多的，有超过Ant的趋势，有空的话可以读一读源码，毕竟这么优秀的框架，能学到很多东西。

![format_png 1][]

3：Semantic UI

推荐指数：star:48k  
中文文档：[https://zijieke.com/semantic-ui/][https_zijieke.com_semantic-ui]  
Github: [https://github.com/semantic-org/semantic-ui/][https_github.com_semantic-org_semantic-ui]

Semantic UI 是一款非常优秀的前端开发框架。它在用户体验的设计上与Bootstrap和Foundation相比,更胜一筹，语义化的前端 UI 框架，包含 50 多个组件。

![format_png 2][]

4：React-Bootstrap

推荐指数：star:17.7k  
官网：[https://react-bootstrap.github.io][https_react-bootstrap.github.io]  
中文文档: [http://react.tgwoo.com][http_react.tgwoo.com]  
Github: [https://github.com/react-bootstrap/react-bootstrap/][https_github.com_react-bootstrap_react-bootstrap]

一款基于ReactJS对Bootstrap进行封装前端组件库，React-Bootstrap是可重用的前端组件库。 样式组件依赖于bootstrap。与 Twitter Bootstrap 一致外观与感受，但通过 Facebook 的 React.js 框架获得更清爽的代码。

![format_png 3][]

5：Blueprint

推荐指数：star:16.2k  
官网：[https://apiblueprint.org][https_apiblueprint.org]  
Github: [https://github.com/palantir/blueprint][https_github.com_palantir_blueprint]

Blueprint是一个基于React的Web工具组件库。 它针对在现代浏览器和IE11中运行的桌面应用程序构建复杂，数据密集的Web界面。一个 React UI 工具组件库。

![format_png 4][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc2MzU2OQ_size_16_color_FFFFFF_t_70][]

[https_ant.design_docs_react_introduce-cn]: https://links.jianshu.com/go?to=https%3A%2F%2Fant.design%2Fdocs%2Freact%2Fintroduce-cn
[https_github.com_ant-design_ant-design]: https://links.jianshu.com/go?to=https%3A%2F%2Fgithub.com%2Fant-design%2Fant-design%2F
[format_png]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy81NjQwMjM5LTQxZDI2YjJlNjJjYjhiOWEucG5n?x-oss-process=image/format,png
[https_material-ui.com]: https://links.jianshu.com/go?to=https%3A%2F%2Fmaterial-ui.com
[https_github.com_mui-org_material-ui]: https://links.jianshu.com/go?to=https%3A%2F%2Fgithub.com%2Fmui-org%2Fmaterial-ui
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy81NjQwMjM5LTIwODc3NWE5ODYxN2IwMGYucG5n?x-oss-process=image/format,png
[https_zijieke.com_semantic-ui]: https://links.jianshu.com/go?to=https%3A%2F%2Fzijieke.com%2Fsemantic-ui%2F
[https_github.com_semantic-org_semantic-ui]: https://links.jianshu.com/go?to=https%3A%2F%2Fgithub.com%2Fsemantic-org%2Fsemantic-ui%2F
[format_png 2]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy81NjQwMjM5LTdjODg1YjM2ODc0MWRhODEucG5n?x-oss-process=image/format,png
[https_react-bootstrap.github.io]: https://links.jianshu.com/go?to=https%3A%2F%2Freact-bootstrap.github.io
[http_react.tgwoo.com]: https://links.jianshu.com/go?to=http%3A%2F%2Freact.tgwoo.com
[https_github.com_react-bootstrap_react-bootstrap]: https://links.jianshu.com/go?to=https%3A%2F%2Fgithub.com%2Freact-bootstrap%2Freact-bootstrap%2F
[format_png 3]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy81NjQwMjM5LTE4NWRhMmRmNDkxZWYyNTIucG5n?x-oss-process=image/format,png
[https_apiblueprint.org]: https://links.jianshu.com/go?to=https%3A%2F%2Fapiblueprint.org
[https_github.com_palantir_blueprint]: https://links.jianshu.com/go?to=https%3A%2F%2Fgithub.com%2Fpalantir%2Fblueprint
[format_png 4]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly91cGxvYWQtaW1hZ2VzLmppYW5zaHUuaW8vdXBsb2FkX2ltYWdlcy81NjQwMjM5LTMxMzk5Nzg1ZjBiZTAyZWQucG5n?x-oss-process=image/format,png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc2MzU2OQ_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200603094032517.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc2MzU2OQ==,size_16,color_FFFFFF,t_70