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">
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { useState } from "https://esm.sh/react@18.2.0";
3
4export function App() {
6 return (
7 <div>
8 <h1>Val Town React + Hono Starter</h1>
9 I've been clicked <button onClick={() => setClicked((c) => c + 1)}>{clicked}</button> times
10 </div>
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
3import React, { useEffect, useRef } from "https://esm.sh/react@18.2.0";
4
5// --- Vertex Shader (Simple pass-through) ---
170`;
171
172// --- React Component ---
173function App() {
174 const canvasRef = useRef<HTMLCanvasElement>(null);
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
3import React, { useEffect, useRef } from "https://esm.sh/react@18.2.0";
4
5// --- Vertex Shader (Simple pass-through) ---
62`;
63
64// --- React Component ---
65function App() {
66 const canvasRef = useRef<HTMLCanvasElement>(null);
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
3import React, { useEffect, useRef } from "https://esm.sh/react@18.2.0";
4
5// --- Vertex Shader (Simple pass-through) ---
81`;
82
83// --- React Component ---
84function App() {
85 const canvasRef = useRef<HTMLCanvasElement>(null);
1/** @jsxImportSource npm:react@18.2.0 */
2import React from "npm:react@18.2.0";
3import type { ReactNode } from "npm:react@18.2.0";
4
5export function Layout({ children }: { children: ReactNode }) {
6 return (
7 <html lang="en">
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2
3import Markdown from "https://esm.sh/react-markdown@9.1.0?deps=react@18.2.0";
4
5// Custom renderer for markdown components to handle videos
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
3import React, { useEffect, useRef } from "https://esm.sh/react@18.2.0";
4
5// --- Vertex Shader (Simple pass-through) ---
228`;
229
230// --- React Component ---
231function App() {
232 const canvasRef = useRef<HTMLCanvasElement>(null);
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2
3import Markdown from "./Markdown.tsx";
Hono + React + Tailwind + Farcaster Mini App Starter Project
Starter template with client-side React & Hono server
Write business logic with ease
Meet the new standard for modern TypeScript development.
Type-safe, reactive, framework-agnostic library to manage your business logic.
Follow me if you learn more about JavaScript | TypeScript | React.js | Next.js | Linux | NixOS | Frontend Developer | https://linktr.ee/officialrajdeepsingh
