Val Town Code SearchReturn to Val Town

1🌐 Multi-Route Website with Preact
2
3Migrated from folder: vals_by_example/multiroutePreact

1🌐 Multi-Route Website with React
2
3Migrated from folder: vals_by_example/multirouteReact

1/** @jsxImportSource https://esm.sh/preact */
2import { render } from "npm:preact-render-to-string";
3
4export const preactExample = (request: Request) =>
5  new Response(render(<div>Test {1 + 1}</div>), {
6    headers: {

65    title: "Client-Side",
66    items: [
67      "pomdtr/react_example",
68      todo("Val Town Islands"),
69      todo("Creating Web Component"),

65    title: "Client-Side",
66    items: [
67      "pomdtr/react_example",
68      todo("Val Town Islands"),
69      todo("Creating Web Component"),

1/** @jsxImportSource npm:hono@3/jsx */
2import { handler } from "https://esm.town/v/pomdtr/ssr";
3import date_me_faq from "https://esm.town/v/stevekrouse/dateme_faq_react";
4import Layout from "https://esm.town/v/vawogbemi/dateme_layout";
5

3// https://simonw-ragwithclaude.web.val.run/?question=what%20is%20shot%20scraper
4
5import { renderToString } from "npm:react-dom/server";
6import { jsx } from "https://deno.land/x/hono@v3.11.7/middleware.ts";
7import { Hono } from "https://deno.land/x/hono@v3.11.7/mod.ts";

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/preact */
2import { render } from "npm:preact-render-to-string";
3import { App } from "https://cdn.esm.sh/v90/preact@10.6.4/esm/cjs";
4
5const appHTML = () => {

1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import * as ReactDOM from "https://esm.sh/react-dom@18.2.0/client";
3import {
4  createBrowserRouter,
5  RouterProvider,
6} from "https://esm.sh/react-router-dom@6.23.0?deps=react@18.2.0,react-dom@18.2.0";
7import * as React from "https://esm.sh/react@18.2.0";
8import { routes } from "https://esm.town/v/stevekrouse/dateme_routes";
9
38});
39
40ReactDOM.hydrateRoot(
41  document.body,
42  <React.StrictMode>
43    <RouterProvider router={router} />
44  </React.StrictMode>,
45);