1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React, { useState, useEffect } from 'https://esm.sh/react@18.2.0';
3import type { Itinerary, TourProgress, TourStop } from '../../shared/types.ts';
4
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React, { useState } from 'https://esm.sh/react@18.2.0';
3import type { Itinerary, TourStop } from '../../shared/types.ts';
4
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React, { useState } from 'https://esm.sh/react@18.2.0';
3import type { Itinerary, ItineraryRequest } from '../../shared/types.ts';
4
36 ];
37
38 const handleSubmit = async (e: React.FormEvent) => {
39 e.preventDefault();
40
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React, { useState, useEffect } from 'https://esm.sh/react@18.2.0';
3import type { Itinerary, TourProgress } from '../../shared/types.ts';
4import SearchForm from './SearchForm.tsx';
10 '/shared/types.ts',
11 'https://cdn.twind.style',
12 'https://esm.sh/react@18.2.0',
13 'https://esm.sh/react-dom@18.2.0'
14];
15
48
49- **Backend**: Hono + SQLite + OpenAI
50- **Frontend**: React + TypeScript + TailwindCSS
51- **Offline**: Service Workers + Cache API
52- **Storage**: SQLite for persistence, localStorage for offline data
1/** @jsxImportSource npm:react */
2/** @jsxImportSourceTypes npm:@types/react */
3import { JSX } from "npm:react";
4import { clientScript } from "./client.tsx";
5import { styles } from "./styles.tsx";
1228 <a href="?q=discord" className="example-link">discord</a>
1229 <a href="?q=openai" className="example-link">openai</a>
1230 <a href="?q=react" className="example-link">react</a>
1231 </div>
1232 </div>
1382 <a href="?q=discord" className="example-link">discord</a>
1383 <a href="?q=openai" className="example-link">openai</a>
1384 <a href="?q=react" className="example-link">react</a>
1385 </div>
1386 </div>
1/** @jsxImportSource npm:react */
2/** @jsxImportSourceTypes npm:@types/react */
3import { renderToString } from "npm:react-dom/server";
4import {
5 SearchResponse as _SearchResponse
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { useState } from "https://esm.sh/react@18.2.0";
3
4const lineage = {
16 return (
17 <div>
18 <h1>Val Town React + Hono Starter</h1>
19 I've been clicked <button onClick={() => setClicked((c) => c + 1)}>{clicked}</button> times
20
1# React Hono Starter
2
3This app is a starter template for client-side React and server-side Hono.
4
5## Getting started
13- The **client-side entrypoint** is [`/frontend/index.html`](/frontend/index.html)
14 - which in turn imports [`/frontend/index.tsx`](/frontend/index.tsx)
15 - which in turn imports the React app from [`/frontend/components/App.tsx`](/frontend/components/App.tsx).
16
17So if you wanted to get a sense of how this app comes together, we suggest reading the files in this order:
21## Further resources
22
23- [React Hono Example](https://www.val.town/x/stevekrouse/reactHonoExample) is a bigger example project, with a SQLite database table, queries, client-side CSS, a favicon, and shared code that runs on both client and server.