Document React Hot Loader 3

It features two modes (react-hot-loader/babel and react-hot-loader/webpack), doesn’t hide HMR API (you have to add module.hot.accept call yourself) and has a somewhat different API and setup process.

There’s info in https://github.com/gaearon/react-hot-boilerplate/pull/61 and https://github.com/gaearon/redux-devtools/commit/64f58b7010a1b2a71ad16716eb37ac1031f93915 but we should create good step-by-step docs and update the website too.

This will take a while because it’s not a priority for me. If you want to contribute, you are very welcome! Obviously we can’t release 3.0 without any docs.

[gaearon]

We need to update this intro.

The new intro would be slightly longer because there is a bit more setup involved. I would split it into several sections:

1. Enabling HMR
   • Create a development Webpack config separate from production one
   • Add HotModuleReplacementPlugin to development Webpack config
   • If you only render on the client, consider using WebpackDevServer
     • Easier to set up
     • Enable hot: true and add its entry points
   • If you use server rendering, consider using Express server + webpack-dev-middleware
     • More work but also more control
     • Show how to add webpack-dev-middleware and its entry point
2. Using HMR to replace the root component
   • Show how to add module.hot hook to re-render your root component
   • (This will not preserve state but is good enough for some cases!)
3. Adding React Hot Loader to preserve state
   • If you use Babel:
     • Add react-hot-loader/babel to plugins
   • If you don’t use Babel:
     • Add react-hot-loader/webpack to loaders
   • Add react-hot-loader/patch as the first entry point
   • Change your index.js to render <AppContainer> instead of your root component
   • That’s it!

[janeklb]

@wmertens I agree, its a bit wet so I’ve been doing something like:

// ... all other stuff
import RootElement from './RootElement';

renderWithHotReload(RootElement);

// Hot Module Replacement API
if (module.hot) {
  module.hot.accept('./RootElement', () => {
    const RootElement = require('./RootElement').default;
    renderWithHotReload(RootElement);
  });
}

function renderWithHotReload(RootElement) {
  render(
    <AppContainer>
      <Provider store={store}>
        <RootElement />
      </Provider>
    </AppContainer>,
    document.getElementById('quickpick-root')
  );
}