Autobinding, React, and ES6 classes

The Ticket Arena update from React 0.12 to 0.13 includes many of the new features ES6 brings to JavaScript. We’ve been using Babel and Webpack to make sure we maintain browser compatibility with as many new features as possible.

In particular, we use class to write the React component like this:

import React from 'react';
let {Component, PropTypes} = React;
export default class MyComponent extends Component 
{
  // lifecycle methods and statics
  ... 
  // render actual DOM output
  render() {
    return Copy the code
      

       ;
   }
}

MyComponent.propTypes = { foo: PropTypes.bool.isRequired}
      

Among the several removed features that we relied on in previous versions of React, notably mixins, are some less obvious, automatic binding.

useReact.createClassAutomatic binding

In the past, when you used this.handler in eventListener React would magically bind the handler to this of the current object, this.handler === this.handler.bind(this). However, this feature was removed when transitioned to ES6 classes, but thankfully we have a super simple workaround, the arrow function!

You can see the Facebook implementation in detail in the ReactClass source code.

Arrow function

Arrow functions do not define their own this value, but instead the this of the current context. Function (x) {return this.y * x}.bind(this).

How do we use it in React? Ok, this is a minor problem, ES6 does not allow this in the class definition to initialize attributes (foo = ‘bar’;). . However, it can be supported through Babel with the following Settings: “optional”: [“es7.classProperties”].

To rewrite the previous code, we can simulate auto-binding:

import React from 'react';
let {Component, PropTypes} = React;
export default class MyComponent extends Component
{
// lifecycle methods and statics
  static propTypes = { foo: PropTypes.bool.isRequired }
  handler = (e) => { ... } // render actual DOM output
  render() {
    return Copy the code
      

       ; }}
      

You can check out more on the React blog.