Client Side React Helper

Create val
/** @jsxImportSource https://esm.sh/react */
import { useState } from "https://esm.sh/react@18.2.0";
import react_http from "https://esm.town/v/stevekrouse/react_http?v=6";

export function App() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <h1>Example App</h1>
      <button
        onClick={() => setCount(count + 1)}
        className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
      >
        {count}
      </button>
    </div>
  );
}

export default () =>
  react_http({
    component: App,
    sourceURL: import.meta.url,
    head: `<meta charset="UTF-8" />
          <meta name="viewport" content="width=device-width, initial-scale=1.0" />
          <script src="https://cdn.tailwindcss.com"></script>
          <title>Example App</title>`,
  });

The val with your React component will be imported in the browser. Thus, only use https imports in this val and any that it imports. Replace any npm: with https://esm.sh/ and everything should work great.

Migrated from folder: Archive/react_http