Update ReactReduxSpa to React Hot Loader 3, and remove Babel dependency

Author: SteveSandersonMS

templates/ReactReduxSpa/.babelrc

@@ -2,12 +2,14 @@ import './css/site.css';
 import 'bootstrap';
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
+import { AppContainer } from 'react-hot-loader';
 import { Provider } from 'react-redux';
 import { ConnectedRouter } from 'react-router-redux';
 import { createBrowserHistory } from 'history';
-import routes from './routes';
 import configureStore from './configureStore';
 import { ApplicationState }  from './store';
+import * as RoutesModule from './routes';
+let routes = RoutesModule.routes;
 
 // Create browser history to use in the Redux store
 const history = createBrowserHistory();
@@ -16,11 +18,25 @@ const history = createBrowserHistory();
 const initialState = (window as any).initialReduxState as ApplicationState;
 const store = configureStore(history, initialState);
 
-// 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(
-    <Provider store={ store }>
-        <ConnectedRouter history={ history } children={ routes } />
-    </Provider>,
-    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>
+            <Provider store={ store }>
+                <ConnectedRouter history={ history } children={ routes } />
+            </Provider>
+        </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/ReactReduxSpa/ClientApp/boot-client.tsx

@@ -5,7 +5,7 @@ import { StaticRouter } from 'react-router-dom';
 import { replace } from 'react-router-redux';
 import { createMemoryHistory } from 'history';
 import { createServerRenderer, RenderResult } from 'aspnet-prerendering';
-import routes from './routes';
+import { routes } from './routes';
 import configureStore from './configureStore';
 
 export default createServerRenderer(params => {

templates/ReactReduxSpa/ClientApp/boot-server.tsx

@@ -5,13 +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/:startDateIndex?' component={ FetchData } />
 </Layout>;
-
-// Enable Hot Module Replacement (HMR)
-if (module.hot) {
-    module.hot.accept();
-}

templates/ReactReduxSpa/ClientApp/routes.tsx

@@ -13,12 +13,8 @@
     "@types/webpack-env": "^1.13.0",
     "aspnet-prerendering": "^2.0.0",
     "aspnet-webpack": "^1.0.27",
-    "aspnet-webpack-react": "^1.0.4",
+    "aspnet-webpack-react": "^2.0.0",
     "awesome-typescript-loader": "^3.0.0",
-    "babel-core": "^6.5.2",
-    "babel-loader": "^6.2.3",
-    "babel-preset-es2015": "^6.5.0",
-    "babel-preset-react": "^6.5.0",
     "bootstrap": "^3.3.6",
     "css-loader": "^0.23.1",
     "domain-task": "^3.0.0",
@@ -31,6 +27,7 @@
     "node-noop": "^1.0.0",
     "react": "~15.4.0",
     "react-dom": "~15.4.0",
+    "react-hot-loader": "3.0.0-beta.7",
     "react-redux": "^4.4.5",
     "react-router-dom": "^4.1.0",
     "react-router-redux": "5.0.0-alpha.6",

templates/ReactReduxSpa/package.json

@@ -2,8 +2,8 @@
   "compilerOptions": {
     "baseUrl": ".",
     "moduleResolution": "node",
-    "target": "es6",
-    "jsx": "preserve",
+    "target": "es5",
+    "jsx": "react",
     "experimentalDecorators": true,
     "sourceMap": true,
     "skipDefaultLibCheck": true,

templates/ReactReduxSpa/tsconfig.json

@@ -17,7 +17,6 @@ module.exports = (env) => {
         },
         module: {
             rules: [
-                { test: /\.tsx?$/, include: /ClientApp/, use: { loader: 'babel-loader', options: { cacheDirectory: true } } },
                 { test: /\.tsx?$/, include: /ClientApp/, use: 'awesome-typescript-loader?silent=true' }
             ]
         },