1/** @jsxImportSource https://esm.sh/react@18.2.0?dev */
2import { createRoot } from "https://esm.sh/react-dom@18.2.0/client?dev";
3import { App } from "./components/App.tsx";
4
1/** @jsxImportSource https://esm.sh/react@18.2.0?dev */
2import React from "https://esm.sh/react@18.2.0?dev";
3import { Link } from "https://esm.sh/react-router@7?dev&deps=react@18.2.0&react-dom@18.2.0";
4import {
5 SquarePenIcon,
98 </p>
99 <ul>
100 <li>React frontend with TypeScript</li>
101 <li>Hono API server backend</li>
102 <li>Web Audio API for sound notifications</li>
1/** @jsxImportSource https://esm.sh/react@18.2.0?dev */
2import { renderToString } from "https://esm.sh/react-dom@18.2.0/server";
3import { TownieIcon } from "./components/icons.tsx";
4
1/** @jsxImportSource https://esm.sh/react@18.2.0?dev */
2import { useRef, useEffect, useState } from "https://esm.sh/react@18.2.0?dev";
3import { TownieIcon } from "./icons.tsx";
4import { Messages } from "./Messages.tsx";
1/** @jsxImportSource https://esm.sh/react@18.2.0?dev */
2import { useState, useEffect, useContext } from "https://esm.sh/react@18.2.0?dev";
3import { useParams } from "https://esm.sh/react-router@7?dev&deps=react@18.2.0&react-dom@18.2.0";
4
5import { AppContext } from "./App.tsx";
1/** @jsxImportSource https://esm.sh/react@18.2.0?dev */
2import { useMemo } from "https://esm.sh/react@18.2.0?dev";
3import { useNavigate, useParams } from "https://esm.sh/react-router@7?dev&deps=react@18.2.0&react-dom@18.2.0";
4import { useBranches } from "../hooks/useBranches.tsx";
5import { useCreateBranch } from "../hooks/useCreateBranch.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="/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 { createRoot } from "https://esm.sh/react-dom@18.2.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- **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 { 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>
