CSS/React Hot Reloading

I think one of the best parts of something like this is that typically complex things to setup like hot reloading just work out of the box. It brings those advanced workflows to everyone.

Hot reloading is such a crucial part of my dev experience, and this project could expose it to others. The only problem is that React hot reloading doesn’t work all the time, so I don’t know if that is too confusing to beginners.

I haven’t looked at how this project actually works yet, but I can’t think of any reason why this wouldn’t work. Just automatically include webpack-hot-middleware in dev mode, add the right entry point, add the right babel transform, etc. It can be completely hidden from the user.

[asbjornenge]

What? React hot-reloading is like the main reason I would want (and need) this tool 😲

[Scimonster]

It seems it’s actually very simple to add HMR for React to your app. See https://medium.com/@sheepsteak/adding-hot-module-reloading-to-create-react-app-e053fadf569d#.fxu5lgi3z. It’s literally an extra 10 lines of code.

Before:

ReactDOM.render(
    (
        <Provider store={store}>
            <App />
        </Provider>
    ),
    document.getElementById('root')
);

After:

function render(Component) {
    ReactDOM.render(
        (
            <Provider store={store}>
                <Component />
            </Provider>
        ),
        document.getElementById('root')
    );
}

render(App);

if (module.hot) {
    module.hot.accept('./App', () => {
        const NextApp = require('./App').default;
        render(NextApp);
    });
}