Add proper hot-reload to create-react-app

When you change something in a create-react-app your app will kindly reload, that's great, but it will do it reloading the page, losing the current state.

"Proper" hot-reload instead will reload the single changed component, keeping it's state... it's a wonderful developer experience.
In CRA the webpack configuration is normally unreachable, so we'll use some great package (react-app-rewired and react-app-rewire-hot-loader) to allow our changes, here's a quick step-by-step guide on how to do it without going into much details:

• yarn add -D react-app-rewired react-hot-loader react-app-rewire-hot-loader

• Create a config-overrides.js file on your project root with this content:

  const rewireReactHotLoader = require('react-app-rewire-hot-loader')
  
  /* config-overrides.js */
  module.exports = function override(config, env) {
    config = rewireReactHotLoader(config, env)
    return config
  }
  

• Change your react-scripts to react-app-rewired in your package.json

  "start": "react-app-rewired start",
  "build": "react-app-rewired build"
  

• Wrap your app in the hot HOC:

  // Hot-loader
  import {hot} from 'react-hot-loader'
  
  ...
  export default hot(module)(App)
  

That's it!
Rerun your dev-server with yarn start and your proper hot reload should be working.