Val Town Code SearchReturn to Val Town

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/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 "./App.tsx";
4

1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import fcsdk from "https://esm.sh/@farcaster/frame-sdk";
3import { useEffect, useState } from "https://esm.sh/react@18.2.0";
4import { formatAddress, formatJSON, MonoButtonWithStatus, Section } from "./ui.tsx";
5

1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { useState } from "https://esm.sh/react@18.2.0";
3
4export function Example() {
6    <div class="m-5 mb-8">
7      <h1 class="text-4xl font-semibold mb-2">Mini App Starter</h1>
8      <div class="opacity-50">Hono + React + Tailwind + Farcaster Mini App Starter Project on Val Town</div>
9    </div>
10  );

1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { useState } from "https://esm.sh/react@18.2.0";
3import { Example } from "./components/Example.tsx";
4import { FarcasterMiniApp } from "./components/FarcasterMiniApp.tsx";

1/** @jsxImportSource https://esm.sh/react@18.2.0  */
2import { createRoot } from "https://esm.sh/react-dom@18.2.0/client?deps=react@18.2.0";
3import { Prism as SyntaxHighlighter } from "https://esm.sh/react-syntax-highlighter?deps=react@18.2.0,react-dom@18.2.0";
4import React, { useEffect, useState } from "https://esm.sh/react@18.2.0";
5import STARTER_PROMPTS from "./starter-prompts.js";
6
30}: {
31  prompt: string;
32  setPrompt: React.Dispatch<React.SetStateAction<string>>;
33  handleSubmit: (e: React.FormEvent) => void;
34  handleStarterPromptClick: (promptItem: PromptItem) => void;
35}) {
116
117function App() {
118  const previewRef = React.useRef<HTMLDivElement>(null);
119  const [prompt, setPrompt] = useState("");
120  const [projectId, setProjectId] = useState<number | null>(null);
174  }
175
176  async function handleSubmit(e: React.FormEvent | string) {
177    if (typeof e !== "string") {
178      e.preventDefault();
673                </div>
674                <div className="bg-white w-full h-full flex flex-col grow rounded-xl border-2 border-white overflow-hidden">
675                  <React.Fragment key={iframeKey}>
676                    <iframe
677                      srcDoc={code}
679                      className="w-full grow"
680                    />
681                  </React.Fragment>
682                </div>
683              </div>

1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { renderToString } from "npm:react-dom@18.2.0/server";
3import { Link } from "../helpers.tsx";
4

1/** @jsxImportSource https://esm.sh/react@18.2.0 **/
2import { renderToString } from "https://esm.sh/react-dom@18.2.0/server";
3
4export default (req: Request) => {

1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { renderToString } from "npm:react-dom@18.2.0/server";
3import { Link } from "../helpers.tsx";
4

1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { renderToString } from "npm:react-dom@18.2.0/server";
3import { Link } from "../helpers.tsx";
4