ericpkatz/index.html

## index.html

<!DOCTYPE html>
<html>
<body>
  <div id="root"></div>
</body>
<!-- This setup is not suitable for production. -->
<!-- Only use it in development! -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script async src="https://ga.jspm.io/npm:es-module-shims@1.7.0/dist/es-module-shims.js"></script>
<script type="importmap">
{
  "imports": {
    "react": "https://esm.sh/react?dev",
    "react-dom/client": "https://esm.sh/react-dom/client?dev"
  }
}
</script>
<script type="text/babel" data-type="module">
import React from 'react';
import { createRoot } from 'react-dom/client';

function App() {
  const [numbers, setNumbers] = React.useState([1, 2, 3]);

  return (
    <div>
      <h1>Numbers App { numbers.length }</h1>
      <button onClick={function(){ setNumbers([...numbers, Math.random()])}}>+</button>
      <ul>
        {
          numbers.map(function(num){
            return (
              <li>
                {
                  num
                }
              </li>
            );
          })
        }
      </ul>
    </div>
  );
}

const root = createRoot(document.getElementById('root'));
root.render(
  <App />
);
</script>
</html>

	<!DOCTYPE html>
	<html>
	<body>
	<div id="root"></div>
	</body>
	<!-- This setup is not suitable for production. -->
	<!-- Only use it in development! -->
	<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
	<script async src="https://ga.jspm.io/npm:es-module-shims@1.7.0/dist/es-module-shims.js"></script>
	<script type="importmap">
	{
	"imports": {
	"react": "https://esm.sh/react?dev",
	"react-dom/client": "https://esm.sh/react-dom/client?dev"
	}
	}
	</script>
	<script type="text/babel" data-type="module">
	import React from 'react';
	import { createRoot } from 'react-dom/client';

	function App() {
	const [numbers, setNumbers] = React.useState([1, 2, 3]);

	return (
	<div>
	<h1>Numbers App { numbers.length }</h1>
	<button onClick={function(){ setNumbers([...numbers, Math.random()])}}>+</button>
	<ul>
	{
	numbers.map(function(num){
	return (
	<li>
	{
	num
	}
	</li>
	);
	})
	}
	</ul>
	</div>
	);
	}

	const root = createRoot(document.getElementById('root'));
	root.render(
	<App />
	);
	</script>
	</html>