Val Town Code SearchReturn to Val Town

1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React, { useState, useEffect } from "https://esm.sh/react@18.2.0";
3import { Dashboard } from "./Dashboard.tsx";
4import { Navbar } from "./Navbar.tsx";

7  <script src="https://cdn.twind.style" crossorigin></script>
8  <script src="https://esm.town/v/std/catch"></script>
9  <!-- React and dependencies -->
10  <script type="module">
11    import React from "https://esm.sh/react@18.2.0";
12    import ReactDOM from "https://esm.sh/react-dom@18.2.0/client";
13    import { App } from "./components/App.tsx";
14
16    window.twind = window.twind.setup({});
17
18    // Mount React application
19    const root = ReactDOM.createRoot(document.getElementById("app"));
20    root.render(React.createElement(App));
21  </script>
22</head>

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

1/** @jsxImportSource https://esm.sh/react@19 */
2import { useEffect, useState } from "https://esm.sh/react@19";
3
4export const useQuery = (deps, asyncFn) => {

1/** @jsxImportSource https://esm.sh/react@19 */
2import { useState } from "https://esm.sh/react@19";
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# 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.

16```
17
18Example usage: https://www.val.town/x/std/reactHonoStarter/code/backend/index.ts

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 { NavLink, Route, Routes } from "https://esm.sh/react-router@7";
3import { useState } from "https://esm.sh/react@19";
4import { Example } from "./components/Example.tsx";
5

1/** @jsxImportSource https://esm.sh/react@19 */
2import { useState } from "https://esm.sh/react@19";
3
4export function Example() {
6  return (
7    <div class="p-4 ">
8      <h1 class="text-3xl font-semibold mb-2">Val Town React + Hono Starter</h1>
9      <div class="opacity-50 mb-4">Hello world...</div>
10      <div class="my-10">