1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React from "https://esm.sh/react@18.2.0";
3
4interface BoozeMeterProps {
6}
7
8const BoozeMeter: React.FC<BoozeMeterProps> = ({ level }) => {
9 const meterWidth = Math.min(level * 10, 100);
10 return (
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React from "https://esm.sh/react@18.2.0";
3
4interface ScoreboardProps {
8}
9
10const Scoreboard: React.FC<ScoreboardProps> = ({ bet, profit, bank }) => {
11 return (
12 <div>
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 { 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>
1import confetti from "https://esm.sh/canvas-confetti@1.6.0";
2import React, { type MouseEvent } from "https://esm.sh/react@18.2.0";
3
4const App = () => {
15 return (
16 <div onMouseMove={onMouseMove}>
17 <h1>Hello React! ⚛️</h1>
18 <p>Building user interfaces.</p>
19 </div>
4 * Uses OpenAI's API to generate code responses in the proper format.
5 */
6/** @jsxImportSource https://esm.sh/react@18.2.0 */
7import { Hono } from "npm:hono";
8import { cors } from "npm:hono/cors";
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React, { useState, useRef, useEffect } from "https://esm.sh/react@18.2.0";
3import { v4 as uuidv4 } from "https://esm.sh/uuid@9.0.0";
4
14 const [message, setMessage] = useState("");
15
16 const handleSubmit = (e: React.FormEvent) => {
17 e.preventDefault();
18 if (message.trim() && !disabled) {
218 };
219
220 const handleSubmit = (e: React.FormEvent) => {
221 e.preventDefault();
222 handleCreateProject(projectName);