react中UI组件库antd的基本使用

一、为什么要使用UI组件库

使用UI组件库有以下几个好处：

1.提高效率：使用UI组件库可以快速生成统一风格的UI元素，使得前端开发不必从头开始创建每一个单独的UI元素，从而节省时间和精力。

2.提高一致性：UI组件库的设计通常是经过专业设计师的精心设计和测试，可以保证整个应用程序中所有的UI元素的外观和行为都是一致的。

3.易于维护：UI组件库中的组件相互之间具有独立性，使用组件库可以让开发人员更加容易地维护和修改部分代码，而无需影响整个应用程序。

4.优化用户体验：UI组件库在用户界面上提供了一些预定义的交互方式和视觉效果，这些方法已被证明可以改善用户体验，并提高用户满意度。

总之，使用UI组件库可以提高前端开发的效率、一致性和维护性，同时也可以改善用户体验，因此在现代Web应用程序的开发中，应该考虑使用UI组件库。

二、UI组件库antd的使用

2.1、antd的官网：antd官方网站
2.2、安装 antd

npm i antd

2.3、基本使用
首先我们在官网找到我们想要用的组件样式，比如：
我们想用这个蓝色的按钮：

则，我们只需要点击这个红圈的地方显示代码：

选择Ts或者Js的代码(这里以js代码为例)：
我们需要的是第一个按钮的样式，那么就复制第一个按钮，到我们的代码中：

import React, {
    
     Component } from 'react'
// 标签样式库
import {
    
     Button} from 'antd';
export default class App extends Component {
    
    
  render() {
    
    
    return (
      <div>
        App....
        <button>点我</button>
        <Button type="primary">Primary Button</Button>
      </div>
    )
  }
}

记得引入样式库 ：import { Button} from 'antd';
我们看一下与原生按钮对比的效果：

更多的技巧可以去官网的文档学习
个人博客：余生的学习笔记