Val Town Code SearchReturn to Val Town

1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { useState } from "https://esm.sh/react@18.2.0";
3
4export function App() {
18  return (
19    <div>
20      <h1>Val Town React + Hono Starter</h1>
21      <pre>{data}</pre>
22      I've been clicked <button onClick={async () => await getTrie()}>{clicked}</button> times

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">

denoViteApp.tsx6 matches

@maxm•Updated 1 month ago

1import "./App.css";
2import { useState } from "react";
3import reactLogo from "./assets/react.svg";
4
5function App() {
19          <img src="/vite.svg" className="logo" alt="Vite logo" />
20        </a>
21        <a href="https://reactjs.org" target="_blank">
22          <img src={reactLogo} className="logo react" alt="React logo" />
23        </a>
24      </div>
25      <h1>Vite + React + Deno + Val Town</h1>
26      <div className="card">
27        <button onClick={() => setCount(count => count + 1)}>
33      </div>
34      <p className="read-the-docs">
35        Click on the Vite and React logos to learn more
36      </p>
37    </>

denoViteREADME.md1 match

@maxm•Updated 1 month ago

1# Vite + Deno + React + TypeScript + Val Town
2
3

1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React, { useState, useRef } from "https://esm.sh/react@18.2.0";
3import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
4
5const SimpleLogoGenerator = () => {

1/** @jsxImportSource https://esm.sh/react@19 */
2import { useEffect, useState } from "https://esm.sh/react@19";
3import { BackButton, Button, ShareButton } from "./ui.tsx";
4

1/** @jsxImportSource https://esm.sh/react@19 */
2import { createRoot } from "https://esm.sh/react-dom@19/client";
3import { BrowserRouter } from "https://esm.sh/react-router@7";
4import { App } from "./App.tsx";
5

1/** @jsxImportSource https://esm.sh/react@19 */
2import React from "https://esm.sh/react@19"
3import { hydrateRoot } from "https://esm.sh/react-dom@19/client";
4import App from "./App.tsx"
5