[React] From entering the pit to running away: the use of Ant Design of React

content

Understand the basic usage of Ant Design of React component library

Antd ant framework

Antd is a React UI component library based on the Ant Design design system, which is mainly used to develop enterprise-level mid- and back-end products.

Which covers PC: Ant Design , mobile: Ant Design Mobile

Basic use

1. Import all

installation:

npm install antd-mobile 
导入：
import { Button } from 'antd-mobile';
import 'antd-mobile/dist/antd-mobile.css'; 

2. Import on demand

①: install the UI component library: npm install antd-mobile
②: install babel-plugin-importplug npm install babel-plugin-import
③: be bableconfigured (through npm run ejectexport profile command)
④: In package.jsonconfiguring the

"babel": {
    
    
    "presets": [
      "react-app"
    ],
    "plugins": [
      ["import", {
    
     "libraryName": "antd-mobile", "style": "css" }]
    ]
  }

⑤: There is no need to import all styles when using the component, the plug-in will automatically assign it for us

Note: on npm run ejectcommand being given issue:

Solution: need to gitcommit changes command entry, and then re-execute npm run ejectthe command

Example:

git add .
git commit -m '提交修改项'

OVER