Update TodoMVC example to React Hot Loader 3

This commit is contained in:
Dan Abramov 2016-04-18 13:28:26 +01:00
parent 251c85c93d
commit 64f58b7010
4 changed files with 26 additions and 8 deletions

View File

@ -1,3 +1,4 @@
{ {
"presets": ["es2015-loose", "stage-0", "react"] "presets": ["es2015-loose", "stage-0", "react"],
"plugins": ["react-hot-loader/babel"]
} }

View File

@ -1,12 +1,28 @@
import 'todomvc-app-css/index.css'; import 'todomvc-app-css/index.css';
import React from 'react'; import React from 'react';
import { render } from 'react-dom'; import { render } from 'react-dom';
import { AppContainer } from 'react-hot-loader';
import configureStore from './store/configureStore'; import configureStore from './store/configureStore';
import Root from './containers/Root'; import Root from './containers/Root';
const store = configureStore(); const store = configureStore();
render( render(
<Root store={store} />, <AppContainer
component={Root}
props={{ store }}
/>,
document.getElementById('root') document.getElementById('root')
); );
if (module.hot) {
module.hot.accept('./containers/Root', () => {
render(
<AppContainer
component={require('./containers/Root').default}
props={{ store }}
/>,
document.getElementById('root')
);
});
}

View File

@ -29,8 +29,8 @@
"homepage": "https://github.com/gaearon/redux-devtools#readme", "homepage": "https://github.com/gaearon/redux-devtools#readme",
"dependencies": { "dependencies": {
"classnames": "^2.1.2", "classnames": "^2.1.2",
"react": "^0.14.6", "react": "^15.0.1",
"react-dom": "^0.14.6", "react-dom": "^15.0.1",
"react-redux": "^4.1.0", "react-redux": "^4.1.0",
"redux": "^3.1.1" "redux": "^3.1.1"
}, },
@ -43,10 +43,10 @@
"babel-preset-stage-0": "^6.3.13", "babel-preset-stage-0": "^6.3.13",
"node-libs-browser": "^0.5.2", "node-libs-browser": "^0.5.2",
"raw-loader": "^0.5.1", "raw-loader": "^0.5.1",
"react-hot-loader": "^1.3.0", "react-hot-loader": "^3.0.0-alpha.8",
"redux-devtools": "^3.0.1", "redux-devtools": "^3.0.1",
"redux-devtools-log-monitor": "^1.0.2",
"redux-devtools-dock-monitor": "^1.0.1", "redux-devtools-dock-monitor": "^1.0.1",
"redux-devtools-log-monitor": "^1.0.2",
"style-loader": "^0.12.3", "style-loader": "^0.12.3",
"todomvc-app-css": "^2.0.1", "todomvc-app-css": "^2.0.1",
"webpack": "^1.9.11", "webpack": "^1.9.11",

View File

@ -6,6 +6,7 @@ module.exports = {
entry: [ entry: [
'webpack-dev-server/client?http://localhost:3000', 'webpack-dev-server/client?http://localhost:3000',
'webpack/hot/only-dev-server', 'webpack/hot/only-dev-server',
'react-hot-loader/patch',
'./index' './index'
], ],
output: { output: {
@ -30,12 +31,12 @@ module.exports = {
module: { module: {
loaders: [{ loaders: [{
test: /\.js$/, test: /\.js$/,
loaders: ['react-hot', 'babel'], loaders: ['babel'],
exclude: /node_modules/, exclude: /node_modules/,
include: __dirname include: __dirname
}, { }, {
test: /\.js$/, test: /\.js$/,
loaders: ['react-hot', 'babel'], loaders: ['babel'],
include: path.join(__dirname, '..', '..', 'src') include: path.join(__dirname, '..', '..', 'src')
}, { }, {
test: /\.css?$/, test: /\.css?$/,