在create-react-app项目中使用Ant Design组件库

已于 2024-08-01 09:56:03 修改
阅读量159 收藏 3
点赞数 5
文章标签： react.js 前端 前端框架
于 2024-08-01 09:54:09 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/panghuangang/article/details/140838775
版权

Ant Design是什么

Ant Design是由蚂蚁金服出品的、社区使用广泛的React PC端组件库。它内置了常用的现成组件，可以帮助我们快速开发PC管理后台项目。

https://ant-design.antgroup.com/index-cn
在这里插入图片描述

https://ant-design.antgroup.com/docs/react/introduce-cn
在这里插入图片描述

https://ant-design.antgroup.com/components/overview-cn/
在这里插入图片描述

在create-react-app中使用

https://ant-design.antgroup.com/docs/react/use-with-create-react-app-cn

安装

假设已经使用npx create-react-app创建了一个react项目。

运行命令npm install antd --save:
在这里插入图片描述

安装成功后，package.json文件中自动更新了依赖：
在这里插入图片描述

验证使用方式

在这里插入图片描述

在浏览器中查看：
在这里插入图片描述

听海边涛声
关注
  • 5
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
react入门 + Ant design的组件库
chun_sh的博客
06-04 299
因为最近面试都被面临问到是否会react框架，在此之前基本都是使用vue框架，所以在此记录 这里是需要用到的是create-react-app脚手架。因此，我们需要先通过npm去下载create-react-app脚手架，它可以帮助我们快速的去搭建react项目。 一、安装create-react-app npm install -g create-react-app //全局安装 二、创建项目 注意创建项目时没用npm而是npx ， my-app是项目名称 npx create-react-ap
React Antd Design 组件使用
hopefullman的博客
12-24 177
今天记录一下Antd 里面的一些儿组件用法： 0.写在前面 提示：antd 里面的函数不用bind（this） import { Input,Button,message } from 'antd'; import 'antd/dist/antd.css'; 1.DatePicker //本地化 中文化 import locale from 'antd/es/date-picker/l...
create-react-app下项目集成Ant Design
halo1416的博客
05-06 525
注意：这种方式只适用于create-react-app 创建的项目，如果你适用了 npm run eject 命令后，这种方式可能会出错 一、首先，先创建项目 创建项目：create-react-app on_the_go 启动项目：cd on_the_go npm start 二、集成UI库Ant Design 1. 基本使用 ==>...
在 create-react-app 中使用 Ant-Design
qq_45227126的博客
02-25 347
1.安装和初始化 推荐使用淘宝镜像安装 创建一个名为 npx create-react-app antd-demo cd antd-demo npm start 启动项目 2.安装antd cnpm i add antd --save 修改 src/App.js，引入 antd 的按钮组件 由于网速或者掉包问题建议安装一个包运行一次，检查有没有错误， 没有问题则进行配置 app.js： impor...
Create-React-App + TypeScript + Ant-Design（不带 Eject）
06-08
这个项目是用 Create React App 引导的。 您将在下面找到有关如何执行常见任务的一些信息。 您可以在此处找到本指南的最新版本。 目录 更新到新版本 发送反馈 文件夹结构 可用脚本 npm start npm test npm run build...
react_mobile:基于antd-mobile, dva.js和create-react-app的react app项目模板，开箱即用，直接开发。A boilerplate based on ant design mobile，dva.js and create-react-app
04-30
此项目是基于antd-mobile, dva.js和create-react-app的react app项目模板，开箱即用，直接开发。 如果能帮助到你的话，请给个Star! 技术选型： UI框架：react, antd-mobile 数据层框架： redux, dva.js 路由：...
详解在create-react-app使用less与antd按需加载
10-17
以上知识点详细描述了如何在基于 `create-react-app` 的项目中，通过一系列配置和工具，实现 `less` 预处理器的使用以及 `antd` 组件库的按需加载和自定义主题功能。这些步骤不仅提升了项目的性能，也增加了开发的...
react-dashboard:使用create-react-app和ant-design制作的React仪表板
05-14
内置了create-react-app，ant-design，sass，recharts ...布局包括左右侧边栏，导航栏和主要内容。 还包括三个主要视图：仪表板，用户和服务器。 包括 React React路由器 创建React应用 蚂蚁设计 React路由器 图表 ...
e-admin-react:一个使用 react + antd + create-react-app 构建的 rbac 权限模型
05-06
e-admin-react 一个使用 react + antd + mobx + create-react-app 构建的 rbac 权限模型 ...npm 脚本 ...mobx-react 在 react 中使用 mobx react-router-dom react 路由 react-router-config 使用配置
如何使用useMemo来优化React组件的性能？
盼盼盼的博客
09-02 709
是 React 提供的一个 Hook，它可以用来记忆复杂计算的结果，避免在每次渲染时都进行重复计算，从而优化组件的性能。并不保证所记忆的值不会被丢弃。在React的将来的重渲染过程中，可能会清除这些值以释放内存。主要用于性能优化，而不是作为缓存机制。变化时，才会重新计算。
ref 和 reactive 区别
weixin_46515691的博客
08-31 1284
前言 ref 和 reactive是Vue 3中响应式编程的核心。在Vue中，响应式编程是一种使数据与UI保持同步的方式。当数据变化时，UI会自动更新，反之亦然。这种机制大大简化了前端开发，使我们能够专注于数据和用户界面的交互，而不必手动处理DOM更新。 ref ref是Vue 3中的一个简单响应式API，用于创建一个包装基本数据类型的响应式引用(也可以包装复杂类型，只不过底层还是由reactive的方式实现的)。它的主要优点是能够轻松包装基本数据类型，并且具有清晰的访问和更新方式 ref创建基本类型的响应
WHAT - React 函数与 useMemo vs useCallback
weixin_58540586的博客
09-03 875
目录介绍`useMemo` 与 `useCallback` 的区别示例代码`useMemo` 示例`useCallback` 示例总结 介绍 在 React 中，useMemo 和 useCallback 是两个用于性能优化的钩子，尽管它们有些相似，但各自有不同的用途和应用场景。理解它们的区别和适用情况可以帮助你更有效地管理组件的性能和状态。 useMemo 与 useCallback 的区别 useMemo: 目的: 用于记忆化（缓存）计算结果。它接受一个计算函数和依赖项数组，只有当依赖项发生变化时
界面控件KendoReact中文教程 - 如何创建动态进度条？
需要界面开发、IDE工具研发中文教程资料的小伙伴，记得私信我~
09-06 1216
本文主要介绍如何使用KendoReact ProgressBar和ChunkProgressBar组件在React应用程序中创建动态进度条，欢迎下载新版控件体验！
React——forwardRef 转发组件引用
weixin_45705239的博客
09-03 623
请注意，在大多数情况下，推荐使用数据流（props 和 state）和高阶组件（HOCs）或者 hooks 来解决问题，而不是过度依赖。但是，有时候你可能需要在父组件中访问子组件中的 DOM 元素或者类组件实例，这就是。被用来获取对组件内部 DOM 节点或者组件实例的直接引用。默认情况下，你不能在函数组件上使用。是 React 提供的一个 API，它用于在函数组件中转发。这样可以保持组件之间的松耦合，并使得状态管理更可预测。创建一个组件时，它将接收。元素的实际 DOM 节点。在上面的代码示例中，
在react中要将页面跳转有动画
Mr_wuying的博客
09-03 251
react-transition-group 包住路由然后给样式 就可以达到页面跳转的时候样式动画。
React第四章(babel)
最新发布
qq1195566313的博客
09-06 674
Babel 是一个 JavaScript 编译器,提供了JavaScript的编译过程，能够将源代码转换为目标代码。官网 https://babeljs.io/查看AST https://astexplorer.net/Babel所有的包 https://babeljs.io/docs/babel-traverse。
技术周刊 ｜ Rspack 1.0、v0 支持 Vue、2024 年度编程语言排行榜、Ideogram 2.0、从 0 实现一个 React
童欧巴的博客
09-02 916
大家好，我是童欧巴，欢迎来到第 124 期技术周刊。
React 应用中集成 Ace Editor
m0_61998604的博客
09-03 362
【代码】React 应用中集成 Ace Editor。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值