Update ReactSpa to React Hot Loader 3. Remove babel dependency.

templates/ReactSpa/ClientApp/boot.tsx

@@ -2,12 +2,28 @@ import './css/site.css';
 import 'bootstrap';
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
+import { AppContainer } from 'react-hot-loader';
 import { BrowserRouter } from 'react-router-dom';
-import routes from './routes';
+import * as RoutesModule from './routes';
+let routes = RoutesModule.routes;
 
-// This code starts up the React app when it runs in a browser. It sets up the routing configuration
-// and injects the app into a DOM element.
-ReactDOM.render(
-    <BrowserRouter children={ routes } />,
-    document.getElementById('react-app')
-);
+function renderApp() {
+    // This code starts up the React app when it runs in a browser. It sets up the routing
+    // configuration and injects the app into a DOM element.
+    ReactDOM.render(
+        <AppContainer>
+            <BrowserRouter children={ routes } />
+        </AppContainer>,
+        document.getElementById('react-app')
+    );
+}
+
+renderApp();
+
+// Allow Hot Module Replacement
+if (module.hot) {
+    module.hot.accept('./routes', () => {
+        routes = require<typeof RoutesModule>('./routes').routes;
+        renderApp();
+    });
+}

templates/ReactSpa/ClientApp/routes.tsx

@@ -5,14 +5,8 @@ import { Home } from './components/Home';
 import { FetchData } from './components/FetchData';
 import { Counter } from './components/Counter';
 
-export default <Layout>
+export const routes = <Layout>
     <Route exact path='/' component={ Home } />
     <Route path='/counter' component={ Counter } />
     <Route path='/fetchdata' component={ FetchData } />
 </Layout>;
-
-// Allow Hot Module Reloading
-declare var module: any;
-if (module.hot) {
-    module.hot.accept();
-}