Blog

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

Hi,

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.

image

Picture: 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

 

Hope that it helps!

@jquintozamora

Leave a Reply

Your email address will not be published.

Time limit is exhausted. Please reload CAPTCHA.

Post Navigation