react引入antd组件示例步骤

安装antd sudo npm install antd --save

import React, {
          
    Component } from react
import Button from antd/lib/button
import antd/dist/antd.css

export default class App1 extends Component {
          
   
  render() {
          
   
    return (
      <div>
        <h1>演示antd组件库的使用</h1>
        <Button type=primary>按钮组件使用</Button>
      </div>
    )
  }
}

配置antd加载需要的库 sudo yarn add react-app-rewired customize-cra

修改package.json “scripts”: { “start”: “react-app-rewired start”, “build”: “react-app-rewired build”, “test”: “react-app-rewired test”, “eject”: “react-scripts eject” },

项目跟目录创建：config-overrides.js

const {
          
    override, fixBabelImports } = require("customize-cra");
module.exports = override(
  fixBabelImports("import", {
          
   
    libraryName: "antd",
    libraryDirectory: "es",
    style: "css",
  })
);

sudo yarn add babel-plugin-import

使用：

import React, {
          
    Component } from react
import Button from antd/lib/button
// import antd/dist/antd.css

import {
          
   Button} from antd

export default class App1 extends Component {
          
   
  render() {
          
   
    return (
      <div>
        <h1>演示antd组件库的的使用 </h1>
        <Button type=primary>按钮组件使用</Button>
      </div>
    )
  }
}

如果：info There appears to be trouble with your network connection. Retrying…

npm config set registry https://registry.npm.taobao.org 然后删除：yarn.lock 重新执行：sudo yarn add babel-plugin-import