19 React学习笔记.AntDesign

AntDesign组件库

一. 原生React添加className方法

      

        {/* 原生React中添加class方法 */}
        
我是标题1
        
我是标题2
        
我是标题2
      
    )

二. 第三方库classnames

原生React太繁琐，借助第三方库classnames。

• 写法类似Vue中添加类名。

        {/* classnames库添加class */}
        
我是标题4
        
我是标题5
        
我是标题6
        
我是标题7
        
我是标题8
        
我是标题9
        
我是标题9

三. AntDesign

基于Ant Design的React UI组件库。
特点：

• 企业级中后台交互语言 & 视觉风格
• TypeScript开发
• 全链路开发 & 设计工具体系：业务战略-用户场景-设计目标-交互体验-用户流程-预期效率，全面设计
• 主题定制
  兼容性：
• 现代浏览器，IE11（polyfills）
• 支持服务端渲染
• Electron

一些问题：

• antd的js代码支持ES modules的tree shaking，直接import就会有按需引入作用。
• vue/react用rollup比较多。
• Tree shaking：去除掉没有用过的部分。

四.修改主题

craco：

• 如果直接yarn run eject暴露配置来修改，会增加隐患和不稳定性。
• 现在推荐craco。yarn add @craco/craco
• 修改package.json可以变为craco start等命令。

• 好处在于craco start会读取根目录下的配置文件craco.config.js。可以写入一些webpack的配置，然后对脚手架进行主题更改。

  
  
  image.png

五.修改别名

const CracoLessPlugin = require('craco-less');
const path = require("path");
// __dirname代表当前文件所在路径
const resolve = dir => path.resolve(__dirname, dir)

module.exports = {
  plugins: [
    {
      plugin: CracoLessPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            modifyVars: { '@primary-color': '#1DA57A' },
            javascriptEnabled: true,
          },
        },
      },
    },
  ],
  webpack: {
    alias :{
      "@": resolve("src"),
      "components": resolve("src/components")
    }
  }
};

六. AntDesign案例

• 自己vscode