Setting up hot reloading

Now that we have set up Redux DevTools, we will set up hot reloading. Hot reloading is a way to update code in a React/Redux project without having to refresh the page. At the moment, webpack automatically refreshes the page when some of the code changes (when we save a file). Hot reloading means that the code change will be applied when we save a file, without a full browser refresh.

Hot reloading React components

Let's set up hot reloading for our React components.

1. First of all, we install react-hot-loader, which implements hot reloading for React components:

npm install --save react-hot-loader@next

2. Then, we edit our babel config; open the .babelrc file and add react-hot-loader/babel as a...