05-React Antd UI¿â

https://ant.design/components

yarn add antd

npm install antd --save

import {Button} from 'antd'

import 'antd/dist/antd.css'

import React, {Component} from 'react';
import {Button} from 'antd'
import 'antd/dist/antd.css'

class App extends Component {
    render() {
        return (
            <div>
                <div>
                    <h2>Antd µÄ»ù±¾Ê¹ÓÃ</h2>
                </div>
                <div>
                    <Button type='primary'>Antd button</Button>
                </div>
            </div>
        );
    }
}

export default App;

yarn eject

E:\js\react_antd>yarn eject
yarn run v1.22.19
$ react-scripts eject
NOTE: Create React App 2+ supports TypeScript, Sass, CSS Modules and more without ejecting: https://reactjs.org/blog/2018/10/01/create-react-app-v2.html

¡Ì Are you sure you want to eject? This action is permanent. ... yes
Ejecting...

Copying files into E:\js\react_antd
  Adding \config\env.js to the project
  Adding \config\getHttpsConfig.js to the project
  Adding \config\modules.js to the project
  Adding \config\paths.js to the project
  Adding \config\webpack.config.js to the project
  Adding \config\webpackDevServer.config.js to the project
  Adding \config\jest\babelTransform.js to the project
  Adding \config\jest\cssTransform.js to the project
  Adding \config\jest\fileTransform.js to the project
  Adding \scripts\build.js to the project
  Adding \scripts\start.js to the project
  Adding \scripts\test.js to the project
  Adding \config\webpack\persistentCache\createEnvironmentHash.js to the project

Updating the dependencies
  Removing react-scripts from dependencies
  Adding @babel/core to dependencies
  Adding @pmmmwh/react-refresh-webpack-plugin to dependencies
  Adding @svgr/webpack to dependencies
  Adding babel-jest to dependencies
  Adding babel-loader to dependencies
  Adding babel-plugin-named-asset-import to dependencies
  Adding babel-preset-react-app to dependencies
  Adding bfj to dependencies
  Adding browserslist to dependencies
  Adding camelcase to dependencies
  Adding case-sensitive-paths-webpack-plugin to dependencies
  Adding css-loader to dependencies
  Adding css-minimizer-webpack-plugin to dependencies
  Adding dotenv to dependencies
  Adding dotenv-expand to dependencies
  Adding eslint to dependencies
  Adding eslint-config-react-app to dependencies
  Adding eslint-webpack-plugin to dependencies
  Adding file-loader to dependencies
  Adding fs-extra to dependencies
  Adding html-webpack-plugin to dependencies
  Adding identity-obj-proxy to dependencies
  Adding jest to dependencies
  Adding jest-resolve to dependencies
  Adding jest-watch-typeahead to dependencies
  Adding mini-css-extract-plugin to dependencies
  Adding postcss to dependencies
  Adding postcss-flexbugs-fixes to dependencies
  Adding postcss-loader to dependencies
  Adding postcss-normalize to dependencies
  Adding postcss-preset-env to dependencies
  Adding prompts to dependencies
  Adding react-app-polyfill to dependencies
  Adding react-dev-utils to dependencies
  Adding react-refresh to dependencies
  Adding resolve to dependencies
  Adding resolve-url-loader to dependencies
  Adding sass-loader to dependencies
  Adding semver to dependencies
  Adding source-map-loader to dependencies
  Adding style-loader to dependencies
  Adding tailwindcss to dependencies
  Adding terser-webpack-plugin to dependencies
  Adding webpack to dependencies
  Adding webpack-dev-server to dependencies
  Adding webpack-manifest-plugin to dependencies
  Adding workbox-webpack-plugin to dependencies

Updating the scripts
  Replacing "react-scripts start" with "node scripts/start.js"
  Replacing "react-scripts build" with "node scripts/build.js"
  Replacing "react-scripts test" with "node scripts/test.js"

Configuring package.json
  Adding Jest configuration
  Adding Babel preset

Running npm install...
npm WARN config global `--global`, `--local` are deprecated. Use `--location=global` instead.

up to date in 2s

207 packages are looking for funding
  run `npm fund` for details
Ejected successfully!

fatal: not a git repository (or any of the parent directories): .git
Staged ejected files for commit.

Please consider sharing why you ejected in this survey:
  http://goo.gl/forms/Bi6CZjk1EqsdelXk1

Done in 4.99s.

E:\js\react_antd>

yarn add @craco/craco babel-plugin-import craco-less

/* package.json */
"scripts": {
-   "start": "react-scripts start",    //È¥³ý
-   "build": "react-scripts build", //È¥³ý
-   "test": "react-scripts test",  //È¥³ý
+   "start": "craco start",    //Ìí¼Ó
+   "build": "craco build", //Ìí¼Ó
+   "test": "craco test", //Ìí¼Ó
}

const CracoLessPlugin = require("craco-less");

module.exports = {
  //°´ÐèÒýÈë
  babel: {
    plugins: [["import",
               {
                 "libraryName": "antd",
                 "libraryDirectory": "es",
                 //¿ÉÒÔÉèÖÃΪtrue¼´ÊÇless,×¢Ò⣡£¡£¡£¡´Ëʱ²»ÐèÒª¼ÓÒýºÅ
                 //Ò²¿ÉÒÔÉèÖÃΪcss,cssÐèÒª¼ÓÒýºÅ
                 "style": true
               }
              ]]
  },
  //×Ô¶¨ÒåÖ÷Ìâ
  plugins: [{
    plugin: CracoLessPlugin,
    options: {
      // ´Ë´¦¸ù¾Ý less-loader °æ±¾µÄ²»Í¬»áÓв»Í¬µÄÅäÖã¬Ïê¼û less-loader ¹Ù·½Îĵµ
      lessLoaderOptions: {
        lessOptions: {
          //ÑÕÉ«¼´Îª×Ô¶¨ÒåÑÕÉ«
          modifyVars: {'@primary-color': 'blue'},
          javascriptEnabled: true
        }
      }
    }
  }]
}