es-react with h

by Warwick Grigg

HTML

<script type="module">

  import { React, ReactDOM } from 'https://unpkg.com/[email protected]';

  import htm from 'https://unpkg.com/htm?module'
  const html = htm.bind(React.createElement)
  const h = React.createElement;

  const Counter = props => {
    const [count, setCount] = React.useState(parseInt(props.count))
    return html`
      <div>
        <h1>${count}</h1>
        <button onClick=${e => setCount(count - 1)}>Decrement</button>
        <button onClick=${e => setCount(count + 1)}>Increment</button>
      </div>
    `
  }

  ReactDOM.render(
/*	h("p", {}, "Hello"), 	// works
		h("Counter", {count: 1}, ), //doesn't
		h("div", {}, Counter({count: 1})), //doesn't
*/
	html`
      <h1>Look Ma! No script tags, no build step</h1>
      <${Counter} count=0 />
    `,
    document.body
  )

</script>