mihai-vlc/App.jsx

## App.jsx
import React, { useState } from "https://esm.sh/react?dev";

const Title = (await importJSX("./components/Title.jsx")).default;

export default function App() {
  const [count, setCount] = useState(0);

  function handleClick() {
    setCount((c) => c + 10);
  }
  return (
    <>
      <Title />
      <button onClick={handleClick}>Click me {count}</button>
    </>
  );
}

## jsx-in-separate-files.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>HTML + CSS</title>
  </head>
  <body>

    <div id="app"></div>
    <script type="importmap">
      {
        "imports": {
          "@jsxImportSource": "https://esm.sh/react@18.2.0?dev",
          "react": "https://esm.sh/react@18.2.0?dev",
          "react-dom/client": "https://esm.sh/react-dom@18.2.0/client?dev"
        }
      }
    </script>
    <script type="module" src="./jsx-loader.js"></script>
    <script type="module">
      import React from "react";
      import ReactDom from "react-dom/client";
      const App = (await importJSX("./App.jsx")).default;

      const root = ReactDom.createRoot(document.getElementById('app'));
      root.render(React.createElement(App));

    </script>

  </body>
</html>

## jsx-loader.js
import { esm } from "https://esm.sh/build";
window.importJSX = async function (url) {
  const res = await fetch(url);
  if (!res.ok) {
    throw new Error(`failed to load ${url}`);
  }
  const content = await res.text();
  return esm(content);
};

## react-no-build-step.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>HTML + CSS</title>
  </head>
  <body>

    <div id="app"></div>
    <script type="importmap">
      {
        "imports": {
          "@jsxImportSource": "https://esm.sh/react@18.2.0?dev",
          "react": "https://esm.sh/react@18.2.0?dev",
          "react-dom/client": "https://esm.sh/react-dom@18.2.0/client?dev"
        }
      }
    </script>
    <script type="module" src="https://esm.sh/run"></script>
    <script type="text/jsx">
      import ReactDom from "react-dom/client";
      import { useState } from 'react';

      function App() {
        const [count, setCount] = useState(0);
        function handleClick() {
          setCount(c => c + 1);
        }
        return <button onClick={handleClick}>Click me {count}</button>;
      }

      const root = ReactDom.createRoot(document.getElementById('app'));

      root.render(<App />);
    </script>

  </body>
</html>

## Title.jsx
import React from "https://esm.sh/react?dev";

export default function Title() {
  return <h1>React with NO build tool</h1>;
}
	import React, { useState } from "https://esm.sh/react?dev";

	const Title = (await importJSX("./components/Title.jsx")).default;

	export default function App() {
	const [count, setCount] = useState(0);

	function handleClick() {
	setCount((c) => c + 10);
	}
	return (
	<>
	<Title />
	<button onClick={handleClick}>Click me {count}</button>
	</>
	);
	}
	<!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>HTML + CSS</title>
	</head>
	<body>

	<div id="app"></div>
	<script type="importmap">
	{
	"imports": {
	"@jsxImportSource": "https://esm.sh/react@18.2.0?dev",
	"react": "https://esm.sh/react@18.2.0?dev",
	"react-dom/client": "https://esm.sh/react-dom@18.2.0/client?dev"
	}
	}
	</script>
	<script type="module" src="./jsx-loader.js"></script>
	<script type="module">
	import React from "react";
	import ReactDom from "react-dom/client";
	const App = (await importJSX("./App.jsx")).default;

	const root = ReactDom.createRoot(document.getElementById('app'));
	root.render(React.createElement(App));

	</script>

	</body>
	</html>
	import { esm } from "https://esm.sh/build";
	window.importJSX = async function (url) {
	const res = await fetch(url);
	if (!res.ok) {
	throw new Error(`failed to load ${url}`);
	}
	const content = await res.text();
	return esm(content);
	};
	import React from "https://esm.sh/react?dev";

	export default function Title() {
	return <h1>React with NO build tool</h1>;
	}