反応ホットローダーはブラウザの変更を反映していません

Question

私は反応プロジェクトに取り組んでいます。私はそれに反応ホットローダーを使用しようとしています。プロジェクトのすべてが正常に動作しますが、私は自分のコンポーネントで何か変更を加えるとブラウザの変更を見ることができません。私はホットローダーを設定するための公式の文書に従った。しかし、それは動作していません。私のコンテンツはブラウザ（localhost：3000）にロードされます。ホットローダーが変更を表示するようにするにはどうすればよいですか。ここに私のファイルがあります。

App.js

import React from 'react'; 
import Userlist from '../containers/user-list'; 
import UserDetail from '../containers/user-detail'; 
require('../../scss/style.scss'); 
import getMuiTheme from 'material-ui/styles/getMuiTheme'; 
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'; 
import RaisedButton from 'material-ui/RaisedButton'; 


const App =() => (
    <MuiThemeProvider> 
     <div> 
      <RaisedButton label="Default" /> 
      <h2> 
       Usernamess 
      </h2> 
      <Userlist/> 
      <hr/> 
      <h2> 
       User Detail 
      </h2> 
      <hr/> 
      <UserDetail/> 
     </div> 
    </MuiThemeProvider> 
); 

export default App; 

webpack.config.js

var path = require('path'); 
var webpack = require('webpack'); 

module.exports = { 
    devtool: 'eval', 
    entry: [ 
     'webpack-dev-server/client?http://localhost:3000', 
     'webpack/hot/only-dev-server', 
     './dev/js/index.js' 
    ], 
    module: { 
     loaders: [ 
      { 
       test: /\.js$/, 
       loaders: ['react-hot', 'babel'], 
       include: path.join(__dirname, 'dev') 
      }, 
      { 
       test: /\.scss/, 
       loader: 'style-loader!css-loader!sass-loader' 
      } 
     ] 
    }, 
    output: { 
     path: path.join(__dirname, 'dist'), 
     filename: 'bundle.js', 
     publicPath: '/static/' 
    }, 
    plugins: [ 
     new webpack.HotModuleReplacementPlugin() 
    ] 
}; 

package.json

{ 
    "name": "react-redux-template", 
    "version": "1.0.0", 
    "main": "index.js", 
    "scripts": { 
    "start": "node server.js", 
    "lint": "eslint src" 
    }, 
    "license": "ISC", 
    "dependencies": { 
    "babel-core": "^6.10.4", 
    "babel-loader": "^6.2.4", 
    "babel-polyfill": "^6.9.1", 
    "babel-preset-es2015": "^6.9.0", 
    "babel-preset-react": "^6.11.1", 
    "babel-register": "^6.9.0", 
    "cross-env": "^1.0.8", 
    "css-loader": "^0.23.1", 
    "expect": "^1.20.1", 
    "material-ui": "^0.15.4", 
    "node-libs-browser": "^1.0.0", 
    "node-sass": "^3.8.0", 
    "react": "^15.1.0", 
    "react-addons-test-utils": "^15.1.0", 
    "react-dom": "^15.1.0", 
    "react-redux": "^4.4.5", 
    "react-tap-event-plugin": "^1.0.0", 
    "redux": "^3.5.2", 
    "redux-logger": "^2.6.1", 
    "redux-promise": "^0.5.3", 
    "redux-thunk": "^2.1.0", 
    "sass-loader": "^4.0.0", 
    "style-loader": "^0.13.1", 
    "webpack": "^1.13.1", 
    "webpack-dev-middleware": "^1.6.1", 
    "webpack-dev-server": "^1.14.1", 
    "webpack-hot-middleware": "^2.11.0" 
    }, 
    "devDependencies": { 
    "babel-plugin-react-transform": "^2.0.2", 
    "babel-preset-stage-0": "^6.5.0", 
    "react-transform-hmr": "^1.0.4", 
    "react-hot-loader": "^1.3.0" 
    } 
} 

server.js

var webpack = require('webpack'); 
var WebpackDevServer = require('webpack-dev-server'); 
var config = require('./webpack.config'); 

new WebpackDevServer(webpack(config), { 
    publicPath: config.output.publicPath, 
    hot: true, 
    historyApiFallback: true 
}).listen(3000, 'localhost', function (err, result) { 
    if (err) { 
    return console.log(err); 
    } 

    console.log('Listening at http://localhost:3000/'); 
}); 

Answer 1

「以下のモジュールがホットに更新することができませんでしたホットローダー公式スレッドhttps://github.com/gaearon/react-hot-loader/blob/master/docs/Troubleshooting.md

から抽象的：（彼らは完全な再読み込みが必要になります！）

をあなたの場合ルートコンポーネントを編集するときにこの警告が表示されることがあります。これは何もエクスポートしていない可能性がありますので、そこからReact.renderを呼び出してください。あなたのルートコンポーネントは、個別のファイル（例えばApp.jsx）に入れて、あなたがReact.renderを呼び出すindex.jsからそれを必要としている。」

をだから私は私のApp.js

export default class App extends Component { 
    render() { 
     return (
      <MuiThemeProvider> 
       <div> 
        <RaisedButton label="Default" /> 
        <h2> 
         Usernamess 
        </h2> 
        <Userlist/> 
        <hr/> 
        <h2> 
         User Deta 
        </h2> 
        <hr/> 
        <UserDetail/> 
       </div> 
      </MuiThemeProvider> 
     ); 
    } 
} 

に変更を加えました