Download
React Hot Loader is a plugin that allows React components to be live reloaded without the loss of state. It works with Webpack and other bundlers that support both Hot Module Replacement (HMR) and Babel plugins. HMR allows us to replace modules in-place without restarting the server. Here’s how you can enable it for different bundlers. The easiest and fastest option to use React Hot Loader with Webpack is to use webpack-dev-server with --hot CLI option. If you’re only rendering on the client side but you have to use some custom node server, this is still an easy option. You can simply copy server.js from the official boilerplate into your project. The important part of the configuration is that when you create a new WebpackDevServer, you need to specify hot: true as an option.
Features
- To update components when changes occur, you need to add some code to your main client entry point file
- As of version 4, React Hot Loader requires you to pass your code through Babel to transform it so that it can be hot-reloaded
- It's possible to chain Webpack loaders so that your code passes through Babel and then TypeScript
- Parcel supports Hot Module Reloading out of the box
- Hot reloading code is just one line in the beginning and one line at the end of each module so you might not need source maps at all
- To make your linked package to be hot reloaded, it will need to use the patched version of react and react-dom
- Webpack plugin will also land a "hot" patch to react-dom, making React-Hot-Loader more compliant to the principles
Project Samples
