Skip to content

Commit 48b923f

Browse files
SteveSandersonMSSteveSandersonMS
committed
Update ReactReduxSpa to React Hot Loader 3, and remove Babel dependency
1 parent eeaf4e6 commit 48b923f

7 files changed

Lines changed: 31 additions & 27 deletions

File tree

‎templates/ReactReduxSpa/.babelrc‎

Lines changed: 0 additions & 3 deletions
This file was deleted.

‎templates/ReactReduxSpa/ClientApp/boot-client.tsx‎

Lines changed: 25 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,14 @@ import './css/site.css';
22
import 'bootstrap';
33
import * as React from 'react';
44
import * as ReactDOM from 'react-dom';
5+
import { AppContainer } from 'react-hot-loader';
56
import { Provider } from 'react-redux';
67
import { ConnectedRouter } from 'react-router-redux';
78
import { createBrowserHistory } from 'history';
8-
import routes from './routes';
99
import configureStore from './configureStore';
1010
import { ApplicationState } from './store';
11+
import * as RoutesModule from './routes';
12+
let routes = RoutesModule.routes;
1113

1214
// Create browser history to use in the Redux store
1315
const history = createBrowserHistory();
@@ -16,11 +18,25 @@ const history = createBrowserHistory();
1618
const initialState = (window as any).initialReduxState as ApplicationState;
1719
const store = configureStore(history, initialState);
1820

19-
// This code starts up the React app when it runs in a browser. It sets up the routing configuration
20-
// and injects the app into a DOM element.
21-
ReactDOM.render(
22-
<Provider store={ store }>
23-
<ConnectedRouter history={ history } children={ routes } />
24-
</Provider>,
25-
document.getElementById('react-app')
26-
);
21+
function renderApp() {
22+
// This code starts up the React app when it runs in a browser. It sets up the routing configuration
23+
// and injects the app into a DOM element.
24+
ReactDOM.render(
25+
<AppContainer>
26+
<Provider store={ store }>
27+
<ConnectedRouter history={ history } children={ routes } />
28+
</Provider>
29+
</AppContainer>,
30+
document.getElementById('react-app')
31+
);
32+
}
33+
34+
renderApp();
35+
36+
// Allow Hot Module Replacement
37+
if (module.hot) {
38+
module.hot.accept('./routes', () => {
39+
routes = require<typeof RoutesModule>('./routes').routes;
40+
renderApp();
41+
});
42+
}

‎templates/ReactReduxSpa/ClientApp/boot-server.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { StaticRouter } from 'react-router-dom';
55
import { replace } from 'react-router-redux';
66
import { createMemoryHistory } from 'history';
77
import { createServerRenderer, RenderResult } from 'aspnet-prerendering';
8-
import routes from './routes';
8+
import { routes } from './routes';
99
import configureStore from './configureStore';
1010

1111
export default createServerRenderer(params => {

‎templates/ReactReduxSpa/ClientApp/routes.tsx‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,8 @@ import Home from './components/Home';
55
import FetchData from './components/FetchData';
66
import Counter from './components/Counter';
77

8-
export default <Layout>
8+
export const routes = <Layout>
99
<Route exact path='/' component={ Home } />
1010
<Route path='/counter' component={ Counter } />
1111
<Route path='/fetchdata/:startDateIndex?' component={ FetchData } />
1212
</Layout>;
13-
14-
// Enable Hot Module Replacement (HMR)
15-
if (module.hot) {
16-
module.hot.accept();
17-
}

‎templates/ReactReduxSpa/package.json‎

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -13,12 +13,8 @@
1313
"@types/webpack-env": "^1.13.0",
1414
"aspnet-prerendering": "^2.0.0",
1515
"aspnet-webpack": "^1.0.27",
16-
"aspnet-webpack-react": "^1.0.4",
16+
"aspnet-webpack-react": "^2.0.0",
1717
"awesome-typescript-loader": "^3.0.0",
18-
"babel-core": "^6.5.2",
19-
"babel-loader": "^6.2.3",
20-
"babel-preset-es2015": "^6.5.0",
21-
"babel-preset-react": "^6.5.0",
2218
"bootstrap": "^3.3.6",
2319
"css-loader": "^0.23.1",
2420
"domain-task": "^3.0.0",
@@ -31,6 +27,7 @@
3127
"node-noop": "^1.0.0",
3228
"react": "~15.4.0",
3329
"react-dom": "~15.4.0",
30+
"react-hot-loader": "3.0.0-beta.7",
3431
"react-redux": "^4.4.5",
3532
"react-router-dom": "^4.1.0",
3633
"react-router-redux": "5.0.0-alpha.6",

‎templates/ReactReduxSpa/tsconfig.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22
"compilerOptions": {
33
"baseUrl": ".",
44
"moduleResolution": "node",
5-
"target": "es6",
6-
"jsx": "preserve",
5+
"target": "es5",
6+
"jsx": "react",
77
"experimentalDecorators": true,
88
"sourceMap": true,
99
"skipDefaultLibCheck": true,

‎templates/ReactReduxSpa/webpack.config.js‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,6 @@ module.exports = (env) => {
1717
},
1818
module: {
1919
rules: [
20-
{ test: /\.tsx?$/, include: /ClientApp/, use: { loader: 'babel-loader', options: { cacheDirectory: true } } },
2120
{ test: /\.tsx?$/, include: /ClientApp/, use: 'awesome-typescript-loader?silent=true' }
2221
]
2322
},

0 commit comments

Comments
 (0)