Porting React Components to ES6

Broonix April 9, 2016
Source
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. Class creation We had been using React.createClass, but with ES6 this changes to extends React.Component. Old [Code block] New [Code block] PropTypes PropTypes are no longer part of the code within the class. They are defined afterwards. Old [Code block] New [Code block] Initial State Initial state is now set in the constructor. Old [Code block] New [Code block] Function Binding You 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. Old [Code block] New [Code block] Other issues Mixins are not supported in ES6. Most libraries are already moving away from them. We did have to update react-router and react-intl. Happy porting and welcome to ES6! Read the original post with all embeds and interactive content at https://rants.broonix.ca/porting-react-components-to-es6/

Discussion in the ATmosphere

Loading comments...