Skip to content

Code convention for antd

Sebastian Blade edited this page Mar 3, 2017 · 6 revisions

Any component from react-component should be named with prefix Rc.

// Good
import RcSlider from 'rc-slider';

// Bad
import Slider from 'rc-slider';

All the components of antd should use its name in documentation.

// Good
class Button extends React.Component {}

// Bad
class AntButton extends React.Component {}

This will make it more clear in developer tool.

image

Extends React.Component instead of Component

// Good
import React from 'react';
class Button extends React.Component {}

// Bad
import React, { Component } from 'react';
class Button extends Component {}

Bind this in class definition with ES6 syntax

// Good
class Button extends React.Component {
  onClick = () => {}

  render() {
    return <button onClick={this.onClick} />
  }
}

// Bad
class Button extends React.Component {
  onClick() {}

  render() {
    return <button onClick={this.onClick.bind(this)} />
  }
}

// Bad
class Button extends React.Component {
  constructor(props) {
    super(props);

    this.onClick = this.onClick.bind(this);
  }

  onClick() {}

  render() {
    return <button onClick={this.onClick} />
  }
}

Define static property in class definition

// Good
class Button extends React.Component {
  static propTypes = {...}
  static defaultProps = {...}
}

// Bad
class Button extends React.Component {}
Button.propTypes = {...};
Button.defaultProps = {...};