Create a Complex JSX Element

HTML

<div id="root"></div>

Scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.0.0-alpha-5fa4d79b0-20211008/umd/react.production.min.js" integrity="sha512-5PVmWGoNJocWPdQJmJd1aRbz3cFcFgXctWKLWcitqtgX64jF+ttfg9g2oLltmeQ1HUo3gT6QchaMK3h+S+JG4Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.0.0-alpha-5fa4d79b0-20211008/umd/react-dom.production.min.js" integrity="sha512-pUsjUv+9XgkTn+UbLyNIT4YNZPF2p0E45FBKmDL7Ti8iovYwp2CUkQs6Q7J9y5scLxWaOM+T5jJc0ls+WHUcmQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel">
const JSX = <div>
      	<h1>My Title</h1>
		<p>The Content</p>
		<ul>
          <li>List Item 1</li>
          <li>List Item 2</li>
          <li>List Item 3</li>
        </ul>
      </div>;
ReactDOM.render(JSX, document.getElementById('root'))
</script>

Javascript

/*
const JSX = <div>
      	<h1>My Title</h1>
		<p>The Content</p>
		<ul>
          <li>List Item 1</li>
          <li>List Item 2</li>
          <li>List Item 3</li>
        </ul>
      </div>;
 */