React Learn — Ant Design

This is the 11th day of my participation in the Gwen Challenge in November. Check out the details: The last Gwen Challenge in 2021

AntDesign, antD for short, is a React UI component library based on AntDesign system, which is mainly used to develop enterprise-level middle and background products

• The products of the middle and background are instrumental products, and many excellent design teams have formed their own design system through their own exploration and accumulation

• Antd’s JS code supports tree shaking based on ES Modules by default

  For the JS part, importing import {Button} from ‘antd’ directly will have the effect of loading on demand

The basic use

#Use yarn as an example.
$ yarn add antd

#Antd separates ICONS into a library - @ant-design/ ICONS
#So if you want to use ICONS in ANTD, you need to install @ant-design/ ICONS separately
$ yarn add @ant-design/icons
Copy the code

// ANTD separates the style file into a single CSS file
// If you want to use the corresponding style, you need to introduce it in the entry index.js
import 'antd/dist/antd.css';
Copy the code

craco

The create-React-app scaffolding is developed based on WebPack

By default, create-React-app hides all webPack configuration

In practice, however, we did have some cases where we needed to manually override the default WebPack configuration

At this point, craco, a third-party library, can be used

#The installation
$ yarn add @craco/craco -D
Copy the code

Start the corresponding project using CrACO

"scripts": {
// Use craco instead of React-scripts to start react scaffolding
"start": "craco start"."build": "craco build"."test": "craco test",}Copy the code

Create craco.config.js in the root directory of the project

At compile time, the configuration of Craco.config.js is automatically merged with the default webpack configuration

Configure an alias

craco.config.js

const path = require('path')

module.exports = {
  // Write the configuration of webPack that needs to be overridden here
  webpack: {
    alias: {
      The '@': path.resolve(__dirname, './src')
    }
  }
}s
Copy the code

Configure the topic

According to Antd Design’s configuration topic requirements, a custom topic needs to use the less variable override function similar to that provided by less-Loader

We can introduce craco-less to help load less styles and modify variables

#The installation
yarn add craco-less -D
Copy the code

Main entry -- index.js

// Change the imported CSS file to less
import 'antd/dist/antd.less'
Copy the code

craco.config.js

const CracoLessPlugin = require('craco-less')

module.exports = {
  plugins: [{plugin: CracoLessPlugin,
      options: {
        lessLoaderOptions: {
          lessOptions: {
            modifyVars: { '@primary-color': '#1DA57A' },
            javascriptEnabled: true,}}}}]}Copy the code

The sample

App.js

import { PureComponent } from 'react'

import Comment from '@/components/comment'
import CommentItem from '@/components/commentItem'
import dayjs from 'dayjs'

export default class App extends PureComponent {
  constructor(props) {
    super(props)

    this.state = {
      commentList: []}}render() {
    return (
      <div style={{ width: '500px' }}>
        {
          this.state.commentList.map((comment, index) =>
            <CommentItem
              key={ comment.id }
              comment={comment}
              handleRemove={() = > this.handleRemove(index) }
            />
          )
        }
        <Comment submit={ content= > this.submit(content) }/>
      </div>)}submit(content) {
    const comment = {
      id: Date.now(),
      nickname: 'coderxf'.avatar: 'https://p9-passport.byteacctimg.com/img/user-avatar/745c26f761d5ad2b65d79f98eee61a5f~300x300.image',
      content,
      datetime: dayjs()
    }

    this.setState({
      commentList: [ ...this.state.commentList, comment ]
    })
  }

  handleRemove(index) {
    const commentList = [...this.state.commentList]
    commentList.splice(index, 1)

    this.setState({
      commentList
    })
  }
}
Copy the code

comment.js

import { PureComponent } from 'react'

import { Input, Button } from 'antd'
const { TextArea } = Input

export default class Comment extends PureComponent {
  constructor(props) {
    super(props)

    this.state = {
      content: ' '}}render() {
    return (
      <div>
        <TextArea rows={4} value={this.state.content} onChange={e= > this.handleInput(e)} />
        <Button type="primary" onClick={() = > this.submit() }>add comment</Button>
      </div>)}handleInput(e) {
    this.setState({
      content: e.target.value
    })
  }

  submit() {
    this.props.submit(this.state.content)

    this.setState({
      content: ' '}}})Copy the code

commentItem.js

import { PureComponent } from 'react'
import { Comment, Tooltip, Avatar } from 'antd'
import { DeleteOutlined } from '@ant-design/icons'
import dayjs from 'dayjs'
import relativeTime from 'dayjs/plugin/relativeTime'

dayjs.extend(relativeTime)

export default class CommentItem extends PureComponent {
  render() {
    return (
      <Comment
      actions={[<span onClick={this.props.handleRemove}><DeleteOutlined />delete</span>]}
      author={this.props.comment.nickname}
      avatar={<Avatar src={ this.props.comment.avatar } alt={ this.props.comment.nickname} / >}
      content={<p>{this.props.comment.content}</p> }
      datetime={
        <Tooltip title={dayjs().format('YYYY-MM-DD HH:mm:ss')} >
          <span>{dayjs().from(this.props.datetime)}</span>
        </Tooltip>} / >)}handleRemove() {
    this.props.handleRemove()
  }
}
Copy the code