Config WebPack hot-realod

react-hot-load.md

Initial env

We started with custom webpack config (without any boilerplate)

1. Webpack 2.0
2. Webpack-server
3. Lots of code have been already written
4. Babel
5. Sass + PostCss

Aim

Firstly, we tried to implement styles hot-reloading, but because we use import styles from './index.scss' we must reload the whole file, so why not implement react commponents update with react-hot-load.

Instruction

You can find most of the information in this posts (read in order):

1. gaearon/react-hot-loader#243 (comment)
2. gaearon/react-hot-loader#243 (comment)
3. https://gaearon.github.io/react-hot-loader/getstarted/

Be aware:

1. AppContainer IS REACT-HOT-MODULE COMPONENT. I didnt pay my attention to this component, because i was thinking it must be one of projects component.
2. You MUST reqire new instance of your main component (that is in ReactDOM.render) when module.hot.accept callback triggers.
3. You can import "react-hot-loader/patch" in you entry file on the top of it

To sum up:

So you must create function (lets call it main) that will import \ require your main component (like Provider or Router or anything else), that must be in AppContainer component and return all of this. Then you use main in your entry file and in module.hot.accept callback

MyApp.js

import { AppContainer } from 'react-hot-loader'

const MyApp = () => {
  return(
    <AppContainer>
      // Your component like <Provider> or <Router> or anything else
    </AppContainer>
  )
}

index.js

function main(){
  const MyApp = require('pathTo/MyApp').default
  
  ReactDom.render(MyApp, document.getElementById(...),
}

main()

if (module.hot) {
	module.hot.accept('pathTo/MyApp', () => {
		main()
	})
}