ES6 Code Style Guidelines

Question

I recently started to learn ReactJS and therefore ES6. I am very familiar with ES5, but some things are not so clear to me.

Example 1: Method Syntax

What is the difference between the following two methods?

export class InvoiceForm extends React.Component {
    methodName1() {
    }

    methodName2 = () => {

    };
}

Example 2: class properties outside

class Greeting extends React.Component {
  render() {
    return (
      <h1>Hello, {this.props.name}</h1>
    );
  }
}

Greeting.propTypes = {
  name: PropTypes.string
};

propTypesis out of class. But why? I came from python, and as for me, it’s more correct

class Greeting extends React.Component {
  static propTypes = {
    name: PropTypes.string
  }
  render() {
    return (
      <h1>Hello, {this.props.name}</h1>
    );
  }
}

Answer 1

What is the difference between the following two methods?

 methodName1() {   }

the above is a normal function, and the keyword thisin this function refers to the context of the function itself.

, / React, this.setState, ( methodName1, :

this.methodName1 = this.methondName1.bind(this) prefarbaly .

this,

methodName2 Arrow.

 methodName2 = () => {
    };

, , new.target. , React (React.Component),

, JSX, JSX Babel, ES6 ,

Answer 2

?

- (this.__proto__.methodName1), this ES6. - (this.methodName1), this .

propTypes . ?

ES6. JSX , Babel , ES.next static propTypes = ....