drodsou/noBuildReactESM.html

## noBuildReactESM.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app"></div>
  <script type="module">

    // -- see this live at: https://codepen.io/drodsou/pen/vYpZPvY

    import {render} from 'https://cdn.skypack.dev/react-dom';
    import {createElement, useState} from 'https://cdn.skypack.dev/react';

    // -- tag helpers
    const [button,div,p] = ['button','div','p']
      .map(tag=>(...args) => createElement(tag, ...args));

    function Counter(props) {
      const [count, setCount]  = useState(2);
      return (
        button( { onClick: ()=>setCount(s=>s+1) },
          `${props.text}: ${count}`
        )
      )
    }

    const App = ()=>(
      div( {},
        [1,2].map(num=>(
          p( {}, `${num} Look ma, no JSX!`)
        )),
        Counter( {text:'Click me'} ),
      )
    )

    render(createElement(App), document.querySelector('#app'));


    /* EXTRA OPTIONS:
    //-- preact instead of react
    import { h as createElement, render } from 'https://cdn.skypack.dev/preact';
    import { useState } from 'https://cdn.skypack.dev/preact/hooks';

    // -- tags with optional props, so e.g.  p('some text') works
    const [button,div,p] = ['button','div','p']
      .map(tag=>(...args) => {
        if (typeof args[0] !== 'object' || args[0]?.props) { args.unshift({}); }
        return createElement(tag, ...args)
      });

    // -- tags via hyperscript-helpers (no optional props)
    import tags from 'https://cdn.skypack.dev/hyperscript-helpers';
    const {button, div, p} = tags(createElement);

    */
  </script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	</head>
	<body>
	<div id="app"></div>
	<script type="module">

	// -- see this live at: https://codepen.io/drodsou/pen/vYpZPvY

	import {render} from 'https://cdn.skypack.dev/react-dom';
	import {createElement, useState} from 'https://cdn.skypack.dev/react';

	// -- tag helpers
	const [button,div,p] = ['button','div','p']
	.map(tag=>(...args) => createElement(tag, ...args));

	function Counter(props) {
	const [count, setCount] = useState(2);
	return (
	button( { onClick: ()=>setCount(s=>s+1) },
	`${props.text}: ${count}`
	)
	)
	}

	const App = ()=>(
	div( {},
	[1,2].map(num=>(
	p( {}, `${num} Look ma, no JSX!`)
	)),
	Counter( {text:'Click me'} ),
	)
	)

	render(createElement(App), document.querySelector('#app'));


	/* EXTRA OPTIONS:
	//-- preact instead of react
	import { h as createElement, render } from 'https://cdn.skypack.dev/preact';
	import { useState } from 'https://cdn.skypack.dev/preact/hooks';

	// -- tags with optional props, so e.g. p('some text') works
	const [button,div,p] = ['button','div','p']
	.map(tag=>(...args) => {
	if (typeof args[0] !== 'object' \|\| args[0]?.props) { args.unshift({}); }
	return createElement(tag, ...args)
	});

	// -- tags via hyperscript-helpers (no optional props)
	import tags from 'https://cdn.skypack.dev/hyperscript-helpers';
	const {button, div, p} = tags(createElement);

	*/
	</script>
	</body>
	</html>