Vals using react-dom
Description from the NPM package:
React package for working with the DOM.
jxnblk
resrv
Script
React SSR and client-side hydration for Val Town For streaming responses use ReactStream 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
1