ES6 code styles best practices

Question

Recently I've started to learn ReactJS and consequently - ES6. I'm quite familiar with ES5, but some things are not that clear for me.

Example 1: Methods 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
};

propTypes is outside the class. But why? I came from python and as for me, the following is more correct

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

In both of your examples, only the first case of each is actually valid ES6 JavaScript, as you're not allowed to assign to properties (whether they are methods or not) directly inside `class { ... }`. — Frxstrem, Dec 03 '17 at 21:52
This is rather a question about the *class properties proposal* ( which is quite unanswerable as its just a proposal) — Jonas Wilms, Dec 03 '17 at 21:56

score 2 · Answer 1 · answered Dec 03 '17 at 22:10

What is the difference between the following two methods?

The first one is prototype method (this.__proto__.methodName1) which is not bound to this context and valid in ES6. The second one is instance method (this.methodName1) which is bound to this context and a part of a proposal.

propTypes is outside the class. But why?

Because class fields aren't supported in ES6. Since the example uses JSX and is supposed to be built with Babel any way, it makes sense to use ES.next features and static propTypes = ... field.

score 1 · Accepted Answer · answered Dec 03 '17 at 22:17

What is the difference between the following two methods?

 methodName1() {   }

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

So if you try to access React class Properties/functions like this.setState you will get an error (if you haven't used binding anywhere for methodName1 like :

this.methodName1 = this.methondName1.bind(this) prefarbaly you want to do it inside constructor method.

If you want to learn more about this binding you can see this Article

However In the second methodName2 syntax, function is written using Arrow function syntax.

 methodName2 = () => {
    };

An arrow function does not have its own this , arguments, super or new.target. Hence this keyword inside this function will refer to the context of the React class (React.Component) as described Here

And regarding your second question

Class properties outside

I believe as it uses JSX , and JSX is supported by Babel and ES6 will almost certainly not cover syntax for defining class variables. You can read more it Here

ES6 code styles best practices

2 Answers2

Linked