React on ES6+ about react-hn HOT 4 CLOSED

This was one of the apps I wrote to learn React, so there are lots of things which need to be addressed (getting rid of mixins, replacing state management with something which better enables rendering to be optimised, etc.).

It already uses a bunch of ES6 syntax and a re-do would use more of it - ES6 import syntax etc. - but I'm not a fan of extends Component because you lose autobinding and have to enable experimental features in Babel to make it as palatable as createClass, since ES6 classes are unfortunately just weak sugar.

from react-hn.

I see, thanks!

from react-hn.

Regarding extends Component, tbh, even though you may wind up using experimental decorators for class syntax, it isn't bad... one benefit, is you can still use straight function syntax for example with redux, to export a default as a wrapped version, as well as a raw version for testing against...

import { Component } from 'react';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { bind, ... } from 'core-decorators';
...

export FooComponent extends Component {
  // declare mapping with the component as static members
  static mapProps = (state) => ...
  static mapActions = (dispatch) => ...

  @bind
  onClick() {
    this.actions.onClick(...);
  }

  render() {
    // note: bound properties won't trigger a mismatch/rerender.
    return <button onClick={this.onClick}>ClickMe</button>;
  }
}

export default connect(FooComponent.bindProps, FooComponent.mapActions)(FooComponent);

Though, I find that for the most part, In practice, I'll do the state/action mapping a little higher, and pass actions/properties into pure-render functions. I really don't like the createClass syntax at all.

from react-hn.

I'll probably come round to it once I've given the sugar its 5 minutes. I have to write some of the documentation for the upcoming version of nwb using extends Component as some of the transforms nwb enables by default don't support createClass and don't seem to have plans to.

Class properties (and decorators) are now stage 2, so will work out of the box with zero configuration in the upcoming version of nwb, which is the kind of sweet spot Babel 5 had reached with object rest/spread syntax when I bought into that.

from react-hn.