Transitioning React components to ES6 isn’t all different and seemed to have flowed quite nicely, until I learnt that I had to manually bind all my component’s functions to this. I felt like someone had just squirted ketchup all over my Oreo Sundae.
It turns out that one lovely thing about React.createClass was that it was automatically binding all the component’s functions. So whats the ES6 solution for this?
We’ll we could manually bind every function in our component like such:
That seriously sucks. Having to type all that for each function in every component makes my skin cringe. So instead, let’s write our own class that every component can inherit from, to make this code alot more DRY and easier to the eye.
Now that we’ve defined our ReactTemplate, we can extend from that on all our components. Later on, we can also add more helper functions to this template when necessary.