Migrate components to ES6 Classes

[rob0rt]

Specifically in the new React version, ES6 Classes were introduced, amongst other features. Is there any work being done/ can a branch be opened to start work on this so the peer dependency can be updated? I know they're not dependent on each other but upgrading the library to comply with the new design would be an awesome step forward.

[rob0rt]

I'd be more than happy to help work on this and migrate components and the docs/ example to the new ES6 Classes and etc.

[DylanPiercey]

What about mixins?

[rob0rt]

I'm not sure actually. It appears like the main Mixin to get rid of is Classable which does appear in a lot of different components. Maybe make it a class of its own and extend React.Component from it, and then have each component extend ClassableReactComponent or something?

[mmrtnz]

@BobertForever I would hold off until after our css refactoring is complete, so we can avoid too many merge conflicts. Currently, Classable is used to allow users to apply their custom styles to components. It looks like React will not have mixin support for ES6 classes at least not anytime soon, so we might have to stick with React.createClass for now. We'll need to look more into ES6 classes to see what would be a good work around.

[rob0rt]

Would creating a Classable ES6 class that extends React.Component work? And then for the components that use only the Classable mixin, just extend Classable instead?
I haven't looked too much into the semantics of React and ES6 classes so I'm not positive this would work but it looks like it might from some preliminary research.

[daniellewissc]

the problem comes when you have more than one mixin, as we will have in many of the components after the css refactoring is done. https://github.com/callemall/material-ui/blob/css-in-js/src/js/mixins/style-propable.js

[rob0rt]

Hmm... I'm trying to think of a solution to that. There's the chained extends which would get complicated. Another option would be to generalize those things out to the point where you could put them into a utility class and just use them like helper functions.

[gilbox]

Just perusing this issue tracker and thought I'd drop my unsolicited 2 cents... here's an approach to es6 mixins

[giltig]

I would recommend take this approach:
https://medium.com/@dan_abramov/mixins-are-dead-long-live-higher-order-components-94a0d2f9e750

[yathit]

I am not fully understand. React router is removing mixin with router context https://github.com/rackt/react-router/blob/master/docs/api/RouterContext.md

[rob0rt]

@yathit that was actually addressed in a few pull requests recently. Material-UI now uses the new React-router context style, not the mixins.

[niln1]

There is a react mixin decorator converting mixins to decorators
https://github.com/timbur/react-mixin-decorator/blob/master/index.jsx

[oliviertassinari]

First attent #1734