Kineolyan/box.html

## box.html
<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/react@16.5.1/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom@16.5.1/umd/react-dom.production.min.js"></script>
    <title>Tests</title>
    <meta charset="UTF-8">
  </head>
  <body>
    <div id="app"></div>
    <script type="text/javascript">
    var el = React.createElement;

function Inner(props) {
   return el('div', {}, "Hello " + props.name);
}

function Btn(props) {
  return el(
    'button',
    {onClick: props.click},
    props.label
  );
}

function App(props) {
  var that = this;
  function changeName(name) {
    props.change('name', name);
  }
  return el(
    'div',
    {},
    [
      el(
        Btn,
        {
          click: changeName.bind(null, 'Alice'),
          label: 'Alice'
        },
        []),
      el(
        Btn,
        {
          click: changeName.bind(null, 'Bob'),
          label: 'Bob'
        },
        []),
      el(
        Inner,
        {name: props.state.name})
    ]);
}

var s = {
  state: {
    name: 'Alice'
  },
  change(key, value) {
    s.state[key] = value;
    s.render();
  },
  render() {
    ReactDOM.render(
      el(App, s),
      document.getElementById('app'));
  }
};

s.render();
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<script src="https://unpkg.com/react@16.5.1/umd/react.production.min.js"></script>
	<script src="https://unpkg.com/react-dom@16.5.1/umd/react-dom.production.min.js"></script>
	<title>Tests</title>
	<meta charset="UTF-8">
	</head>
	<body>
	<div id="app"></div>
	<script type="text/javascript">
	var el = React.createElement;

	function Inner(props) {
	return el('div', {}, "Hello " + props.name);
	}

	function Btn(props) {
	return el(
	'button',
	{onClick: props.click},
	props.label
	);
	}

	function App(props) {
	var that = this;
	function changeName(name) {
	props.change('name', name);
	}
	return el(
	'div',
	{},
	[
	el(
	Btn,
	{
	click: changeName.bind(null, 'Alice'),
	label: 'Alice'
	},
	[]),
	el(
	Btn,
	{
	click: changeName.bind(null, 'Bob'),
	label: 'Bob'
	},
	[]),
	el(
	Inner,
	{name: props.state.name})
	]);
	}

	var s = {
	state: {
	name: 'Alice'
	},
	change(key, value) {
	s.state[key] = value;
	s.render();
	},
	render() {
	ReactDOM.render(
	el(App, s),
	document.getElementById('app'));
	}
	};

	s.render();
	</script>
	</body>
	</html>