React Hot Loader: First Thoughts

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.

It is a bit fiddly to set up the first time – it took me a while to get this working with Express, because everything is in flux (see previous post

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:

Since this is bleeding edge stuff, sample projects don’t work on Windows

Occasionally you will be forced to reload the page, and it won’t always warn you – e.g. if you change setInitialState you would obviously need to reload to test the changes

It also doesn’t reload on npm install (or seem to notice), although I imagine this could be a hard problem

You probably will want to leave console window open in case it gets screwed up, e.g. if you are in a style window you can miss out on it being broken

Requires buy-in to a particular toolset (webpack) which the React team refers to as an “upgrade” from Browserify. I’m not really in a position to comment on this, but I could imagine it being a pain if you have an existing build script. I also have yet to find useful answers in the webpack documentation – the most best path right now seems to be to find the newest example projects on github and fork it (with the caveat about some of these being painful on Windows).