Val Town Code SearchReturn to Val Town

1/** @jsxImportSource https://esm.sh/react@19 */
2import fcsdk from "https://esm.sh/@farcaster/frame-sdk";
3import { useEffect, useState } from "https://esm.sh/react@19";
4import { formatAddress, formatJSON, MonoButtonWithStatus, Section } from "./ui.tsx";
5

1/** @jsxImportSource https://esm.sh/react@19 */
2import fcsdk from "https://esm.sh/@farcaster/frame-sdk";
3import { useEffect, useState } from "https://esm.sh/react@19";
4
5import { ShareButton } from "./ui.tsx";

1/** @jsxImportSource https://esm.sh/react@19 */
2import fcsdk from "https://esm.sh/@farcaster/frame-sdk";
3import { useQuery } from "https://esm.sh/@tanstack/react-query@5";
4import { NavLink, Route, Routes } from "https://esm.sh/react-router@7";
5import { useEffect, useState } from "https://esm.sh/react@19";
6
7import { Example } from "./components/Example.tsx";
48      {/* <h2 className="">Features:</h2> */}
49      <div className="opacity-50">
50        <div className="">✷ Hono + React + Tailwind</div>
51        <div className="">✷ React Router + React Query</div>
52        <div className="">✷ Built-in database (blob storage)</div>
53        <div className="">✷ Farcaster mini app manifest + webhook + embed metadata</div>

how-toREADME.md20 matches

@jxnblk•Updated 1 week ago

3A list of minimal starter projects to show you how to do various things in Val Town.
4
5- [React Starter][]: Render React on the server and hydrate on the client
6- [React Streaming Starter][]: Render React with a streaming response
7- [React SPA Starter][]: Render React on the client-side only
8- [React Router Starter][]: Render a React app with client-side routing using React Router
9- [React Router SSR Starter][]: Render a React app with server- and client-side routing using React Router
10- [Remark Starter][]: Render markdown as HTML
11- [Remark Frontmatter Starter][]: Parse frontmatter in markdown
16- [SVG Starter][]: Render an SVG image response
17- [SVG PNG Starter][]: Render an SVG as a PNG image response
18- [Preact Starter][]: Render Preact on the server
19- [Preact Client Starter][]: Render Preact on the server and hydrate the app on the client
20- [Vue Starter][]: Render Vue JSX on the server
21- [Three.js Starter][]: Render Three.js on the client
22- [p5 Starter][]: Render p5.js on the client
23- [Custom JSX Runtime Starter][]: Render React (or other JSX implementations) with a custom JSX runtime
24
25
26[react starter]: https://val.town/x/jxnblk/react-starter
27[react streaming starter]: https://val.town/x/jxnblk/react-streaming-starter
28[react spa starter]: https://val.town/x/jxnblk/react-spa-starter
29[remark starter]: https://www.val.town/x/jxnblk/remark-starter
30[remark frontmatter starter]: https://www.val.town/x/jxnblk/remark-frontmatter-starter
34[svg starter]: https://val.town/x/jxnblk/svg-starter
35[svg png starter]: https://www.val.town/x/jxnblk/svg-png-starter
36[preact starter]: https://val.town/x/jxnblk/preact-starter
37[preact client starter]: https://val.town/x/jxnblk/preact-client-starter
38[vue starter]: https://val.town/x/jxnblk/vue-starter
39[three.js starter]: https://val.town/x/jxnblk/threejs-starter
41[hono client starter]: https://val.town/x/jxnblk/hono-client-starter
42
43[react router starter]: https://val.town/x/jxnblk/react-router-starter
44[react router ssr starter]: https://val.town/x/jxnblk/react-router-ssr-starter
45[custom jsx runtime starter]: https://val.town/x/jxnblk/custom-jsx-runtime-starter
46
48- README card image
49
50- [x] React Starter
51- [x] React Streaming Starter
52- [x] React SPA Starter
53- [x] Remark Starter
54- [x] Remark Frontmatter Starter
58- [x] Hono client components
59- [ ] Hono Routing
60- [x] Preact
61- [x] Preact w/ client hydration
62- [x] Vuejs Starter
63- [x] Three.js

react-router-ssr-starterApp.tsx8 matches

@jxnblk•Updated 1 week ago

1/** @jsxImportSource https://esm.sh/react@19 */
2import React from "https://esm.sh/react@19";
3import { Routes, Route, Link, Outlet } from "https://esm.sh/react-router@7";
4
5function HTML ({ children }: {
6  children: React.ReactNode;
7}) {
8  return (
9    <html lang="en">
10      <head>
11        <title>React Router SSR Starter</title>
12      </head>
13      <body>
22    <div>
23      <header>
24        <div>React Router SSR Starter</div>
25        <nav>
26          <ul>
36      <Outlet />
37      <footer>
38        <a href="https://val.town/x/jxnblk/react-router-starter">Remix it on Val Town</a>
39      </footer>
40    </div>
43
44function Home () {
45  const [count, setCount] = React.useState(0);
46  return (
47    <div>

react-router-ssr-starterREADME.md4 matches

@jxnblk•Updated 1 week ago

1# React Router SSR Starter
2
3Minimal React Router starter example with server-side rendering for Val Town
4
5[View demo][demo]
7## How it works
8
9The `http.tsx` file is the main server that responds with an HTML stream, using React Router's `StaticRouter` component.
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's `BrowserRouter` in declarative mode.
12
13[demo]: https://jxnblk--591d77e41fb711f0a58c569c3dd06744.web.val.run

1import { useEffect } from "https://esm.sh/react@18.2.0?dev";
2
3export function useUsageStats (messages: any[], usages: any[]) {

1import { useEffect, useRef } from 'https://esm.sh/react@18.2.0?dev';
2
3

1import { useState, useEffect } from "https://esm.sh/react@18.2.0?dev";
2import { useAuth } from "./useAuth.tsx";
3

1import { useState, useEffect } from "https://esm.sh/react@18.2.0?dev";
2import { useAuth } from "./useAuth.tsx";
3