buwilliams/experiment.js

## experiment.js
function Component(data) {
  var self = this;
  this.app = document.querySelector('#app');
  this.setState(data);

  document.querySelector('#reset').addEventListener('click', function() {
    self.setState(data);
  });

  document.querySelector('#change').addEventListener('click', function() {
    self.setState({text:'foo',color:'blue'});
  });
}

Component.prototype.setState = function(newData) {
  this.data = newData;
  this.render();
}

Component.prototype.getVdom = function() {
  var dom = preact.h('div', {
    key: 1,
    style: { color: this.data.color || 'black' }
  }, this.data.text);
  return dom;
};

Component.prototype.render = function() {
  var dom = this.getVdom();
  preact.render(dom, null, this.app);
};

var comp = new Component({ text: 'hello', color: 'black' });

## index.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="utf-8">
  <title>Preact without JSX experiment</title>
</head>
<body>
  <div id="app"></div>

  <button id="reset">Reset</button>
  <button id="change">Change</button>

  <script src="preact.js" charset="utf-8"></script>
  <script src="experiment.js" charset="utf-8"></script>
</body>
</html>
	function Component(data) {
	var self = this;
	this.app = document.querySelector('#app');
	this.setState(data);

	document.querySelector('#reset').addEventListener('click', function() {
	self.setState(data);
	});

	document.querySelector('#change').addEventListener('click', function() {
	self.setState({text:'foo',color:'blue'});
	});
	}

	Component.prototype.setState = function(newData) {
	this.data = newData;
	this.render();
	}

	Component.prototype.getVdom = function() {
	var dom = preact.h('div', {
	key: 1,
	style: { color: this.data.color \|\| 'black' }
	}, this.data.text);
	return dom;
	};

	Component.prototype.render = function() {
	var dom = this.getVdom();
	preact.render(dom, null, this.app);
	};

	var comp = new Component({ text: 'hello', color: 'black' });
	<!DOCTYPE html>
	<html lang="en" dir="ltr">
	<head>
	<meta charset="utf-8">
	<title>Preact without JSX experiment</title>
	</head>
	<body>
	<div id="app"></div>

	<button id="reset">Reset</button>
	<button id="change">Change</button>

	<script src="preact.js" charset="utf-8"></script>
	<script src="experiment.js" charset="utf-8"></script>
	</body>
	</html>