Back to packages list
Vals using react-dom
Description from the NPM package:
React package for working with the DOM.
resrv
@jxnblk
script
React SSR and client-side hydration for Val Town Usage /** @jsxImportSource https://esm.sh/react */
import resrv, { React } from "https://esm.town/v/jxnblk/resrv";
function App() {
const [count, setCount] = React.useState(0);
return (
<div>
<h1>Resrv</h1>
<p>React SSR with client-side hydration in Val Town</p>
<pre>{count}</pre>
<button onClick={() => setCount(count - 1)}>-</button>
<button onClick={() => setCount(count + 1)}>+</button>
</div>
);
}
export default resrv(App, import.meta.url); Live example React requires matching versions for SSR and hydration.
Import React from https://esm.town/v/jxnblk/resrv to ensure your component uses the same version as this library (currently react@18.3.1). HTML Root Hydration To render a component that includes a <head> and <body> tag, pass root: true to the third options argument: function App ({ script }) {
return (
<body>
<h1>Hello</h1>
{script}
</body>
);
}
export default resrv(App, import.meta.url, { root: true }); Inspired by https://www.val.town/v/stevekrouse/react_http
react_http
@stevekrouse
script
Client Side React Helper Example Usage /** @jsxImportSource https://esm.sh/react */
import react_http from "https://esm.town/v/stevekrouse/react_http?v=6";
import { useState } from "https://esm.sh/react@18.2.0";
export function App() {
const [ count, setCount ] = useState(0)
return (
<div>
<h1>Example App</h1>
</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>`
}) Gotchas Only use https imports 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.
