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>
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>
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
1import { useEffect } from "https://esm.sh/react@18.2.0?dev";
2
3function setLoadingFavicon() {
Starter template with client-side React & Hono server
Hono + React + Tailwind + Farcaster Mini App Starter Project
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
