【React学习笔记】【使用AntDesign】

【Javascript学习笔记】

目录

使用antdDesign

可参照antdDesign官网文档中的资料 ClickHere 》

yarn安装antdDesign

 yarn add antd

安装成功：

yarn引入antdDesign

App.js:

import React, { Component } from 'react';
import Button from 'antd/lib/button';
import './App.css';

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

export default App;

src/App.css：

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

引用于学习笔记中的效果：

高级配置方便引用

引入 react-app-rewired 并修改 package.json 里的启动配置。

yarn add react-app-rewired --dev

/* package.json */
"scripts": {
-   "start": "react-scripts start", + "start": "react-app-rewired start", - "build": "react-scripts build", + "build": "react-app-rewired build", - "test": "react-scripts test --env=jsdom", + "test": "react-app-rewired test --env=jsdom", }

在项目根目录创建一个 config-overrides.js 用于修改默认配置

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

使用 babel-plugin-import

yarn add babel-plugin-import --dev

修改 config-overrides.js：

+ const { injectBabelPlugin } = require('react-app-rewired');

  module.exports = function override(config, env) {
+   config = injectBabelPlugin(['import', { libraryName: 'antd', libraryDirectory: 'es', style: 'css' }], config);
    return config;
  };

src/App.css 里全量添加的 @import ‘~antd/dist/antd.css’;
各模块代码改写参考

- import Button from 'antd/lib/button';
+ import { Button } from 'antd';

优化好了的评论功能

效果

源码下载

(github：KuanG97) 下载实战代码 ClickHere》

快捷链接

全部React学习笔记的目录 Click Here>>
全部Javascript学习笔记的目录 Click Here>>
Less学习笔记 Click Here>>
安利一波前端开发推荐使用的工具 Click Here>>
github各类实战练习源码下载 Click Here>>
如果你觉得我的东西能帮到你，无限欢迎给我的github库点个收藏Star~0v 0~