jimbolla/package.json

## package.json
{
  "name": "react-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "babel-polyfill": "6.7.4",
    "react": "15.0.1",
    "react-dom": "15.0.1"
  },
  "devDependencies": {
    "babel": "6.5.2",
    "babel-loader": "6.2.4",
    "babel-preset-es2015": "6.6.0",
    "babel-preset-react": "6.5.0",
    "httpdispatcher": "1.0.0",
    "webpack": "1.13.0"
  }
}

## server.js
var http = require('http');
var dispatcher = require('httpdispatcher');

const PORT = 8081;

dispatcher.setStaticDirname('');
dispatcher.setStatic('');

function handleRequest(request, response) {
    try {
        console.log(request.url);
        dispatcher.dispatch(request, response);
    } catch(err) {
        console.log(err);
    }
}

http
  .createServer(handleRequest)
  .listen(PORT, () => console.log("Server listening on: http://localhost:%s", PORT));

## test.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
 </head>
<body>
  <script src="bundle.js"></script>
  <script type="text/javascript">Test.run();</script>
</body>
</html>

## test.js
import 'babel-polyfill';
import React from 'react';
import ReactDOM from 'react-dom';

class SubmitTest extends React.Component {

  constructor() {
    super();

    this.state = {
      username: '',
      usernameChanges: 0,
      password: '',
      passwordChanges: 0,
    };
  }

  render() {
    return (
      <form onSubmit={evt => {
        evt.preventDefault();
        this.setState({ submitted: true });
      }}>

        <div>
          Username:
          <input
            value={this.state.username}
            onChange={evt => {
              const username = evt.target.value;
              this.setState(state => ({ username, usernameChanges: state.usernameChanges + 1 }));
            }}
          />
          {this.state.usernameChanges}
        </div>

        <div>
          Password:
          <input
            type="password"
            value={this.state.password}
            onChange={evt => {
              const password = evt.target.value;
              this.setState(state => ({ password, passwordChanges: state.passwordChanges + 1 }));
            }}
          />
          {this.state.passwordChanges}
        </div>

        <div>
          <button type="submit">Submit</button>
        </div>

        <div>
          In state:
          <pre>{JSON.stringify(this.state)}</pre>
        </div>
      </form>

    );
  }
}

export const run = (settings) => {
  const container = document.createElement('div');
  document.body.appendChild(container);
  ReactDOM.render(<SubmitTest />, container);
};

## webpack.config.js
module.exports = {
    context: __dirname,
    entry: {
        'bundle.js': './test.js',
    },
    output: {
        path: __dirname,
        filename: '[name]',
        library: 'Test'
    },
    module: {
        loaders: [
            {
                loader: 'babel-loader',
                test: /\.(jsx|js)$/,
                exclude: /node_modules/,
                query: {
                    cacheDirectory: true,
                    presets: ['es2015', 'react']
                }
            }
        ]
    },
    devtool: 'source-map'
};
	{
	"name": "react-test",
	"version": "1.0.0",
	"description": "",
	"main": "index.js",
	"scripts": {
	"test": "echo \"Error: no test specified\" && exit 1"
	},
	"author": "",
	"license": "ISC",
	"dependencies": {
	"babel-polyfill": "6.7.4",
	"react": "15.0.1",
	"react-dom": "15.0.1"
	},
	"devDependencies": {
	"babel": "6.5.2",
	"babel-loader": "6.2.4",
	"babel-preset-es2015": "6.6.0",
	"babel-preset-react": "6.5.0",
	"httpdispatcher": "1.0.0",
	"webpack": "1.13.0"
	}
	}
	var http = require('http');
	var dispatcher = require('httpdispatcher');

	const PORT = 8081;

	dispatcher.setStaticDirname('');
	dispatcher.setStatic('');

	function handleRequest(request, response) {
	try {
	console.log(request.url);
	dispatcher.dispatch(request, response);
	} catch(err) {
	console.log(err);
	}
	}

	http
	.createServer(handleRequest)
	.listen(PORT, () => console.log("Server listening on: http://localhost:%s", PORT));
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	</head>
	<body>
	<script src="bundle.js"></script>
	<script type="text/javascript">Test.run();</script>
	</body>
	</html>
	import 'babel-polyfill';
	import React from 'react';
	import ReactDOM from 'react-dom';

	class SubmitTest extends React.Component {

	constructor() {
	super();

	this.state = {
	username: '',
	usernameChanges: 0,
	password: '',
	passwordChanges: 0,
	};
	}

	render() {
	return (
	<form onSubmit={evt => {
	evt.preventDefault();
	this.setState({ submitted: true });
	}}>

	<div>
	Username:
	<input
	value={this.state.username}
	onChange={evt => {
	const username = evt.target.value;
	this.setState(state => ({ username, usernameChanges: state.usernameChanges + 1 }));
	}}
	/>
	{this.state.usernameChanges}
	</div>

	<div>
	Password:
	<input
	type="password"
	value={this.state.password}
	onChange={evt => {
	const password = evt.target.value;
	this.setState(state => ({ password, passwordChanges: state.passwordChanges + 1 }));
	}}
	/>
	{this.state.passwordChanges}
	</div>

	<div>
	<button type="submit">Submit</button>
	</div>

	<div>
	In state:
	<pre>{JSON.stringify(this.state)}</pre>
	</div>
	</form>

	);
	}
	}

	export const run = (settings) => {
	const container = document.createElement('div');
	document.body.appendChild(container);
	ReactDOM.render(<SubmitTest />, container);
	};
	module.exports = {
	context: __dirname,
	entry: {
	'bundle.js': './test.js',
	},
	output: {
	path: __dirname,
	filename: '[name]',
	library: 'Test'
	},
	module: {
	loaders: [
	{
	loader: 'babel-loader',
	test: /\.(jsx\|js)$/,
	exclude: /node_modules/,
	query: {
	cacheDirectory: true,
	presets: ['es2015', 'react']
	}
	}
	]
	},
	devtool: 'source-map'
	};