class properties in ES7 can be used to write elegant React components.

Plain old React class in ES2015:

We use all the goodness of ES6 in rest of our component but this code bothers me, especially those numerous binds. I thought those were unavoidable until I came across class properties in ES7:

We are adding properties on class directly. The context of this is maintained and we don’t need to bind those functions.

This won’t work yet since babel won’t understand this syntax (assuming you are using something like the ES2015 preset). Even though the syntax is still in stage-2 of ES7 as of this writing, babel thankfully has a transform plugin for this.

yarn add --dev babel-plugin-transform-class-properties

And then in webpack add the plugin to babel-loader:

You can add this to your .babelrc as well.


1 .

2 .