# react **Repository Path**: xiaooneboi/react ## Basic Information - **Project Name**: react - **Description**: No description available - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2026-02-03 - **Last Updated**: 2026-02-24 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # React + Vite ## init project npm create vite app ``` "react": "^19.2.0", "react-dom": "^19.2.0", ``` ## add ant-mobile ### install > $ npm install --save antd-mobile ### import Component 直接引入组件即可，antd-mobile 会自动为你加载 css 样式文件： > import { Button } from 'antd-mobile' > "antd-mobile": "^5.42.3", ## add router > npm install react-router-dom -S > "react-router-dom": "^7.13.0" ```json "dependencies": { "antd-mobile": "^5.42.3", "react": "^19.2.0", "react-dom": "^19.2.0", "react-router-dom": "^7.13.0" }, ``` 如何自动导入在vscode中 https://ant-design-mobile.antgroup.com/zh/components/tab-bar ## 白屏解决办法 https://blog.csdn.net/weixin_68537796/article/details/134607724 ## UI 组件 ### 1. Taro UI for React - 京东出品，多端合一，所向披靡 [Taro UI 上手文档](https://cloud.tencent.com/developer/tools/blog-entry?target=https%3A%2F%2Ftaro-ui.jd.com%2F%23%2Fdocs%2Fintroduction&objectId=2010651&objectType=1&contentType=undefined) ｜ [Taro UI Github](https://cloud.tencent.com/developer/tools/blog-entry?target=https%3A%2F%2Fgithub.com%2FNervJS%2Ftaro-ui&objectId=2010651&objectType=1&contentType=undefined) Taro UI 是京东[凹凸实验室](https://cloud.tencent.com/developer/tools/blog-entry?target=https%3A%2F%2Faotu.io%2F&objectId=2010651&objectType=1&contentType=undefined)发布的 React 移动端 UI 组件库，把它放在第一个推荐是因为它真的很好用，特别是面对一个业务发布在多端的情况特别适用。现在的多端的形态多种多样，比如 Web、ReactNative、[微信小程序](https://cloud.tencent.com/product/tcb?from_column=20065&from=20065)等，当业务要求同时在不同的端都要求有所表现时，针对不同的端去编写多套代码的成本显然非常高，这时候只编写一套代码就能够适配到多端的能力就显得极为需要。使用 Taro，我们可以只书写一套代码，再通过 Taro 的编译工具，将源代码分别编译出可以在不同端（微信小程序、H5、RN等）运行的代码。 ### 2. Ant Design Mobile of React - 阿里前端 UI 库，面向企业级中后台 [Ant Design Mobile 上手文档](https://cloud.tencent.com/developer/tools/blog-entry?target=https%3A%2F%2Fmobile.ant.design%2Fzh%2Fguide%2Fquick-start&objectId=2010651&objectType=1&contentType=undefined) | [Ant Design Mobile Github](https://cloud.tencent.com/developer/tools/blog-entry?target=https%3A%2F%2Fgithub.com%2Fant-design%2Fant-design-mobile&objectId=2010651&objectType=1&contentType=undefined) Antd Design Mobile of React 是基于 Ant Design 设计体系的 React 移动端组件库，主要用于研发企业级中后台产品。Ant Design 作为一门设计语言已经经历了多年的迭代和积累，它对 UI 的设计思想已经成为一套标准，也是 React 开发者手中的神器，大幅提高了产品设计研发的效率及质量，Ant Design 文档简洁清晰。Antd Mobile 是国内 React 移动端项目的首选组件库。（如果你打算开发支付宝小程序，可用 [Ant Design Mini](https://cloud.tencent.com/developer/tools/blog-entry?target=https%3A%2F%2Fmini.ant.design%2F&objectId=2010651&objectType=1&contentType=undefined)） ### 3. TDesign React Mobile - 腾讯 UI 组件库，配套工具完满，设计工整，文档清晰 [TDesign React 上手文档](https://cloud.tencent.com/developer/tools/blog-entry?target=https%3A%2F%2Ftdesign.tencent.com%2Freact%2Foverview&objectId=2010651&objectType=1&contentType=undefined) | [TDesign React Github](https://cloud.tencent.com/developer/tools/blog-entry?target=https%3A%2F%2Fgithub.com%2FTencent%2Ftdesign-react&objectId=2010651&objectType=1&contentType=undefined) TDesign React 刚刚开源，而它的移动端版还在孵化中（希望你看到这篇文章时已经上线），我想把它写在这里是因为 TDesign 不仅仅是 UI 库，也是前端设计系统，品质过硬。这么棒的 UI 库不能因为本文撰写时还未上线就放掉，所以先写在这里占个位置。 TDesign React 作为一款诞生于腾讯内部的 UI 组件库，经过腾讯内部 500+ 项业务检验的企业级设计体系，不仅仅是前端 UI 库，更是前端的设计指南和设计体系。支持 React 及[腾讯小程序](https://cloud.tencent.com/developer/tools/blog-entry?target=https%3A%2F%2Ftdesign.tencent.com%2Fminiprogram%2Foverview&objectId=2010651&objectType=1&contentType=undefined)。 TDesign 作为大厂打磨多年后开源的 UI 组件库，文档写的非常好，不仅有「代码例子」还有「设计指南」。让你从多方面理解一个知识点，即便是萌新，也能轻松掌握。还提供了辅助设计工具及设计资源，大家常用的设计工具都能找到对应的设计物料。流程规范，使用清晰，强烈推荐。 ### 4. NutUI for React - 京东出品，移动端友好，面向电商业务场景 [utUI 上手文档](https://cloud.tencent.com/developer/tools/blog-entry?target=https%3A%2F%2Fnutui.jd.com%2Freact%2F%23%2F&objectId=2010651&objectType=1&contentType=undefined) ｜ [NutUI Github](https://cloud.tencent.com/developer/tools/blog-entry?target=https%3A%2F%2Fgithub.com%2Fjdf2e%2Fnutui-react&objectId=2010651&objectType=1&contentType=undefined) NutUI 是京东发布的 React 移动端 UI 组件库。对移动端友好，特别针对移动端电商业务场景优化测试。70+ 高质量 UI 组件，基于京东 APP 10.0 对视觉规范开发，支持按需引用，支持 TypeScript，支持主题定制。可以使用 React 语言来编写在 H5、小程序平台上的应用，帮助我们提升开发效率，改善开发体验。 ### 5. Material-UI - 全球顶级 React 组件库 Google Material 设计标准 android 首先 [Material-UI 上手文档](https://cloud.tencent.com/developer/tools/blog-entry?target=https%3A%2F%2Fmui.com%2Fzh%2Fmaterial-ui%2Fgetting-started%2Finstallation%2F&objectId=2010651&objectType=1&contentType=undefined) | [Material-UI Github](https://cloud.tencent.com/developer/tools/blog-entry?target=https%3A%2F%2Fgithub.com%2Fmui%2Fmaterial-ui&objectId=2010651&objectType=1&contentType=undefined) [Material-UI](https://cloud.tencent.com/developer/tools/blog-entry?target=https%3A%2F%2Fgithub.com%2Fmui%2Fmaterial-ui&objectId=2010651&objectType=1&contentType=undefined) 是 Google [Material Design](https://cloud.tencent.com/developer/tools/blog-entry?target=https%3A%2F%2Fm3.material.io%2F&objectId=2010651&objectType=1&contentType=undefined) 设计原则的 React 实现，是一套 React 组件库，它的前身是 Google 官方的 Material Design Lite，一个纯前端库。Material UI 绝不是简单的实现了 MD 设计原则的 UI 库，而是更像一个帮助开发者解决设计问题，提供优秀设计组件或设计方案的组件库。 Material-UI 组件库不论是小项目小团队的快速迭代开发，还是长期维护的大型项目，都非常适合，Github 上 Star 高达 80K 之多，是可以闭眼选择的 UI 组件库。 ### 6. React WeUI - 微信出品，面向微信移动端，完整的微信生态 UI 组件库 [React-WeUI 上手文档](https://cloud.tencent.com/developer/tools/blog-entry?target=https%3A%2F%2Fweui.github.io%2Freact-weui%2Fdocs%2F%23%2Freact-weui%2Fdocs%2Fpage%2F2%2Farticles%2F0&objectId=2010651&objectType=1&contentType=undefined) ｜ [React-WeUI Github](https://cloud.tencent.com/developer/tools/blog-entry?target=https%3A%2F%2Fgithub.com%2Fweui%2Freact-weui&objectId=2010651&objectType=1&contentType=undefined) React WeUI 是微信出品的面向移动端的 UI 组件库，整个设计原则给予微信生态，是微信设计语言的 react 实现。引用这套组件库，你可以毫不费力的融入微信的怀抱，大到组件的 UI ，小到按钮动效，全都和微信一摸一样。移动端非常友好，对微信内置浏览器特别优化，丝滑流畅。 ### 7. Zarm Design React - 宝藏 React 移动端 UI 组件库 [Zarm 上手文档](https://cloud.tencent.com/developer/tools/blog-entry?target=https%3A%2F%2Fzarm.design%2F%23%2Fdocs%2Fintroduce&objectId=2010651&objectType=1&contentType=undefined) ｜ [Zarm Github](https://cloud.tencent.com/developer/tools/blog-entry?target=https%3A%2F%2Fgithub.com%2FZhongAnTech%2Fzarm&objectId=2010651&objectType=1&contentType=undefined) Zarm Design of React 是众安科技基于 React、React-Native 研发的一款适用于企业级的移动端 UI 组件库。众安科技是众安保险旗下一家做大数据、[人工智能](https://cloud.tencent.com/product/ai-class?from_column=20065&from=20065)相关的科技公司。众安团队发布的 Zarm 提炼自企业级移动端产品的交互语言和视觉风格，有多达 50 + 常见的通用组件，拥有完整统一的设计规范，样式命名采用了 BEM 的规范，内部实现使用了Css Variables + SCSS Mixins 简洁优雅。Zarm 依赖少体积小，极少的依赖三方库，Gzip压缩后，全量组件只有60kb左右的大小。友好的TypeScript 支持。 ###### 4：React-Bootstrap 推荐指数：star:17.7k 官网：[https://react-bootstrap.github.io](https://cloud.tencent.com/developer/tools/blog-entry?target=https%3A%2F%2Flinks.jianshu.com%2Fgo%3Fto%3Dhttps%3A%2F%2Freact-bootstrap.github.io&objectId=1638343&objectType=1&contentType=undefined) 中文文档: [http://react.tgwoo.com](https://cloud.tencent.com/developer/tools/blog-entry?target=https%3A%2F%2Flinks.jianshu.com%2Fgo%3Fto%3Dhttp%3A%2F%2Freact.tgwoo.com&objectId=1638343&objectType=1&contentType=undefined) Github: [https://github.com/react-bootstrap/react-bootstrap/](https://cloud.tencent.com/developer/tools/blog-entry?target=https%3A%2F%2Flinks.jianshu.com%2Fgo%3Fto%3Dhttps%3A%2F%2Fgithub.com%2Freact-bootstrap%2Freact-bootstrap%2F&objectId=1638343&objectType=1&contentType=undefined) 一款基于ReactJS对Bootstrap进行封装前端组件库，React-Bootstrap是可重用的前端组件库。 样式组件依赖于bootstrap。与 Twitter Bootstrap 一致外观与感受，但通过 Facebook 的 React.js 框架获得更清爽的代码。 ###### 5：Blueprint 推荐指数：star:16.2k 官网：[https://apiblueprint.org](https://cloud.tencent.com/developer/tools/blog-entry?target=https%3A%2F%2Flinks.jianshu.com%2Fgo%3Fto%3Dhttps%3A%2F%2Fapiblueprint.org&objectId=1638343&objectType=1&contentType=undefined) Github: [https://github.com/palantir/blueprint](https://cloud.tencent.com/developer/tools/blog-entry?target=https%3A%2F%2Flinks.jianshu.com%2Fgo%3Fto%3Dhttps%3A%2F%2Fgithub.com%2Fpalantir%2Fblueprint&objectId=1638343&objectType=1&contentType=undefined) Blueprint是一个基于React的Web工具组件库。 它针对在现代浏览器和IE11中运行的桌面应用程序构建复杂，数据密集的Web界面。一个 React UI 工具组件库。 ###### 3：Semantic UI 推荐指数：star:48k 中文文档：[https://zijieke.com/semantic-ui/](https://cloud.tencent.com/developer/tools/blog-entry?target=https%3A%2F%2Flinks.jianshu.com%2Fgo%3Fto%3Dhttps%3A%2F%2Fzijieke.com%2Fsemantic-ui%2F&objectId=1638343&objectType=1&contentType=undefined) Github: [https://github.com/semantic-org/semantic-ui/](https://cloud.tencent.com/developer/tools/blog-entry?target=https%3A%2F%2Flinks.jianshu.com%2Fgo%3Fto%3Dhttps%3A%2F%2Fgithub.com%2Fsemantic-org%2Fsemantic-ui%2F&objectId=1638343&objectType=1&contentType=undefined) Semantic UI 是一款非常优秀的前端开发框架。它在用户体验的设计上与Bootstrap和Foundation相比,更胜一筹，语义化的前端 UI 框架，包含 50 多个组件。 ###### 2：Material-UI 推荐指数：star:57.9k 英文文档：[https://material-ui.com](https://cloud.tencent.com/developer/tools/blog-entry?target=https%3A%2F%2Flinks.jianshu.com%2Fgo%3Fto%3Dhttps%3A%2F%2Fmaterial-ui.com&objectId=1638343&objectType=1&contentType=undefined) Github: [https://github.com/mui-org/material-ui](https://cloud.tencent.com/developer/tools/blog-entry?target=https%3A%2F%2Flinks.jianshu.com%2Fgo%3Fto%3Dhttps%3A%2F%2Fgithub.com%2Fmui-org%2Fmaterial-ui&objectId=1638343&objectType=1&contentType=undefined) Material-UI当下流行的 React UI 框架，组件用于更快速、更简便的 web 开发，适合小团队，或者个人项目快速搭建前端界面，可以自定义主题，Github上面的star挺多的，有超过Ant的趋势，有空的话可以读一读源码，毕竟这么优秀的框架，能学到很多东西。 ###### 1：Ant-design 推荐指数：star:60.2k 官网：[https://ant.design/docs/react/introduce-cn](https://cloud.tencent.com/developer/tools/blog-entry?target=https%3A%2F%2Flinks.jianshu.com%2Fgo%3Fto%3Dhttps%3A%2F%2Fant.design%2Fdocs%2Freact%2Fintroduce-cn&objectId=1638343&objectType=1&contentType=undefined) Github: [https://github.com/ant-design/ant-design/](https://cloud.tencent.com/developer/tools/blog-entry?target=https%3A%2F%2Flinks.jianshu.com%2Fgo%3Fto%3Dhttps%3A%2F%2Fgithub.com%2Fant-design%2Fant-design%2F&objectId=1638343&objectType=1&contentType=undefined) Ant Design一套企业级 UI 设计语言和 React 组件库，基于Ant Design 设计体系的 React UI 组件库，用于研发企业级中后台产品，风格素雅简洁，喜欢的可以选择使用，目前在react技术栈领域使用的较为广泛，各种文档也比较齐全，遇到问题好解决。 ## **4. Arco Design** Arco Design React版是由字节跳动GIP UED团队和架构前端团队联合推出的企业级设计系统，拥有大厂的逻辑、堪称完美的设计文档， 主要解决在打造中后台应用时，让产品设计和开发无缝连接，提高质量和效率，**[点击查阅](https://pixso.cn/designskills/shejixitong/)****[B端设计系统 Ant Design 和 Arco Design的区别](https://pixso.cn/designskills/shejixitong/)**。 ## **3. Element UI Kit** 饿了么出品的Element的React UI框架版，适合有使用Element习惯的开发者。Element React提供了非常丰富的组件，如日期选择器、树形组件、日历组件等，开发语言遵循了用户的习惯，让网站快速成型**。**