i-like-robots/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Preact Compat onChange normalization</title>
    </head>
    <body>
        <div id="app"></div>
        <script src="dist/main.js"></script>
    </body>
</html>

## index.js
import React from 'react'
import ReactDOM from 'react-dom'

class App extends React.Component {
  constructor (props = {}) {
    super(props)

    this.state = {
      value: ''
    }
  }

  handleChange (e) {
    this.setState({ value: e.target.value })
  }

  render () {
    return (
      <div onChangeCapture={this.handleChange.bind(this)}>
        <label>Enter text</label>
        <br />
        <input value={this.state.value} />
        <br />
        <span>Output: <output>{this.state.value}</output></span>
      </div>
    )
  }
}

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

## webpack.config.js
module.exports = {
  entry: [
    __dirname + '/src/index.js'
  ],
  output: {
    path: __dirname + '/dist',
    filename: '[name].js'
  },
  module: {
    rules: [
      { test: /\.js$/, exclude: /node_modules/, loader: 'buble-loader' }
    ]
  },
  resolve: {
    alias: {
        'react': 'preact-compat',
        'react-dom': 'preact-compat'
    }
  }
};
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Preact Compat onChange normalization</title>
	</head>
	<body>
	<div id="app"></div>
	<script src="dist/main.js"></script>
	</body>
	</html>
	import React from 'react'
	import ReactDOM from 'react-dom'

	class App extends React.Component {
	constructor (props = {}) {
	super(props)

	this.state = {
	value: ''
	}
	}

	handleChange (e) {
	this.setState({ value: e.target.value })
	}

	render () {
	return (
	<div onChangeCapture={this.handleChange.bind(this)}>
	<label>Enter text</label>
	<br />
	<input value={this.state.value} />
	<br />
	<span>Output: <output>{this.state.value}</output></span>
	</div>
	)
	}
	}

	ReactDOM.render(<App />, document.getElementById('app'))
	module.exports = {
	entry: [
	__dirname + '/src/index.js'
	],
	output: {
	path: __dirname + '/dist',
	filename: '[name].js'
	},
	module: {
	rules: [
	{ test: /\.js$/, exclude: /node_modules/, loader: 'buble-loader' }
	]
	},
	resolve: {
	alias: {
	'react': 'preact-compat',
	'react-dom': 'preact-compat'
	}
	}
	};