{
  "$type": "site.standard.document",
  "path": "/porting-react-components-to-es6/",
  "publishedAt": "2016-04-09T12:11:19.000Z",
  "site": "at://did:plc:6gssgguzeecdttuw4gpdshg2/site.standard.publication/self",
  "tags": [
    "react",
    "javascript",
    "es6"
  ],
  "textContent": "I've been meaning to do this for a while, but we finally ported all our React code to ES6 classes. The migration was pretty simple, but I figured sharing my notes might help someone out there.\n\nClass creation\n\nWe had been using React.createClass, but with ES6 this changes to extends React.Component.\n\nOld\n\n[Code block]\n\nNew\n\n[Code block]\n\nPropTypes\n\nPropTypes are no longer part of the code within the class. They are defined afterwards.\n\nOld\n\n[Code block]\n\nNew\n\n[Code block]\n\nInitial State\n\nInitial state is now set in the constructor.\n\nOld\n\n[Code block]\n\nNew\n\n[Code block]\n\nFunction Binding\n\nYou might not know, but React does some magic internally when you use createClass. This includes auto-binding this to your functions. If you have a function that needs access to the component, you now need to bind it in the constructor.\n\nOld\n\n[Code block]\n\nNew\n\n[Code block]\n\nOther issues\n\nMixins are not supported in ES6. Most libraries are already moving away from them. We did have to update react-router and react-intl.\n\nHappy porting and welcome to ES6!\n\nRead the original post with all embeds and interactive content at https://rants.broonix.ca/porting-react-components-to-es6/",
  "title": "Porting React Components to ES6"
}