The React Hot Loader is a tool to reload Javascript on a page as you edit React components (see video for a demo). So far, this works really well for me – I haven’t attempted anything large yet, but this improves development so much that it is clearly going to be the golden path for rapid prototyping.
The documentation appropriately starts with this comment:
// YOU ARE THE JAVASCRIPT GOD.
I’ve spent a few hours with this now, and though it’d be worth documenting how this changes the development process. This seems to work fine without being an expert in the “react way”, if there is such a thing (in that I am not, and was able to work without issues)
So far I have seen the following advantages from this:
- Immediate visual feedback on save (I switched to Visual Studio code at the same time, which is also excellent)
- Once you set this up, you seem to get things like ES6 for free
- You can paste a debugger statement wherever you want, and if it’s in the render loop, you’ll get dropped there almost immediately
- console.log is now as effective as the immediate window in a real debugger, if you add it in the render loop
I also ran into a few gotchas, although all quite minor: