34
35If you want more interactivity, check out this
36[React starter](https://www.val.town/x/std/reactHonoStarter).
37
38### ← favicon.svg
1/** @jsxImportSource https://esm.sh/react */
2import { renderToString } from "npm:react-dom/server";
3
4export default async function(req: Request) {
1/** @jsxImportSource https://esm.sh/react@19 */
2import { createRoot } from "https://esm.sh/react-dom@19/client";
3import { App } from "./components/App.tsx";
4
1/** @jsxImportSource https://esm.sh/react@19.1.0 */
2import { createRoot } from "https://esm.sh/react-dom@19.1.0/client";
3import { App } from "./components/App.tsx";
4
1# React Hono Starter
2
3This app is a starter template for client-side React and server-side Hono.
4
5## Getting started
16 [`/frontend/index.html`](/frontend/index.html)
17 - which in turn imports [`/frontend/index.tsx`](/frontend/index.tsx)
18 - which in turn imports the React app from
19 [`/frontend/components/App.tsx`](/frontend/components/App.tsx).
20
28## Further resources
29
30- [React Hono Example](https://www.val.town/x/stevekrouse/reactHonoExample) is a
31 bigger example project, with a SQLite database table, queries, client-side
32 CSS, a favicon, and shared code that runs on both client and server.
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">
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/** @jsxImportSource https://esm.sh/preact */
2
3import { serveFile } from "https://esm.town/v/std/utils/index.ts";
1/** @jsxImportSource https://esm.sh/preact */
2import { render } from "https://esm.sh/preact";
3
4const root = document.querySelector("body");
1/** @jsxImportSource https://esm.sh/preact */
2
3import { Info, Play } from "https://esm.sh/lucide-preact";
4
5export default () => {
