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
23if (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" } });
1/** @jsxImportSource https://esm.sh/react */
2import { fetchText } from "https://esm.town/v/stevekrouse/fetchText";
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 */
2
3import fal from "npm:@fal-ai/serverless-client";
4import { renderToString } from "npm:react-dom/server";
5
6export default async function(interval: Interval) {
1/** @jsxImportSource https://esm.sh/react */
2import OpenAI from "npm:openai";
3import { renderToString } from "npm:react-dom/server";
4
5// This uses by personal API key, you'll need to provide your own if
1/** @jsxImportSource https://esm.sh/react */
2import { Hono } from "https://esm.sh/hono";
3import React, { useEffect, useState } from "https://esm.sh/react";
4import { hydrateRoot } from "https://esm.sh/react-dom/client";
5import { renderToReadableStream } from "https://esm.sh/react-dom/server";
6import { blob } from "https://esm.town/v/std/blob?v=10";
7
1Migrated from folder: Archive/docsExamples/saving_data_from_web_page/blobCommentsReact
1Idiomatic SSR and hydration of a React app
3This val can be used in other vals to send notifications to a segment using [OneSignal's REST API](https://documentation.onesignal.com/reference/create-notification)
4
5This is really handy if you want to send push notifications to your phone without building a native app! I built a barebones React PWA that asks for a password then loads the OneSignal Web SDK that I deployed to [Netlify](https://www.netlify.com/) for free. OneSignal has [easy to follow docs](https://documentation.onesignal.com/docs/web-sdk-setup) so you can build this functionality into a React, Angular, Vue app or even Wordpress! Then [install the PWA](https://www.bitcot.com/how-to-install-a-pwa-to-your-device/) on your platform of choice and you're off to the races!
6
7## Setup
1
2const websites = [
3 { name: 'React-Client', url: 'https://iamseeley-reactserver.web.val.run/' },
4 { name: 'React-Client-CDN', url: 'https://iamseeley-clientmultiroutereact.web.val.run/' },
5 { name: 'Vue', url: 'https://iamseeley-multiroutevue.web.val.run/' },
6 { name: 'Svelte', url: 'https://iamseeley-multiroutesvelte.web.val.run/' },
7 { name: 'Preact', url: 'https://iamseeley-multiroutepreact.web.val.run/' },
8 { name: 'React', url: 'https://iamseeley-multiroutereact.web.val.run/' },
9 { name: 'Hono', url: 'https://iamseeley-multiroutehono.web.val.run/' },
10 { name: 'HTML-As-String', url: 'https://iamseeley-multiroutehtml.web.val.run/' }
