React: Use ES6 arrow functions in Classes TO avoid binding your methods with the current This object

Introduction

Working with React sometimes, if you like well-organized and structured code, you will be in the situation to have to do things like:

1	this.minus = this.minus.bind(this);

Using arrow functions

We can avoid having to bind every method by using ES6 arrow functions inside of the class methods. That means that we need to use the babel plugin called “transform-class-properties” explicitly because by now (dec 2016) it is an experimental feature in babel.

How to configure ti use with Babel

If you previously had a project using React with ES6, these are the three changes you should do to achieve it:

Add “transform-class-properties” to .babelrc file.
Change the class method by an arrow function in component class.
Install the babel plugin “babel-plugin-transform-class-properties” using npm i –save-dev babel-plugin-transform-class-properties. (likely in the near future will be included as a babel ootb feature)