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 * as echarts from "https://esm.sh/echarts@5.5.0";
3import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
4import React, { useEffect, useMemo, useRef, useState } from "https://esm.sh/react@18.2.0";
5import { blob } from "https://esm.town/v/std/blob";
6
37
38- `/backend` - Deno-based API server
39- `/frontend` - React web application
40- `/pi` - Raspberry Pi code for the physical wand device
41- `/shared` - Shared types and utilities
1/** @jsxImportSource https://esm.sh/react@19.0.0 */
2
3import { useEffect, useRef, useState } from "https://esm.sh/react@19.0.0";
4import { WorkOrder } from "../../types.ts";
5import { ActionButton } from "./ActionButton.tsx";
12 BsSend,
13 BsTrash,
14} from "https://esm.sh/react-icons@5.5.0/bs";
15
16type WorkOrderItemProps = {
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React from "https://esm.sh/react@18.2.0";
3import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
4
5function App() {
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React, { useState } from "https://esm.sh/react@18.2.0";
3import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
4
5function App() {
8 const [isLoading, setIsLoading] = useState(false);
9
10 const handleFileUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
11 const uploadedFile = event.target.files?.[0];
12 if (uploadedFile) {
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
3import React, { useState } from "https://esm.sh/react@18.2.0";
4
5function App() {
8 const [isLoading, setIsLoading] = useState(false);
9
10 const handleFileUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
11 const uploadedFile = event.target.files?.[0];
12 if (uploadedFile) {
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
3import React, { useState } from "https://esm.sh/react@18.2.0";
4
5function App() {
8 const [isLoading, setIsLoading] = useState(false);
9
10 const handleFileUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
11 const uploadedFile = event.target.files?.[0];
12 if (uploadedFile) {
