Developing front end interface with react + ant design component (1)

Time:2021-3-1

Basic knowledge

1. Use scaffolding to create a project and start it

1.1 scaffold installation:

npm install -g create-react-app

1.2 using scaffolding to create projects:

Create react app antd start demo antd start demo is the project name.

1.3 start up

npm start
2. Convert NPM to yarn

2.1 installation of yarn:

 npm install -g yarn

2.2 get the current image source of yarn:

yarn config get registry

2.3 set as Taobao image:

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

2.4 common commands:

Yarn init -- initialization
Yarn add -- add module
Yarn remove -- delete module
Yarn / yarn install -- dependencies in installation projects

Project construction

2.1 install react router 4.0, Axios and less loader
yarn add react-router-dom axios less-loader
2.2 configuration of burst webpack
yarn eject

2.3 configure less loader

Antd is developed based on less, we can easily change the theme color and other configuration by using less.

To install the less module:yarn add [email protected]

Open config/ webpack.config.dev . JS 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, as shown in the figure

Note: in webpack.config.dev The configuration part added by. JS also needs to be added in the webpack.config.prod . JS. Otherwise, it may result in an error report that cannot be executed after the project is released online.

2.4 installation of 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 introduce antd / dist/ antd.css But many times, we only use part of the components and introduce the entire antd style file. Some of the gains are not worth the losses. 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 the 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 importing the CSS file. Babel will automatically load the corresponding CSS by default according to the imported component.

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

In webpack, it can be modified where less is configured. @Primary color is a built-in less variable of antd. You only need to override the default configuration to modify the theme color.

This article GitHub Code:GitHub addressWelcome star!

Author’s blog:Be a siege lion of the whole stack

Share the knowledge before and after the exchange, together to do the whole stack siege lion.

My blog will be synchronized to Tencent cloud + community. I invite you to join us:https://cloud.tencent.com/developer/support-plan?invite_code=2y2zuha3q6uc0