dimitrisli/minimal-react-template-single-file.html

## minimal-react-template-single-file.html
<body>
  <div id="root"></div>

  <script src="https://unpkg.com/react@17.0.0/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@17.0.0/umd/react-dom.development.js"></script>
  <!-- Needed for in-browser Babel transformation -->
  <script src="https://unpkg.com/@babel/standalone@7.12.4/babel.js"></script>
  <!--script src="https://unpkg.com/prop-types@15.7.2/prop-types.js"></script-->

  <!-- type here is 'text/babel' so that Babel compiles it in the Browser
       and embeds it inside the <header><script> section -->
  <script type="text/babel">

    function Counter({defaultValue}) {
      const [counter, setCounter] = React.useState(defaultValue);

      const incrementHandler = () => setCounter(counter + 1)
      const decrementHandler = () => setCounter(counter - 1)
      const resetHandler = () => setCounter(defaultValue)

      return (
              <>
                <div>{counter}</div><br />
                <button onClick={incrementHandler}>Increment</button><br />
                <button onClick={decrementHandler}>Decrement</button><br />
                <button onClick={resetHandler}>Reset</button><br />
              </>
      )
    }

    const component = <Counter defaultValue = {1} />

    ReactDOM.render(component, document.getElementById('root'))
  </script>
</body>
	<body>
	<div id="root"></div>

	<script src="https://unpkg.com/react@17.0.0/umd/react.development.js"></script>
	<script src="https://unpkg.com/react-dom@17.0.0/umd/react-dom.development.js"></script>
	<!-- Needed for in-browser Babel transformation -->
	<script src="https://unpkg.com/@babel/standalone@7.12.4/babel.js"></script>
	<!--script src="https://unpkg.com/prop-types@15.7.2/prop-types.js"></script-->

	<!-- type here is 'text/babel' so that Babel compiles it in the Browser
	and embeds it inside the <header><script> section -->
	<script type="text/babel">

	function Counter({defaultValue}) {
	const [counter, setCounter] = React.useState(defaultValue);

	const incrementHandler = () => setCounter(counter + 1)
	const decrementHandler = () => setCounter(counter - 1)
	const resetHandler = () => setCounter(defaultValue)

	return (
	<>
	<div>{counter}</div><br />
	<button onClick={incrementHandler}>Increment</button><br />
	<button onClick={decrementHandler}>Decrement</button><br />
	<button onClick={resetHandler}>Reset</button><br />
	</>
	)
	}

	const component = <Counter defaultValue = {1} />

	ReactDOM.render(component, document.getElementById('root'))
	</script>
	</body>