Porting React Components to ES6
Broonix
April 9, 2016
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