1/** @jsxImportSource https://esm.sh/react */
2import { render } from "https://deno.land/x/resvg_wasm/mod.ts";
3import { Hono } from "npm:hono";
25 <div tw="h-[270px]"></div>
26 <div tw="flex text-[100px] tracking-[-5px]">Mini App Starter</div>
27 <div tw="flex text-[30px] opacity-50 tracking-[-1px]">Hono + React + Tailwind Starter Project on Val Town</div>
28 </div>
29 </div>,
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 { LoaderCircle, Mic, MicOff } from "https://esm.sh/lucide-react";
5import { NavLink, Route, Routes, useNavigate, useParams } from "https://esm.sh/react-router@7";
6import { useEffect, useRef, useState } from "https://esm.sh/react@19";
7
8import { Button, Input, Section } from "../components/ui.tsx";
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# React Hono Starter
2
3This app is a starter template for client-side React and server-side Hono.
4
5- **Remix** this starter template on the top right to get started.
7- The **entrypoint** is `/backend/index.ts`. That's the backend HTTP server, which also serves the all the frontend assets.
8
9- The **client-side entrypoint** is `/frontend/index.html`, which in turn imports `/frontend/index.tsx`, which in turn imports the React app from `/frontend/components/App.tsx`.
10
11[React Hono Example](https://www.val.town/x/stevekrouse/reactHonoExample) is a fuller featured example project, with a SQLite database table, queries, client-side CSS and a favicon, and some shared code that runs on both client and server.
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
3import { App } from "./components/App.tsx";
4
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="/public/style.css">
8 <link rel="icon" href="/public/favicon.svg" sizes="any" type="image/svg+xml">
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { useState } from "https://esm.sh/react@18.2.0";
3
4export function App() {
6 return (
7 <div>
8 <h1>Val Town React + Hono Starter</h1>
9 I've been clicked <button onClick={() => setClicked((c) => c + 1)}>{clicked}</button> times
10 </div>
1# React Hono Val Town Project Starter Template
2
3This is a starter template for a full-stack app in a Val Town Project. The app itself is a simple persistent message board.
