React Standalone HTML template

App.jsx

import Button from './Button'

// As React is globally imported, the usual named importing needs to be destructured from it instead.
const { useState } = React;

/**
 * A simple counter app.
 */
export default function App(){
	const [count, setCount] = useState(0);
	return <>
		<Button
			onClick={() => setCount(count => count - 1)}
			color="red">
				-
		</Button>
		<span>{count}</span>
		<Button
			onClick={() => setCount(count => count + 1)}
			color="green">
				+
		</Button>
	</>
}

Button.jsx

/**
 * Colorable button.
 *
 * @param {object} props
 * @param {object} props.color Text color of button
 */
export default function Button({ color, children, ...props }) {
	return <button
		style={{ color }}
		{...props}
	>
		{children}
	</button>
}

index.html

	<div id="root"></div>
	<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
	<!-- import React from 'react' -->
	<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
	<!-- import ReactDOM from 'react' -->
	<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
	<script>
		Babel.registerPreset('rascal-two@multifile-babel-standalone-react', {
			presets: [ [Babel.availablePresets['react']] ], // Handle JSX
			plugins: [ [Babel.availablePlugins['transform-modules-umd']] ], // Allow ESM importing
			moduleId: 'main'
		});
	</script>
  <!-- scripts must be in dependant order, aka App.js import Button.js, Button.js must appear before App.js -->
	<script type="text/babel" data-plugins="transform-modules-umd" src="./Button.jsx"></script>
	<script type="text/babel" data-plugins="transform-modules-umd" src="./App.jsx"></script>
	<script type="text/babel" data-presets="rascal-two@multifile-babel-standalone-react">
		import App from './App'
		ReactDOM.createRoot(document.getElementById('root')).render(<App />);
	</script>