Converting `React.createClass` to `extends React.Component` #133

Open
mohebifar opened this Issue Jun 7, 2016 · 1 comment

Projects

None yet

2 participants

@mohebifar
Member

Thanks to @nene's great work, now that lebab supports JSX, I wonder if it would be a good idea to create a new transform that converts this:

const Example = React.createClass({
  render() {
    return <div>Hey</div>;
  }
})

to:

class Example extends React.Component {
  render() {
    return <div>Hey</div>;
  }
}

The thing is that this is something related to React (or preact). I am not sure if it would be a good idea to have such transformers in lebab.

@nene
Collaborator
nene commented Jun 8, 2016

This looks like a useful transform to have. It should also consider all the other differences of ES6 classes from React.createClass, as documented in React docs:

  • No getInitialState(), instead a constructor has to be used.
  • propTypes and defaultProps have to be attached separately. A better way would be using future ECMAScript class-properties syntax, but for this we would need some more parser support.
  • Event handlers have no autobinding, so we'll need to add .bind(this) (probably better than wrapping inside arrow functions).
  • No mixins. I guess we'll just need to skip transforming components that use mixins.

Additionally, this transform should not be enabled by default, like other transforms currently are. This relates to another topic that I've been pondering over: #134

@nene nene added the enhancement label Jun 8, 2016
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment