Val Town Code SearchReturn to Val Town

1/** @jsxImportSource https://esm.sh/react@18.2.0?dev */
2import { useRef, useEffect, useState } from "react";
3import { TownieIcon } from "./icons.tsx";
4import { Messages } from "./Messages.tsx";

189- **Imports:** Use `https://esm.sh` for npm and Deno dependencies to ensure compatibility on server and browser
190- **Storage Strategy:** Only use backend storage if explicitly required; prefer simple static client-side sites
191- **React Configuration:** When using React libraries, pin versions with `?deps=react@18.2.0,react-dom@18.2.0` and start the file with `/** @jsxImportSource https://esm.sh/react@18.2.0 */`
192- Ensure all React dependencies and sub-dependencies are pinned to the same version
193- **Styling:** Default to using TailwindCSS via `<script src="https://cdn.twind.style" crossorigin></script>` unless otherwise specified
194
275   - Always run table creation before querying
276
2773. **React Configuration:**
278   - All React dependencies must be pinned to 18.2.0
279   - Always include `@jsxImportSource https://esm.sh/react@18.2.0` at the top of React files
280   - Rendering issues often come from mismatched React versions
281
2824. **File Handling:**

1/** @jsxImportSource https://esm.sh/react@18.2.0?dev */
2import { useState, useEffect, useContext } from "react";
3import { useParams } from "react-router";
4
5import { AppContext } from "./App.tsx";

1/** @jsxImportSource https://esm.sh/react@18.2.0?dev */
2import { useState, useEffect, useContext, createContext } from "react";
3import { useParams } from "react-router";
4
5import { AppContext } from "./App.tsx";

1/** @jsxImportSource https://esm.sh/react@18.2.0?dev */
2import { useMemo } from "react";
3import { useNavigate, useParams } from "react-router";
4import { useBranches } from "../hooks/useBranches.tsx";
5import { useCreateBranch } from "../hooks/useCreateBranch.tsx";

1/** @jsxImportSource https://esm.sh/react@18.2.0?dev */
2import React, { createContext, useState } from "react";
3import { BrowserRouter, Link, Navigate, Outlet, Route, Routes, useLocation } from "react-router";
4import { useLocalStorage } from "react-use";
5import { useUser } from "../hooks/useUser.tsx";
6import { ChatRoute } from "./ChatRoute.tsx";

4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>React Hono Val Town Starter</title>
7    <link rel="stylesheet" href="/frontend/style.css">
8    <link rel="icon" href="/frontend/favicon.svg" type="image/svg+xml">

react-router-hono-starterREADME.md6 matches

@jxnblk•Updated 2 weeks ago

1# React Router Hono Starter
2
3Minimal React Router + Hono starter example in ["data mode"][modes] with server-side rendering for Val Town
4
5[View demo][demo]
7## How it works
8
9The `server.tsx` file is the main server that responds with an HTML stream, using React Router, or an API response.
10The HTML includes a `<script type="module">` tag that loads the `client.tsx` file to hydrate the app
11with client-side routing provided by React Router in "data mode".
12
13The routes are defined in `routes` and can include data loading and actions.
15The About page uses the `useLoaderData` hook to render the data from the loader in the page.
16
17[demo]: https://react-router-hono.val.run
18
19[View more starters][how-to]
20
21[how-to]: https://val.town/x/jxnblk/how-to
22[modes]: https://reactrouter.com/start/modes

react-router-hono-starterserver.tsx6 matches

@jxnblk•Updated 2 weeks ago

1/** @jsxImportSource https://esm.sh/react@19 */
2import { Hono } from "npm:hono@4";
3import * as React from "https://esm.sh/react@19";
4import ReactDOMServer from "https://esm.sh/react-dom@19/server";
5import {
6  createStaticHandler,
7  createStaticRouter,
8  StaticRouterProvider,
9} from "https://esm.sh/react-router";
10import routes from "./routes.tsx";
11
22});
23
24// react app
25app.get("*", async (c) => {
26  const { query, dataRoutes } = createStaticHandler(routes);
28  const router = createStaticRouter(dataRoutes, context);
29  
30  let html = await ReactDOMServer.renderToReadableStream(
31    <StaticRouterProvider
32      router={router}

1import { ActionFunctionArgs, redirect } from "https://esm.sh/react-router@7.5.0?deps=react@18.2.0,react-dom@18.2.0";
2import { createTopic } from "../backend/database/queries.ts";
3