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

on the left side if you click on `stage-0` it works.. Babel supports them. — illiteratewriter, Mar 18 '18 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, Mar 18 '18 at 17:35

GG. · Accepted Answer · 2018-03-18T17:45:08.480

3

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

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

edited Mar 18 '18 at 17:45

answered Mar 18 '18 at 17:37

GG.

17,726
11
69
117

isar · Answer 2 · 2018-03-18T17:51:26.847

0

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

edited Mar 18 '18 at 17:51

answered Mar 18 '18 at 17:36

isar

1,390
15
28

They are still in stage 2 (https://github.com/tc39/proposal-class-public-fields). – GG. Mar 18 '18 at 17:44
1

@GG. Sorry, I messed up with the transpiler. I've updated my answer, thank you. – isar Mar 18 '18 at 17:54

Arrow functions as class properties using Babel

2 Answers2

Linked