chrisbateman/index.html

## index.html
<!doctype html>
<title>React</title>

<body>
    <div id="App"></div>
    <script src="bundle.js"></script>
</body>

## main.jsx
import React from 'react';
import ReactDOM from 'react-dom';

// try moving this component to a separate file!
let App = React.createClass({
    render() {
        return (
            <div>
                <h1>App</h1>
                <p>lorem ipsum test</p>
            </div>
        );
    }
});

ReactDOM.render(<App/>, document.getElementById('App'));

## package.json
{
  "name": "react-webpack-quick-start",
  "scripts": {
    "dev": "webpack-dev-server"
  },
  "dependencies": {
    "react": "^0.14.0",
    "react-dom": "^0.14.0"
  },
  "devDependencies": {
    "babel-core": "^5.8.21",
    "babel-loader": "^5.3.2",
    "react-hot-loader": "^1.2.8",
    "webpack": "^1.11.0",
    "webpack-dev-server": "^1.10.1"
  }
}

## webpack.config.js
'use strict';

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


module.exports = {
    context: __dirname,
    //devtool: 'source-map', // @see http://webpack.github.io/docs/configuration.html#devtool
    devServer: {
        hot: true, // set this to false to disable react-hot-loader
        inline: true
        //contentBase: 'dist',
        //host: process.env.IP,
        //port: process.env.PORT
    },
    entry: [
      'webpack/hot/only-dev-server',
      './main'
    ],
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    module: {
        loaders: [
            {
                test: /\.(js|jsx)$/,
                loaders: ['react-hot', 'babel'],
                exclude: /node_modules/
            }
        ]
    },
    plugins: [
        //new webpack.optimize.UglifyJsPlugin({minimize: true})
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoErrorsPlugin()
    ],
    resolve: {
        extensions: ['', '.js', '.jsx']
    }
};
	<!doctype html>
	<title>React</title>

	<body>
	<div id="App"></div>
	<script src="bundle.js"></script>
	</body>
	import React from 'react';
	import ReactDOM from 'react-dom';

	// try moving this component to a separate file!
	let App = React.createClass({
	render() {
	return (
	<div>
	<h1>App</h1>
	<p>lorem ipsum test</p>
	</div>
	);
	}
	});

	ReactDOM.render(<App/>, document.getElementById('App'));
	{
	"name": "react-webpack-quick-start",
	"scripts": {
	"dev": "webpack-dev-server"
	},
	"dependencies": {
	"react": "^0.14.0",
	"react-dom": "^0.14.0"
	},
	"devDependencies": {
	"babel-core": "^5.8.21",
	"babel-loader": "^5.3.2",
	"react-hot-loader": "^1.2.8",
	"webpack": "^1.11.0",
	"webpack-dev-server": "^1.10.1"
	}
	}
	'use strict';

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


	module.exports = {
	context: __dirname,
	//devtool: 'source-map', // @see http://webpack.github.io/docs/configuration.html#devtool
	devServer: {
	hot: true, // set this to false to disable react-hot-loader
	inline: true
	//contentBase: 'dist',
	//host: process.env.IP,
	//port: process.env.PORT
	},
	entry: [
	'webpack/hot/only-dev-server',
	'./main'
	],
	output: {
	path: path.join(__dirname, 'dist'),
	filename: 'bundle.js'
	},
	module: {
	loaders: [
	{
	test: /\.(js\|jsx)$/,
	loaders: ['react-hot', 'babel'],
	exclude: /node_modules/
	}
	]
	},
	plugins: [
	//new webpack.optimize.UglifyJsPlugin({minimize: true})
	new webpack.HotModuleReplacementPlugin(),
	new webpack.NoErrorsPlugin()
	],
	resolve: {
	extensions: ['', '.js', '.jsx']
	}
	};