Discussion on: React development setup with just a single file!

View post

There's also another way. If you use htm you can skip babel. And with the es-react package you can reduce the boilerplate a little bit.

<!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>single page react boilerplate</title>
  <meta name="description" content="The HTML5 Herald">
  <meta name="author" content="your-name-here">
</head>

<body>
  <div id="place-app"> </div>
  <script type="module">
    import { React, ReactDOM } from "https://unpkg.com/es-react";
    import htm from 'https://unpkg.com/htm?module';

    const html = htm.bind(React.createElement); 

    var App = (props) => {
        return html`
            <div>
                Hello Universe!
            </div>
        `;
    };

    ReactDOM.render(App(), document.getElementById('place-app'));
  </script>
</body>
</html>

kapeel kokane • May 21 '20

Nice!