Basic use of UI component library antd in react

1. Why use UI component library

Using the UI component library has the following benefits:

1. Improve efficiency: Using the UI component library can quickly generate unified style UI elements, so that front-end developers do not have to create each individual UI element from scratch, thus saving time and energy.

2. Improve consistency: The design of the UI component library is usually carefully designed and tested by professional designers, which can ensure that the appearance and behavior of all UI elements in the entire application are consistent.

3. Easy to maintain: The components in the UI component library are independent of each other. Using the component library makes it easier for developers to maintain and modify part of the code without affecting the entire application.

4. Optimize user experience: The UI component library provides some predefined interaction methods and visual effects on the user interface. These methods have been proven to improve user experience and increase user satisfaction.

In short, using UI component libraries can improve the efficiency, consistency, and maintainability of front-end development, and can also improve user experience. Therefore, you should consider using UI component libraries in the development of modern web applications.

2. Use of UI component library antd

2.1. antd’s official website: antd official website
2.2. Install antd

npm i antd

2.3. Basic use
First, we find the component style we want to use on the official website. For example:
we want to use this blue button:
Insert image description here
Then, we only need to click on the red circle to display the code:

select Ts or Js code (here Taking js code as an example):
What we need is the style of the first button, so copy the first button and add it to our code:

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>
    )
  }
}

Remember to introduce the style library: import { Button} from 'antd';
let’s take a look at the effect compared with native buttons:
Insert image description here

For more techniques, you can learn from the official website’s documentation.
Personal Blog: Study Notes for the Rest of My Life