HMR is an opt-in feature, meaning that you must explicitly specify what exactly should happen when new versions of modules are becoming available at runtime in the code.

Try to start the app by running npm start and edit the components/Layout/Layout.js file; you should see the following output in the browser's console window:

[HMR] bundle rebuilding 
[HMR] bundle rebuilt in 445ms 
[HMR] Checking for updates on the server... 
[HMR] The following modules couldn't be hot updated: 
      (Full reload needed) 
[HMR]  - ./components/Layout/Layout.js 

That's the expected behavior because, at this moment, the code doesn't provide instructions to HMR on what to do with the new ./components/Layout/Layout.js module. When this module is loaded into the active runtime, HMR first checks whether this module contains a call to the module.hot.accept(...) method, and if it does, tries to execute it. If this method is not found, HRM traverses the dependency tree from...