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
5The **entrypoint** is `/backend/index.ts`. That's the backend HTTP server, which also serves the all the frontend assets.
6
7The **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`.
8
9[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 { BskyAgent } from "https://esm.sh/@atproto/api";
3import * as d3 from "https://esm.sh/d3@7.8.5";
4import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
5import React, { useEffect, useRef, useState } from "https://esm.sh/react@18.2.0";
6
7type FollowEdge = {
3 <head>
4 <meta charset="UTF-8" />
5 <title>Blackjack with React + Hono</title>
6 <style>
7 body {
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React from "https://esm.sh/react@18.2.0";
3
4interface Card {
36
37// Component to display a single card
38const Card: React.FC<{ card: Card, hidden?: boolean }> = ({ card, hidden = false }) => {
39 if (hidden) {
40 return (
87};
88
89const BlackjackTable: React.FC<BlackjackTableProps> = ({
90 playerHand,
91 dealerHand,
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React, { useEffect, useState } from "https://esm.sh/react@18.2.0";
3import BlackjackTable from "./BlackjackTable.tsx";
4import BoozeButton from "./BoozeButton.tsx";
30}
31
32const App: React.FC = () => {
33 const [gameState, setGameState] = useState<GameState | null>(null);
34 const [message, setMessage] = useState<string>("No game in progress yet. Click Start!");
176 borderRadius: "8px",
177 }}>
178 <h1>Blackjack with React + Hono</h1>
179 <p>{message}</p>
180 {result && <p style={{ fontWeight: "bold", fontSize: "1.2em", color: result.includes("win") ? "green" : "red" }}>{result}</p>}
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React from "https://esm.sh/react@18.2.0";
3
4interface BoozeButtonProps {
7}
8
9const BoozeButton: React.FC<BoozeButtonProps> = ({ onBooze, disabled }) => {
10 return (
11 <div style={{ margin: "20px 0" }}>
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.
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">