1/** @jsxImportSource https://esm.sh/react@19.1.0 */
2
3export function App() {
1# React Hono Starter
2
3This app is a starter template for client-side React and server-side Hono.
4
5## Getting started
16 [`/frontend/index.html`](/frontend/index.html)
17 - which in turn imports [`/frontend/index.tsx`](/frontend/index.tsx)
18 - which in turn imports the React app from
19 [`/frontend/components/App.tsx`](/frontend/components/App.tsx).
20
28## Further resources
29
30- [React Hono Example](https://www.val.town/x/stevekrouse/reactHonoExample) is a
31 bigger example project, with a SQLite database table, queries, client-side
32 CSS, a favicon, and shared code that runs on both client and server.
14 "@google/generative-ai": "^0.15.0",
15 "next": "^14.0.0",
16 "react": "^18.0.0",
17 "react-dom": "^18.0.0",
18 "typescript": "^5.0.0"
19 },
20 "devDependencies": {
21 "@types/node": "^20.0.0",
22 "@types/react": "^18.0.0",
23 "@types/react-dom": "^18.0.0",
24 "eslint": "^8.0.0",
25 "eslint-config-next": "^14.0.0"
1/** @jsxImportSource https://esm.sh/react@19 */
2import fcsdk from 'https://esm.sh/@farcaster/frame-sdk'
3import { useInfiniteQuery } from 'https://esm.sh/@tanstack/react-query@5'
4import { Heart, MessageCircle, Repeat, Images, Copy } from 'https://esm.sh/lucide-react@0.510.0'
5import { useState } from 'https://esm.sh/react@19'
6import { useNavigate } from 'https://esm.sh/react-router@7'
7import ReactPlayer from 'https://esm.sh/react-player'
8
9import { LinkedText } from './LinkedText.tsx'
92
93 {videos?.map((m, i) => (
94 <ReactPlayer
95 key={i}
96 src={m.url}
163 const interactions = [
164 { Icon: MessageCircle, count: cast?.replies?.count },
165 { Icon: Repeat, count: cast?.reactions?.recasts_count },
166 { Icon: Heart, count: cast?.reactions?.likes_count },
167 ]
168
189 queryFn: (nextPageParam: any) => Promise<any>
190 display?: string
191 renderItem?: (item: any) => React.ReactNode
192 containerClass?: string
193}) {
189- **Imports:** Use `https://esm.sh` for npm and Deno dependencies to ensure compatibility on server and browser
190- **Storage Strategy:** Only use backend storage if explicitly required; prefer simple static client-side sites
191- **React Configuration:** When using React libraries, pin versions with `?deps=react@18.2.0,react-dom@18.2.0` and start the file with `/** @jsxImportSource https://esm.sh/react@18.2.0 */`
192- Ensure all React dependencies and sub-dependencies are pinned to the same version
193- **Styling:** Default to using TailwindCSS via `<script src="https://cdn.twind.style" crossorigin></script>` unless otherwise specified
194
275 - Always run table creation before querying
276
2773. **React Configuration:**
278 - All React dependencies must be pinned to 18.2.0
279 - Always include `@jsxImportSource https://esm.sh/react@18.2.0` at the top of React files
280 - Rendering issues often come from mismatched React versions
281
2824. **File Handling:**
1/** @jsxImportSource https://esm.sh/react@19 */
2import { LayoutGrid, ArrowUpRight } from 'https://esm.sh/lucide-react@0.510.0'
3import { useNavigate } from 'https://esm.sh/react-router@7'
4
5import { PaddedError, PaddedSpinner, Section, Button } from '../components/ui.tsx'
1/** @jsxImportSource https://esm.sh/react@19 */
2import { ArrowLeft, Share, LoaderCircle } from 'https://esm.sh/lucide-react@0.510.0'
3import { useState } from 'https://esm.sh/react@19'
4import { NavLink, Outlet } from 'https://esm.sh/react-router@7'
5
6export function Section({ children, ...props }: any) {
5url: "https://dcm31--8c571770907b11f0b5510224a6c84d84.web.val.run"
6author: "dcm31"
7tags: ["javascript", "react", "val-town", "elevenlabs", "dialogue"]
8---
1import React from "https://esm.sh/react@18";
2
3const GitHubIcon = () => (
1import React from "https://esm.sh/react@18";
2
3export function Footer() {
59 <span className="project-name">Personal Nexus</span>
60 </a>{" "}
61 • React + AT Protocol + Val.town
62 </div>
63 </footer>
