React Hot Module Reloading #react #hot_reload #webpack

React_Hot_Module_Reloading.md

How to setup Hot Module Reloading as per Brian Holts FrontendMasters Course:

1. .babelrc

"plugins": [
	"react-ho-loader/babel",
]

2. webpack.config.js

• import webpack:

const webpack = require('webpack');

• add entry points(order matters here!):

entry: [
	'react-hot-loader/patch',
    'webpack-dev-server/client?http://localhost:8080',
    'webpack/hot/only-dev-server',
    './js/ClientApp.jsx' #App entrypoint
]

• configure devServer:

devServer: {
	hot: true,
	#...
}

• Add plugins:

plugins: [new webpack.HotModuleReplacementPlugin(), new webpack.NamedModulesPlugin()]

3. Extract App Entrypoint from RenderPoint

• ClientApp.jsx:

import React from 'react';
import { render } from 'react-dom';
import App from './App';

const renderApp = () => {
  render(<App />, document.getElementById('app'));
};
renderApp();

if (module.hot) {
  module.hot.accept('./App', () => {
    renderApp();
  });
}

• App.jsx:

import React from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import Landing from './Landing';
import Search from './Search';

const FourOhFour = () => <h1>404</h1>;

const App = () => (
  <BrowserRouter>
    <div className="app">
      <Switch>
        <Route exact path="/" component={Landing} />
        <Route path="/search" component={Search} />
        <Route component={FourOhFour} />
      </Switch>
    </div>
  </BrowserRouter>
);

export default App;