Hot Reload Example

.babelrc

{
  "presets": ["es2015", "react"],
  "plugins": ["react-hot-loader/babel"]
}

App.js

import React, { Component } from 'react';

const Hello = ({ name }) =>  <h1 > Hello {name} </h1> // Stateless/Pure component

export default class App extends Component {
    render() {
        return (
          <div>
              <Hello name={'world'} /> 
          </div>
        );
    }
}

main.js

import { AppContainer } from 'react-hot-loader'; // required  
import React from 'react';  
import ReactDOM from 'react-dom';  
import App from './App'; // App

const mountApp = document.getElementById('root');

ReactDOM.render(  
    <AppContainer component={App} />,
    mountApp
);

if (module.hot) {
    module.hot.accept('./App', () => {
        ReactDOM.render(
            <AppContainer component={require('./App').default} />,
            mountApp
        );
    });
}

server.js

const webpack = require('webpack');
const WebpackDevServer = require('webpack-dev-server');
const opener = require('opener');
const config = require('./webpack.config.dev');
const host = 'localhost';
const port = 3000;

new WebpackDevServer(webpack(config), {
        publicPath: config.output.publicPath,
        hot: true,
        historyApiFallback: true,
        stats: {
            colors: true // color is life
        }
    })
    .listen(port, host, (err) => {
        if (err) {
            console.log(err);
        }
        console.log(`Listening at ${host}:${port}`);
        opener(`http://${host}:${port}`);
    });

webpack.config.js

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

module.exports = {
    devtool: 'eval',
    entry: [
        'react-hot-loader/patch',
        'webpack-dev-server/client?http://localhost:3000',
        'webpack/hot/only-dev-server',
        './app/main'
    ],
    output: {
        path: path.join(__dirname, 'build'),
        filename: 'bundle.js',
        publicPath: '/assets/'
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin()
    ],
    module: {
        loaders: [{
            test: /\.js$/,
            loaders: ['babel'],
            include: path.join(__dirname, 'src')
        }]
    }
};