Converting Javascript objects to ES6 classes

If you are upgrading React, you may find situations where you want to switch from Javascript objects to ES6 classes.

For instance, say you have these objects:

var MyMixin = {
  componentShouldUpdate: function() {
    // some logic
  }
}

React.createClass({
  mixins: [MyMixin]
  getInitialState: function() {
    // do some stuff...
  },
  render: function() { 
    return (
)
  }
})

Ideally you would convert everything to classes, and use inheritance to get the mixin in:

class MyMixin {
  function componentShouldUpdate() {
    // some logic
  }
}

class MyComponent {
  constructor() {
    // do some stuff...
    this.state = {}
  }

  render() { 
    return (
)
  }
})

If you can’t do this (e.g. the mixin is in a library, or it’s too much code to change at once), you can also monkey-patch the mixin’s methods into a base class for the component:

var MyMixin = {
  componentShouldUpdate: function() {
    // some logic
  }
}

class MyComponent extends (
  React.createClass({ 
    mixins: [MyMixin],
    render: () => {}
  }) {
  constructor() {
    // do some stuff...
    this.state = {}
  }

  render() { 
    return (
)
  }
})