Skip to content

Instantly share code, notes, and snippets.

@mihai-vlc

mihai-vlc/App.jsx

Last active November 23, 2023 17:28
Show Gist options
  • Save mihai-vlc/6c350a4089a5aa99c993f7564754ddc0 to your computer and use it in GitHub Desktop.
Save mihai-vlc/6c350a4089a5aa99c993f7564754ddc0 to your computer and use it in GitHub Desktop.
Download ZIP
react no build step
Raw
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>
</>
);
}
Raw
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/[email protected]?dev",
"react": "https://esm.sh/[email protected]?dev",
"react-dom/client": "https://esm.sh/[email protected]/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>
Raw
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);
};
Raw
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/[email protected]?dev",
"react": "https://esm.sh/[email protected]?dev",
"react-dom/client": "https://esm.sh/[email protected]/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>
Raw
Title.jsx
import React from "https://esm.sh/react?dev";
export default function Title() {
return <h1>React with NO build tool</h1>;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment