Hot Reload a React App in Development with react-hot-loader

Can you please explain why you do not install react-hot-loader as a dev-dependency? I saw some examples on the web where import {hot} ... was not used, and instead if (module.hot)... was used along with slightly different implementation (module.hot.accept(...), etc.) What do you think of this kind of approach in regards to installing react-hot-loader as a dev-dependency? I am also wondering what implications of using react-hot-loader as a dev-dep you would see in terms of having react-hot-loader/babel in .babelrc as an element in plugins array - instead of having it in dev-related webpack config. I checked the production build of my project (with react-hot-loader as a dev-dep) and it went fine.

@Artificial Labs, if you check the github page of react-hot-loader it says this

"Note: You can safely install react-hot-loader as a regular dependency instead of a dev dependency as it automatically ensures it is not executed in production and the footprint is minimal."

So its safe to be used as a normal dependency

I was following along in a windows based environment and output was not showing when the code changed from Count: {this.state.count} to Count: {count}.

using this code instead had me up and running again.

        <h2 className={this.state.count > 10 ? 'warning' : null}>
            Count: {this.state.count}
        </h2>

why isn't module undefined here, I checked my console and module is actually an object. Please inform where does this module object come from?

why isn't module undefined here, I checked my console and module is actually an object. Please inform where does this module object come from? module comes from webpack. You can read more about it here: https://webpack.js.org/api/module-variables/#module-hot-webpack-specific-

I was following along in a windows based environment and output was not showing when the code changed from...

@mark - are you missing the line at the top of the render method where state is destructured: const {count} = this.state?

The OS you're developing on shouldn't change this behavior.

Hi Andy,

First of all, I'd like to thanks for such a great tutorial. I have 2 questions in this section.

1. Why not just use webpack default HotModuleReplacementPlugin instead of react-hot-loader?

i.e. ./webpack.config.dev.js ... +const webpack = require('webpack')

module.exports = merge(baseConfig, { mode: 'development', devServer: { port: 9000, hot: true }, devtool: 'source-map',

• plugins: [new webpack.HotModuleReplacementPlugin()] })

./src/index.js

if (module.hot) { module.hot.accept('./App', () => { ReactDOM.render(<App />, document.getElementById('app')) }) }

2. What if I need to connect redux store and hot reload? Can you simplify a demo?

Thanks. Darren

Hi Andy,

Just want to ask, where did the --watch go?

Thanks

Hi Andy,

Is there a way to get HMR work for CSS changes as well ?

When I make changes to .css files, the browser reloads instead of just changing the styles.

Thanks

@Kane, In lesson 13 Andy replaced the "dev" script call in package.json with webpack-dev-server which automatically does a --watch.

Why is react-hot-module a babel plugin not a webpack plugin ?