React——Ant整合

React-Ant整合

UI组件库的引入

• 创建一个react项目，使用npm install antd –save安装Ant组件库
• 在index.js中引入css样式，在文件中就可以引入Ant的任意组件

npm install antd --save

//index.js
import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'

import { DatePicker } from 'antd';

ReactDOM.render(<DatePicker />, mountNode);

UI组件按需加载（使用babel-plugin）

• 有两种方法：第一种是手动按需加载、第二种是自动按需加载，在这只讲第二种。

• 执行npm run eject，如果执行后提示项目缺少文件，则可把项目文件中的隐藏git文件给删除，再执行命令

• 安装插件

npm run eject
npm install babel-plugin-import --save-dev

• 然后再package.json中引入插件，并对插件进行配置

"babel": {
    "presets": [
      "react-app"
    ],
    "plugins": [
      ["import", {
        "libraryName": "antd",
        "libraryDirectory": "es",
        "style": "css"
      }]
    ]
  }

• 配置完之后，组件是以”antd/es/button”这个文件路径导入的，这个组件会更小、部分css样式文件也会自动导入，而不是导入全部css样式，这可以使项目避免加载一些没用的的样式，加载会更快。