【React系列教程九】React的UI框架Antd的使用及更新

一、React中使用Antd

antd官网：https://ant.design/docs/react/introduce-cn

step1：安装antd ：【cnpm install antd --save】/  【 yarn add antd】

step2：在react项目的css中引入antd的css：

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

step3：开始使用：例如使用Button组件：

在组件中引入：import { Button } from 'antd';

hello

 

二、React中使用Antd高级配置—按需引入css样式

上面的例子实际上加载了全部的 antd 组件的样式（对前端性能是个隐患）。

step1：安装antd ：【cnpm install antd --save】/  【 yarn add antd】

step2：安装react-app-rewired（一个对 create-react-app 进行自定义配置的社区解决方案）：

【cnpm install react-app-rewired --save】/  【 yarn add react-app-rewired】

step3：修改package.json文件，把"scripts"下的 "react-scripts" 全部改成 "react-app-rewired"

"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-app-rewired eject"
},

step4：在项目根目录创建一个 config-overrides.js 文件，用于修改默认配置。 config-overrides.js文件内容如下：

module.exports = function override(config, env) {
    // do stuff with the webpack config...
    return config;
};

step5：安装babel-plugin-import（是一个用于按需加载组件代码和样式的 babel 插件）：

【cnpm install babel-plugin-import --save】/  【 yarn add babel-plugin-import】

step6：修改 config-overrides.js 文件，将原来内容删掉，添加下面内容：

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

step7：移除src/App.css 里全量添加的 @import '~antd/dist/antd.css'; 直接引入组件使用就会有对应的css。最后重启【cnpm start】访问页面，这样就可以实现按需加载。

 

三、升级antd版本：

查看antd更新日志（https://ant.design/changelog-cn），查看稳定版本号，目前是3.17.0

然后输入命令行：【cnpm i [email protected] --save】