{"action":"created","issue":{"url":"https://api.github.com/repos/facebook/react/issues/613","labels_url":"https://api.github.com/repos/facebook/react/issues/613/labels{/name}","comments_url":"https://api.github.com/repos/facebook/react/issues/613/comments","events_url":"https://api.github.com/repos/facebook/react/issues/613/events","html_url":"https://github.com/facebook/react/issues/613","id":23294965,"number":613,"title":"Use ES6 Classes to create React components.","user":{"login":"jordwalke","id":977348,"avatar_url":"https://avatars.githubusercontent.com/u/977348?v=3","gravatar_id":"","url":"https://api.github.com/users/jordwalke","html_url":"https://github.com/jordwalke","followers_url":"https://api.github.com/users/jordwalke/followers","following_url":"https://api.github.com/users/jordwalke/following{/other_user}","gists_url":"https://api.github.com/users/jordwalke/gists{/gist_id}","starred_url":"https://api.github.com/users/jordwalke/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/jordwalke/subscriptions","organizations_url":"https://api.github.com/users/jordwalke/orgs","repos_url":"https://api.github.com/users/jordwalke/repos","events_url":"https://api.github.com/users/jordwalke/events{/privacy}","received_events_url":"https://api.github.com/users/jordwalke/received_events","type":"User","site_admin":false},"labels":[],"state":"closed","locked":false,"assignee":null,"milestone":null,"comments":12,"created_at":"2013-11-26T05:40:53Z","updated_at":"2015-03-01T06:02:13Z","closed_at":"2014-04-10T04:23:40Z","body":"Let's use ES6 classes to create React component classes. We've accumulated some custom concepts that don't lend themselves to using ES6 classes but we can still use them in conjunction with React components as ES6 classes, if the separation is performed as \"enhancers\" on top of completely pure ES6 classes:\r\n\r\n    class Typeahead extends ReactComponent {\r\n       render() {\r\n\r\n       }\r\n     }\r\n     \r\n     // Enhancers\r\n     ReactComponent\r\n     ReactComponent.autoBindMethods(Typeahead);\r\n     ReactComponent.validatePropTypes(Typeahead);\r\n     ReactComponent.applyMixins([MixinOne, MixinTwo]);\r\n\r\n     module.exports = Typeahead;\r\n\r\n\r\n- Blockers:\r\n    - Probably want to call the base class `ReactComponent` even though the base class of our components today is called `ReactCompositeComponent`. We just need to rename `ReactCompositeComponent` to `ReactComponent` and `ReactComponent` to `ReactComponentBase`.\r\n    - Right now `React.createClass` doesn't return the constructor. It returns the \"convenience constructor\" which can be invoked without `new`. We can unify the two concepts and eliminate convenience constructors altogether.\r\n    - Determine how to support autobinding (likely an \"enhancer\" as shown above).\r\n    - Get rid or (or figure out way to abstract out) special proprietary handling of overridden methods like `componentWillMount`, `componentWillReceiveProps` - there aren't classical OO equivalents.\r\n    - Of these proprietary handlers, some are for the purpose of validation (preventing people from overriding base class methods). Others add actual functionality. We can do whatever we have to to ensure validation, but the additional functionality should be factored out of the class hierarchy, into special \"enhancers\" as I've hinted at at the bottom of the previous example. It should be possible to program with pure, straight up ES6 classes.\r\n   - The main challenge with our proprietary handlers is how we allow multiple mixins to redefine properties, and `ReactCompositeComponent` will attempt to intelligently merge their results. It is okay to factor all of that out into helper utilities, and we can supply a code mod that automatically updates your code that uses mixins.\r\n\r\n- This is a huge undertaking. Before anyone takes a shot at this - please lock down the API. For ES6 related questions, run ideas by @jeffmo and @sebmarkbage who understand the direction of ES6. I'm happy to chat about the feasibility of potential changes to the React core, and practical ways to get started.\r\n- This might require tiny changes to the JSX transformer - but I'm sure @jeffmo could get these done (or help) in minutes - they're quite easy."},"comment":{"url":"https://api.github.com/repos/facebook/react/issues/comments/76577939","html_url":"https://github.com/facebook/react/issues/613#issuecomment-76577939","issue_url":"https://api.github.com/repos/facebook/react/issues/613","id":76577939,"user":{"login":"ericelliott","id":364727,"avatar_url":"https://avatars.githubusercontent.com/u/364727?v=3","gravatar_id":"","url":"https://api.github.com/users/ericelliott","html_url":"https://github.com/ericelliott","followers_url":"https://api.github.com/users/ericelliott/followers","following_url":"https://api.github.com/users/ericelliott/following{/other_user}","gists_url":"https://api.github.com/users/ericelliott/gists{/gist_id}","starred_url":"https://api.github.com/users/ericelliott/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ericelliott/subscriptions","organizations_url":"https://api.github.com/users/ericelliott/orgs","repos_url":"https://api.github.com/users/ericelliott/repos","events_url":"https://api.github.com/users/ericelliott/events{/privacy}","received_events_url":"https://api.github.com/users/ericelliott/received_events","type":"User","site_admin":false},"created_at":"2015-03-01T06:02:13Z","updated_at":"2015-03-01T06:02:13Z","body":"Please [don't use ES6 class or class inheritance at all](https://medium.com/javascript-scene/the-two-pillars-of-javascript-ee6f3281e7f3), anywhere.\r\n\r\nSpecifically in the context of React, you'll be [completely missing the point of reactive programming](https://medium.com/javascript-scene/the-two-pillars-of-javascript-pt-2-functional-programming-a63aa53a41a4).\r\n\r\nSuper is a code-smell anywhere, but it's particularly abhorrent in reactive programming.\r\n\r\n> \"Sometimes, the elegant implementation is just a function.  Not a method.  Not a class.  Not a framework.  Just a function.\" ~ John Carmack"}}