React use of Ant Design and Advanced Configuration loaded on demand.

Learn ReactJS week, finally come into contact with this UI framework for building some nice page, use the steps antd to record what the future easy access.

1. Now from yarn or incorporated and installed npm antd

yarn add antd

2. Modify src / App.js, incorporated antd component (such as buttons) you need.

import Button from 'antd/es/button'

3. introducing antd / dist / antd.css at the top of src / App.css file

@import '~antd/dist/antd.css';

The demonstration above steps, loaded with all the style of antd components, relatively simple and crude, easy to use, but from a performance point of view, demand loading assembly will certainly be higher than the performance load all the components, if the company provides development can not have extra css exists, then you need to configure advanced settings, you need to create-react-app default configuration to customize, here we use the react-app-rewired, follow these steps:

1. Introducing a react-app-rewired and modified in the startup configuration package.json

 yarn add react-app-rewired customize-cra --save (--save modular installation, without mounting a global --save)

/* package.json文件中 */

"scripts" : {
    "Start": "REACT-scripts Start", // delete replaced react-app-rewired start below 
   "Start": "react-app-rewired start" ,
    "Build": "REACT-scripts Build ", // delete replaced react-app-rewired build as 
   " Build ":" react-app-rewired build " ,
    " Test ":" REACT-Test scripts ",   // delete replaced react-app- rewired test as 
   "Test": "App-REACT-rewired test" , 
}

2. Then create in the root directory of a project  config-overrides.js to modify the default configuration.

const { override, fixBabelImports } = require('customize-cra');

module.exports = override(
    fixBabelImports('import', {
    libraryName: 'antd',
    libraryDirectory: 'es',
    style: 'css',
   }),
);

3. babel-Import-plugin  is a plugin for babel demand loading assembly code and style, and install it to modify  config-overrides.jsthe file.

yarn add babel-plugin-import (upper portion has a second modified good config-ocerrides.js files directly copied into the config-overrides.js can)

4. Remove the front  src/App.css in the whole amount of the  @import '~antd/dist/antd.css'; style code, and the module is introduced in the following format.

// src/App.js
  import React, { Component } from 'react';
  import Button from 'antd/es/button';   //移除
  import { Button } from 'antd';   //按需引入即可
  import './App.css';

  class App extends Component {
    render() {
      return (
        <div className="App">
          <Button type="primary">Button</Button>
        </div>
      );
    }
  }

5. This configuration is complete, the final restart npm  start access the page, antd components js and css code can be loaded on demand, improve page performance.