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".

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".

• javascript
• reactjs
• class
• babeljs
• ecmascript-next

Share Improve this question Follow edited Mar 18, 2018 at 17:42 GG. 21.9k1414 gold badges9292 silver badges133133 bronze badges asked Mar 18, 2018 at 17:13 isarisar 1,79122 gold badges2323 silver badges4040 bronze badges 2

• 1 on the left side if you click on stage-0 it works.. Babel supports them. – illiteratewriter Commented Mar 18, 2018 at 17:17
• Your question is if babel supports them, if i understood you correctly. Yes it does. That is why there is babel preset stage 0. – illiteratewriter Commented Mar 18, 2018 at 17:35

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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.

As @illiteratewriter suggested class properties are supported from Stage 0 preset. For the time being, they are supported until Stage 2 preset:

The proposal must now additionally have a formal description of the syntax and semantics of the feature (using the formal language of the ECMAScript specification). The description should be as plete as possible, but can contain todos and placeholders. Two experimental implementations of the feature are needed, but one of them can be in a transpiler such as Babel.