Example quick start for react/webpack.

.eslintrc

{
    "plugins": [
        "react"
    ],
    "parserOptions": {
		"ecmaFeatures": {
			"jsx": true,
			"modules": true
		},
        "ecmaVersion": 6,
        "sourceType": "module",
    },
    "extends": ["eslint:recommended", "plugin:react/recommended"],
    "rules": {
        "react/prop-types": 0
    }
}

app-containers-app.jsx

/* global fetch */
import React, { Component, PropTypes } from 'react';
import 'whatwg-fetch';

// Remove these when you go live, mocking only!!
import fetchMock from 'fetch-mock';

fetchMock.get('http://example.com/greeting', { data: { greeting: 'Hello', name: 'Mr. Anderson' }});

export default class App extends Component {
    constructor(props) {
        super(props);

        this.state = {
            greeting: 'Ayy what up?'
        }
    }
    componentDidMount() {
        // make an API call to an api to get the greeting
        this.fetch_greeting = fetch('http://example.com/greeting')
            .then(response => response.json())
            .then(json => {
                this.setState({
                    greeting: json.map(data => {
                        return data.greeting + " " + data.name;
                    })
                });
            });
    }
    render() {
        return (
            <div className="app-wrapper">
                <h1>{this.state.greeting}</h1>
            </div>
        );
    }
}

app-main.js

/*
  Example file structure -- REMOVE ME
    app/
    |-- components/
        |-- my-component.jsx
    |-- containers/
        |-- app.jsx
    |-- main.js
    |-- sass/
        |-- app.scss
    index.html
*/

/* global document require */

import 'es6-shim';
import './sass/app.scss';
import React from 'react';
import { render } from 'react-dom';
import App from './containers/app.jsx';

// Prevent the 300ms click delay on some browsers
var FastClick = require('fastclick');
FastClick.attach(document.body);

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

package.json

{
  "name": "example-react-app",
  "version": "0.0.1",
  "description": "Example React App",
  "main": "main.js",
  "scripts": {
    "build": "webpack --progress --colors --inline -p --config webpack.config.js",
    "start": "webpack-dev-server --progress --colors --inline",
    "start_public": "webpack-dev-server --progress --colors --inline --host 0.0.0.0", // use this line for testing on ipads
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "",
  "dependencies": {
    "babel-core": "^6.10.4",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.9.0",
    "babel-preset-react": "^6.11.1",
    "classnames": "^2.2.5",
    "css-loader": "^0.23.1",
    "es6-shim": "^0.35.1",
    "eslint": "^3.0.1",
    "eslint-loader": "^1.4.1",
    "eslint-plugin-react": "^5.2.2",
    "extract-text-webpack-plugin": "^1.0.1",
    "fastclick": "^1.0.6",
    "fetch-mock": "^5.0.1",
    "file-loader": "^0.9.0",
    "moment": "^2.14.1",
    "node-sass": "^3.8.0",
    "react": "^15.2.1",
    "react-addons-css-transition-group": "^15.2.1",
    "react-dom": "^15.2.1",
    "sass-loader": "^4.0.0",
    "style-loader": "^0.13.1",
    "url-loader": "^0.5.7",
    "webpack": "^1.13.1",
    "webpack-dev-server": "^1.14.1",
    "webpack-merge": "^0.14.0",
    "whatwg-fetch": "^1.0.0"
  }
}

webpack.config.js

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

const common_config = {
    devtool: 'eval',
    entry: path.join(__dirname, 'app/main.js'),
    output: {
        path: path.join(__dirname, 'dist'),
        filename: "bundle.js"
    },
	resolve: {
		unsafeCache: true,
		extensions: [
			"",
			".js",
			".json",
			".jsx",
			".html",
			".css",
			".scss",
		],
		modules: [
			"node_modules",
			"/app"
		]
	},
    module: {
        loaders: [
            {
                test: /\.(js|jsx)$/,
                exclude: 'node_modules',
                loaders: [
                    "babel-loader",
                    "eslint-loader"
                ]
            },
            {
                test: /\.html$/,
                loader: "file?name=[name].[ext]",
            },
            {
                test: /\.scss$/,
                loaders: ["style", "css", "sass"]
            },
            {
                test: /\.jpe?g$|\.gif$|\.png$/i,
                loader: "file-loader?name=/img/[name].[ext]"
            }
        ]
    }
};

switch(process.env.npm_lifecycle_event) {
    case 'build': {
        config = merge(common_config, {
            devtool: 'cheap-module-source-map',
			plugins: [
				new webpack.DefinePlugin({
						'process.env': {
						'NODE_ENV': JSON.stringify('production')
					}
	 			}),
				new webpack.optimize.DedupePlugin(),
				new webpack.optimize.UglifyJsPlugin(),
				new webpack.optimize.AggressiveMergingPlugin()
			]
        });
        break;
    }
    default: {
        config = merge(common_config, {});
    }
}

module.exports = config;