Arrow functions as class properties using Babel

Question

Can someone explain how Babel in React supports fat arrow functions as class properties? Using Babel Try it out I can see they are not supported:

class Question {

  // Property (not supported)
  myProp = () => {
    return 'Hello, world!';
  }

  // Method (supported)
  myFunc() {
    return 'Hello, world!';
  }

}

Class properties are not supported in ES6 (correct me if I'm wrong) but then in React (with Babel) they work.

I can see the difference between methods and properties using TypeScript Playground but I can't clearly understand if Babel is supporting them or not. Is there some plug-in?

UPDATE:
I can see they are supported using "babel-preset-stage-0".

Answer 1

To support class properties, you need to install and add babel-plugin-transform-class-properties to the plugins setting of your .babelrc (or in your webpack config).

Note that this plugin is also included in

• babel-preset-stage-0
• babel-preset-stage-1
• babel-preset-stage-2

So if you use one of those, you don't need to install babel-plugin-transform-class-properties by yourself.