1/** @jsxImportSource https://esm.sh/react */
2import React from "https://esm.sh/react";
3
4const Counter = () => {
5 const [count, setCount] = React.useState(0);
6 return (
7 <button onClick={() => setCount(count + 1)}>
15 <head />
16 <body>
17 <h1>Val Town React Client Demo</h1>
18 <Counter />
19 </body>
22
23// if (typeof document !== "undefined") {
24// const { hydrateRoot } = await import("https://esm.sh/react-dom/client");
25// hydrateRoot(document, <App />);
26// }
27
28export default async function(req: Request): Promise<Response> {
29 const { renderToReadableStream } = await import("https://esm.sh/react-dom/server");
30 const stream = await renderToReadableStream(<App />, { bootstrapModules: [import.meta.url] });
31 return new Response(stream, { headers: { "content-type": "text/html" } });
1Idiomatic SSR and hydration of a React app
1/** @jsxImportSource https://esm.sh/react */
2import { useEffect, useState } from "https://esm.sh/react";
3import { renderToString } from "npm:react-dom/server";
4
5async function getSchedule() {
63 <head />
64 <body>
65 <h1>Val Town React Client Demo</h1>
66 <Schedule data={data} />
67 </body>
71export default async function(req: Request): Promise<Response> {
72 const scheduleData = await getSchedule();
73 const { renderToReadableStream } = await import("https://esm.sh/react-dom/server");
74 const stream = await renderToReadableStream(<App data={scheduleData} />, { bootstrapModules: [import.meta.url] });
75 return new Response(stream, { headers: { "content-type": "text/html" } });
1tldraw example with builder, for consistent React versions.
1/** @jsxImportSource https://esm.sh/react@18.3.1 **/
2import build from "https://esm.sh/build";
3
4const ret = await build({
5 dependencies: {
6 "react-dom": "18.3.1",
7 "react": "18.3.1",
8 "tldraw": "2.3.0",
9 "@reecelucas/react-use-hotkeys": "2.0.0",
10 },
11 source: `
12 export * as ReactDOM from "react-dom";
13 export * as React from "react";
14 export * as tldraw from "tldraw";
15 import useHotkeys from "@reecelucas/react-use-hotkeys";
16 export { useHotkeys };
17 `,
18});
19const {
20 ReactDOM,
21 React,
22 tldraw,
23 useHotkeys,
24} = await import(ret.url + "?bundle-deps");
25const { useCallback, useRef, useEffect } = React;
26const {
27 Tldraw,
121 <div style={{ position: "absolute", inset: 0 }}>
122 <Tldraw
123 persistenceKey="valtown_reacttldrawclient"
124 cameraOptions={{ wheelBehavior: "zoom" }}
125 shapeUtils={[PreviewShapeUtil]}
132
133// The app will be rendered inside the root div
134const root = ReactDOM.createRoot(document.getElementById("root"));
135root.render(<App />);
136
1/** @jsxImportSource npm:react */
2import CodeIcon from "https://esm.town/v/jxnblk/codeIconReact";
3import Logo from "https://esm.town/v/jxnblk/valTownLogotypeReact";
4import { renderToStaticMarkup } from "npm:react-dom/server";
5
6const width = 160;
1/** @jsxImportSource https://esm.sh/react */
2import OpenAI from "npm:openai";
3import { renderToString } from "npm:react-dom/server";
4const openai = new OpenAI();
5import { Hono } from "npm:hono@3";
1/** @jsxImportSource https://esm.sh/react */
2import OpenAI from "npm:openai";
3import { renderToString } from "npm:react-dom/server";
4const openai = new OpenAI();
5import { Hono } from "npm:hono@3";
1/** @jsxImportSource https://esm.sh/react */
2import { renderToString } from "npm:react-dom/server";
3
4export default async function(req: Request) {
1/** @jsxImportSource https://esm.sh/react */
2import { fetchText } from "https://esm.town/v/stevekrouse/fetchText";
3
Starter template with client-side React & Hono server
A web-based dice roller using React on Val Town
Write business logic with ease
Meet the new standard for modern TypeScript development.
Type-safe, reactive, framework-agnostic library to manage your business logic.
Follow me if you learn more about JavaScript | TypeScript | React.js | Next.js | Linux | NixOS | Frontend Developer | https://linktr.ee/officialrajdeepsingh
