Working with React sometimes, if you like well-organized and structured code, you will be in the situation to have to do things like:
this.minus = this.minus.bind(this);
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.
Arrow function example. More info about arrow functions.
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)
Take a look to this github commit to see the changes in detail: https://github.com/jquintozamora/react-es6-webpack-minimal-starter-template/commit/7818c657864d66e8ded99de5ff633db013d125c2?diff=unified