1/** @jsxImportSource https://esm.sh/react */
2import { renderToString } from "npm:react-dom/server";
3
4export default async function(req: Request) {
1/** @jsxImportSource https://esm.sh/react */
2import { renderToString } from "npm:react-dom/server";
3
4export default async function(req: Request) {
1import React, { useEffect, useState } from "react";
2import ReactDOM from "react-dom/client";
3
4const ZariCalculator = () => {
226};
227
228const root = ReactDOM.createRoot(document.getElementById("root")!);
229root.render(<ZariCalculator />);
1import { useState } from "https://esm.sh/react@18.2.0";
2
3export function App() {
5 return (
6 <div>
7 <h1>Val Town React + Hono Starter</h1>
8 I've been clicked <button onClick={() => setClicked((c) => c + 1)}>{clicked}</button> times
9 </div>
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.
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="/frontend/style.css">
8 <link rel="icon" href="/frontend/favicon.svg" type="image/svg+xml">
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React, { useState } from "https://esm.sh/react@18.2.0?deps=react@18.2.0";
3import type { Todo } 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?deps=react@18.2.0";
3import type { Todo } from "../../shared/types.ts";
4
21 const [category, setCategory] = useState<Todo['category']>('work');
22
23 const handleSubmit = (e: React.FormEvent) => {
24 e.preventDefault();
25 if (!title.trim()) return;
28│ │ └── TodoForm.tsx # Formulário de tarefas
29│ ├── index.html # Template HTML
30│ ├── index.tsx # Entry point React
31│ └── README.md
32├── shared/
47
48- **Backend**: Hono.js + TypeScript
49- **Frontend**: React 18.2.0 + TypeScript
50- **Estilização**: CSS customizado + TailwindCSS
51- **Armazenamento**: Val Town Blob Storage
