Refactor render arrow functions

[warlo]

Having debugged a problem while using server rendering for two days I figured that the render functions in slate does not work nicely with react-prepare's component check. The reason is that when using the render() {} method it transpiles to

  _createClass(Test, [{
    key: "render",
    value: function render() {}
  }]);

and is therefore possible to determine the render property on the prototype. While render = () => transpiles to this.render = function () {}; and results in undefined render on the prototype. This makes _callClassCheck raise TypeError("Cannot call a class as a function");, since this is undefined due to no preparation of the component in react-prepare.

Babel transpile examples are provided here

I've done some research and haven't really found much usage of the render as arrow functions, is this done by intention? My understanding was that arrow functions usually are used for helper methods and event handlers in components for implicit .bind(), but not for the render method itself.

One could argue that this is something that should be accepted and improved in react-prepare, but I think that slate should use the most common practice.

[ianstormtaylor]

Fair enough @hanswilw, thanks! I only did the arrow function version because it was easier to not have to distinguish between when to use arrows and when not. But this does seem more "correct", so I'm happy to change.