Es2015 classes

[cpojer]

This is live from JSConf. Will explain later.

[oliviertassinari]

Looks like this is related to Evolving Complex Systems Incrementally. https://www.npmjs.com/package/react-codemod and https://github.com/cpojer/js-codemod.

[cpojer]

Yes you are correct! Someone mentioned this project on Twitter when I asked for a big open source project that uses React.createClass. I tried to do a really cool and fun demo where I transform a lot of code automatically and then send out a live pull-request. People liked it and the video should be available soon.

I tested it locally using npm start in docs. It seems like travis uses a different copy of React and it doesn't load app.jsx. Let me know if you want this change (inlining PureRenderMixin is not necessarily awesome) or not. I'm happy to help adjust the transform to use patterns that work well for you. Alternatively, feel free to run this yourself: https://github.com/facebook/react/tree/master/packages/react-codemod :)

[oliviertassinari]

I would refer to this issue facebook/react#613 (comment) regarding benefits and drawbacks of using ES6 classes.
Wow, great talk Christoph Pojer: Evolving Complex Systems Incrementally | JSConf EU 2015!

[cpojer]

Thanks for building a project that I could use for my demo! :)

[shaurya947]

Thanks @cpojer! This is a big thing for MUI :-)

Regarding the PR itself, I'm not sure whether we want to abandon the React.createClass syntax -- at least until we've replaced mixins with higher-order components. What do you guys think? cc: @oliviertassinari @hai-cea

[oliviertassinari]

I'm wondering. What is the advantage of using the bind operator?
This pattern seems to make the code maintainability harder.
Couldn't we use an arrow function or an @autobind?

(Related to #2439)

[cpojer]

ES2015 class components don't use autobinding like React.createClass does. So you need to bind event handlers manually. If you want to use @autoBind or whatever other solution, the codemod can be adjusted and re-run to use that. Another solution we are hoping to make part of the ES2015 spec is to be able to define arrow functions as class properties, like this:

class A {
  onClick: () => this.foo();
} 

which would avoid the need for calling bind. But this hasn't been added to the next version of ES yet.

[oliviertassinari]

Ok thanks!
We are going to use the @autobind to beging with this migration.

[alitaheri]

I'm going to close this issue. thanks for letting us know this tool exists. we'll use it to migrate our codebase, thanks a lot 👍 👍