Show HN: ReactJS with JSX without bundling or transpiling

source: https://codesandbox.io/s/dikoh?file=/index.html

  <!DOCTYPE html>
  <html lang="en">
    <head>
      <meta charset="UTF-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <meta http-equiv="X-UA-Compatible" content="ie=edge" />
      <title>Static Template</title>
    </head>
    <body>
      <div id="main"></div>
  
      <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
      <script type="text/babel" data-presets="react" data-type="module">
        import {
          ChakraProvider,
          Box,
          Text
        } from "https://cdn.skypack.dev/@chakra-ui/react";
        import React, { useRef } from "https://cdn.skypack.dev/react";
        import ReactDOM from "https://cdn.skypack.dev/react-dom";
  
        const MyText = ({ color, ...props }) => {
          return <Text fontWeight="bold" as="span" {...props} />;
        };
  
        function Foo() {
          return (
            <div>
              Foo
            </div>
          );
        }
  
        function App() {
          return (
            <Box>
              Hello <MyText>Skypack</MyText>
              <Foo/>
            </Box>
          );
        }
  
        ReactDOM.render(
          <ChakraProvider>
            <App />
          </ChakraProvider>,
          document.getElementById("main")
        );
      </script>
    </body>
  </html>