Kakka React Coding Convention

kk-react.md

<title>Kakka React Coding Convention</title>

Kakka React Coding Convention

• Only use const for global constants and Pure Components

  // don't do this
  const { profile } = this.state;
  const list = this.getList();
  // do this, use let for local variables
  let { profile } = this.state;
  let list = this.getList();
  // use const for constants
  const LIMIT = 20;
  // use const for Pure Components
  export const ProfileName = ({ profile }) => {
  return <span>{profile.name}</span>;
  };
  

• Function syntax:

  • Use function doSomething() for utility global functions, use const Something = ({propA}) => {} for Pure Components
  • Class method syntax:
    • Use babel’s arrow method syntax

         handleSomething = something => { // do stuff }
      

      for onSomething and handleSomething methods, and other methods that require binding

• Naming

  • Don’t use verbs as class names

  • Method and function names must be verbs, use getSomething if needed

  • For local handler methods to pass to onSomeEvent properties, name them handleSomething. Example:

        handleCancel = e => { // do stuff }
        handleSubmit = e => { // do stuff }
        render() {
            return <div>
                <Button onClick={this.handleCancel}>Cancel</Button>
                <Button type="submit" onClick={this.handleSubmit}>Submit</Button>
            </div>
        }
    

  • For methods and properties that are called when something is done, e.g an HTTP request, name them onSomething at present tense (no ‘ed’)

        onLoadProfile = profile => { // do stuff }
        load() {
            getProfile.then(this.onLoadProfile)
        }
        handleDelete = () => {
            let {onDelete, entry} = this.props
            onDelete && onDelete(entry)
        }
        render() {
            return <Button onClick={this.handleDelete}/>
        }