/ react

Hot reloading stateless components with react hot loader 3

Hot reloading with webpack and react is really cool & useful. In the past it had some limitation & complicated configurations. One of the most problematic one was hot reloading react 0.14 stateless components which I really love.

The announcement:

With react hot loader 3 on the horizon solving much of it's limitation, it now supports hot reloading stateless components.

Plus:

  • Works great with higher order components.
  • Little configuration.
  • Disabled in production.
  • Works with or without Babel.

Pretty cool huh?
But.. it's in alpha.
You can still try it out, it works great!

Setup Example

Installing alpha version of hot loader 3

npm i --save-dev react@15.0.1 react-dom@15.0.1 react-hot-loader@3.0.0-alpha.9

Webpack config:

Server config:

.babelrc file:

Our App:

Main:

If you now tweak your "Hello" component in App.js, which is a stateless function. It will apply hot update to the app and preserve state as well.

For a complete example see react hot boiler plate.

More info and discussion about this upcoming update.