Now with almost JSX (thanks to HTM)

.gitignore

@@ -7,6 +7,8 @@ yarn-error.log*
 pnpm-debug.log*
 lerna-debug.log*
 
+bun.lockb
+
 # Dependencies
 node_modules
 .yarn/*

App.js

@@ -1,37 +1,23 @@
 import { createElement, useState } from "react"
+import htm from "htm"
+
+const html = htm.bind(createElement)
 
 function App() {
   const [count, setCount] = useState(0)
 
-  return createElement(
-    "div",
-    { className: "App" },
-    createElement(
-      "a",
-      { href: "https://react.dev/", target: "_blank" },
-      createElement("img", {
-        src: "/react.svg",
-        className: "logo",
-        alt: "React logo",
-      }),
-    ),
-    createElement("h1", {}, "React"),
-    createElement(
-      "div",
-      { className: "card" },
-      createElement(
-        "button",
-        { onClick: () => setCount((count) => count + 1) },
-        "count is ",
-        count,
-      ),
-    ),
-    createElement(
-      "p",
-      { className: "read-the-docs" },
-      "Click on the React logo to learn more",
-    ),
-  )
+  return html`<div className="App">
+    <a href="https://react.dev/" target="_blank">
+      <img src="/react.svg" className="logo" alt="React logo" />
+    </a>
+    <h1>React but with HTM</h1>
+    <div className="card">
+      <button onClick=${() => setCount((count) => count + 1)}>
+        count is ${count}
+      </button>
+    </div>
+    <p className="read-the-docs">Click on the React logo to learn more</p>
+  </div>`
 }
 
 export default App

index.html

@@ -16,7 +16,8 @@
           "react": "https://esm.sh/react",
           "react/": "https://esm.sh/react/",
           "react-dom": "https://esm.sh/react-dom",
-          "react-dom/": "https://esm.sh/react-dom/"
+          "react-dom/": "https://esm.sh/react-dom/",
+          "htm": "https://esm.sh/htm"
         }
       }
     </script>