Gary Sieling

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:

    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).
  • Exit mobile version