Implementation steps for setting up the React+Ant Design development environment

Basics

1. Use scaffolding to create a project and start it

1.1 Install scaffolding:

npm install -g create-react-app

1.2 Create a project using scaffolding:

create-react-app antd-start-demo

antd-start-demo is the project name.

1.3 Startup

npm start

2. Convert npm to yarn

2.1 Install yarn:

npm install -g yarn

​ 2.2 Get the current image source of yarn:

yarn config get registry

2.3 Set as Taobao mirror:

yarn config set registry 'https://registry.npm.taobao.org'

2.4 Common commands:

yarn init --initialize yarn add --add module yarn remove --remove module yarn /yarn install --install dependencies in the project

Project Construction

2.1 Install react-router 4.0, axios, less-loader

yarn add react-router-dom axios less-loader

2.2 Exposing webpack configuration

yarn eject

Tip: If you run yarn eject and get an error

After we modified the file, the above error will be reported when using the yarn eject command. This is because when we used the scaffolding to create the project, the .gitignore file was automatically added, but we do not have a local warehouse. At this time, just execute the following command to add the project to our local warehouse and then execute it.
Solution:

git add .
git commit -m 'init'
yarn eject

Then run yarn eject.

webpack configuration

2.3 Configure less-loader

​ Antd is developed based on less. We can use less to easily change the theme color and other configurations.

Install the less module: yarn add [email protected]

​ Open config/webpack.config.dev.js and add the following configuration:

{
      test: /\.less$/,
      use: [
       require.resolve('style-loader'),
       {
        loader: require.resolve('css-loader'),
        options: { importLoaders: 1 },
       },
       {
        // Options for PostCSS as we reference these options twice
        // Adds vendor prefixing based on your specified browser support in
        // package.json
        loader: require.resolve('postcss-loader'),
        options:
         // Necessary for external CSS imports to work
         // https://github.com/facebook/create-react-app/issues/2677
         ident: 'postcss',
         plugins: () => [
          require('postcss-flexbugs-fixes'),
          require('postcss-preset-env')({
           autoprefixer: {
            flexbox: 'no-2009',
           },
           stage: 3,
          }),
         ],
        },
       },
       { loader: require.resolve('less-loader') }
      ],
},

To configure cssload at the same level as shown in the figure

Image example Note: The configuration part added in webpack.config.dev.js also needs to be configured in webpack.config.prod.js. Otherwise, after the project is released, an error may occur and the program cannot be executed.

2.4 Install antd

yarn add antd

2.5 Test use

import { Button } from "antd";
import 'antd/dist/antd.css';

...
 render() {
  return (
   <div>
     <Button>click</Button>
   </div>
  );
 }
...

Note: By default, the installed antd needs to import antd/dist/antd.css to make the style effective. But in many cases, we only use some components and import the entire antd style file, which is not worth the loss. So on-demand loading came into being.

2.6 antd on-demand loading
1. Add babel-plugin-import,

yarn add babel-plugin-import

2. Open webpack configuration and search: JS with Babel

Find the following configuration:

// Process application JS with Babel.
     // The preset includes JSX, Flow, TypeScript and some ESnext features.
     {
      test: /\.(js|mjs|jsx|ts|tsx)$/,
      include: paths.appSrc,

      loader: require.resolve('babel-loader'),
      options:
       customize: require.resolve(
        'babel-preset-react-app/webpack-overrides'
       ),
       
       plugins: [
        [
         require.resolve('babel-plugin-named-asset-import'),
         {
          loaderMap: {
           svg: {
            ReactComponent: '@svgr/webpack?-prettier,-svgo![path]',
           },
          },
         },
        ],
       ],
       cacheDirectory: true,
       // Save disk space when time isn't as important
       cacheCompression: true,
       compact: true,
      },
     },

Modify the plugin and add:

["import", { "libraryName": "antd", "style": true }]

At this point, you can cancel the introduction of the CSS file. Babel will automatically load the corresponding CSS by default based on the introduced component.

2.7 Modify the theme color

 {
        loader: require.resolve('less-loader'),
        options:
         modules: false,
         modifyVars: {
          "@primary-color": "#f9c700"
         }
        }
       }

You can modify it in the configuration of less in webpack. @primary-color is a built-in less variable of antd. You only need to overwrite the default configuration to change the theme color.

Note: Running yarn run start reports an error ValidationError: Invalid options object. Less Loader has been initialized using an options object

Solution: Uninstall less-loader and install [email protected]

yarn remove less-loader
yarn add [email protected]

This is the end of this article about the implementation steps of setting up the React+Ant Design development environment. For more relevant React Ant Design construction content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!