接触antd design

Posted 2023-04-08

参考技术A antd design真的非常的棒！里面包含了许多的组件，同时也可以帮助初学react的小白更好地学习react，当然我也是众多小白中的一个。
废话不多说，我是在cerate-react-app的方法下使用的antd design
打开命令行(Win + R），首先先安装create-react-app(这里安装yarn)
$ npm install -g create-react-app yarn
然后新建一个项目
$ create-react-app antd-demo
接着进入项目目录并启动
$ cd antd-demo
$ yarn start
然后耐心地等待一会儿，浏览器显示Welcome to React之后就成功了第一步。
antd 是个库，所以我们要引入。现在从yarn 中引入安装并引入antd
$ yarn add antd
接着我们打开刚才创建的文件目录中，修改src/App.js,引入antd的按钮组件

然后就是修改src/App.css, 在文件顶部引入antd/dist/antd.css

发现浏览器上面有一个蓝色的按钮就代表成功了。
补充一下，先看一下crate-react-app生成的默认目录结构：

node_modules
项目依赖包存放位置。当我们运行npm install安装package.json中的依赖包是，该文件夹会自动创建，所有的依赖包会安装到该文件夹中。

public
主要的作用是html入口文件的存放。当然我们也可以存放其他公用的静态资源，如图片，css等。其中的index.html文件就是我们的项目入口html文件。

src
组件的存放目录。在create-react-app 创建的项目中，每一个单独的文件都可以被看成一个单独的模块，单独的image，单独的css，单独的js等，而所有的组件都存在src目录中，其中index.js是js的入口文件。

十九React UI框架Antd(Ant Design)的使用——及react Antd的使用 button组件 Icon组件 Layout组件 DatePicker日期组件

一、Antd(Ant Design)的使用：引入全部Css样式

1.1 antd官网：

https://ant.design/docs/react/introduce-cn

1.2 React中使用Antd

1、在项目根目录安装antd【每个项目都安装一次】：   
    npm install antd --save    /   yarn add antd     /  cnpm install antd --save
 
2、在您的react项目的css文件中引入Antd的css【会引入所有css样式】：
    @import '~antd/dist/antd.css';

3、使用具体组件（看文档使用）例如使用Button： 
    1、在对应的组件中引入Antd：        import { Button } from 'antd';
    2、在render()中写入组件：         <Button type="primary">Primary</Button>

1.3 代码示例

1.安装

2.引入antd的css样式

因为在App.js里引入了App.css所以就在App.css头部引入：

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

3.在App.js里使用Antd的按钮组件、小图标组件

在官网查找组件：https://ant.design/docs/react/introduce-cn

import React from 'react';
import './App.css';
import {Button,Icon} from 'antd'; //引入Antd的按钮组件、小图标组件

function App() {
  return (
    <div>
    {/* 使用antd按钮组件 */}
    <Button type="primary">Primary</Button>
    <Button>Default</Button>
    <Button type="dashed">Dashed</Button>
    <Button type="danger">Danger</Button>
    <Button type="link">Link</Button>  <br/>
    {/* 使用小图标组件 */}
    <Icon type="step-forward" />
    </div>       
  );
}
export default App;

效果：

其中的图标样式其实是字体，可以直接改变颜色（此处内嵌样式，也可以外链样式表）：

<Icon type="step-forward" style={{color:'red'}} />

4.使用日历组件

import React, { Component } from 'react';
import {Calendar} from 'antd';

class Home extends Component {
    constructor(props){
        super(props);
        this.state={ }
    }

    //获取日历的参数
    Change=(value, mode)=>{
      console.log(value, mode);
    }
    render() {
      return (
        <div>
        Calendar：
        <div style={{ width: 300, border: '1px solid #d9d9d9', borderRadius: 4 }}>
         <Calendar fullscreen={false} onPanelChange={this.Change} />
        </div>
        </div>
      );
    }
  }
  export default Home;

二、React用Antd高级配置，按需引入css样式配置：

【为什么按需引入css】一步中已经成功使用antd，但在实际开发过程中还有很多问题，例如上面的例子实际上加载了全部的 antd 组件的样式（对前端性能是个隐患）。

【按需引入配置方法】

官方（其中的高级配置）：https://ant.design/docs/react/use-with-create-react-app-cn

    1、安装antd： npm install antd --save

    2、安装（react-app-rewired）一个对 create-react-app 进行自定义配置的社区解决方案 ：
       yarn add react-app-rewired    /  cnpm install  react-app-rewired --save

    3、修改 package.json：

    react-scripts 需改为 react-app-rewired：
    "scripts": {
            "start": "react-app-rewired start",
            "build": "react-app-rewired build",
            "test": "react-app-rewired test --env=jsdom",
            "eject": "react-app-rewired eject"
     }


    
    4、在项目根目录创建一个 config-overrides.js 用于修改默认配置：
    module.exports = function override(config, env) {
         // do stuff with the webpack config...
     return config;
    };

    
    5、安装babel-plugin-import   babel-plugin-import（是一个用于按需加载组件代码和样式的 babel 插件）：
        yarn add babel-plugin-import   /  cnpm install babel-plugin-import --save


    6、修改 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;
     };

    7、然后移除前面在 src/App.css 里全量添加的 @import '~antd/dist/antd.css'; 直接引入组件使用就会有对应的css
                
        import { Button } from 'antd';

        <Button type="primary">Primary</Button>