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.
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React from "https://esm.sh/react@18.2.0";
3import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
4
5function App() {
1/** @jsxImportSource https://esm.sh/react */
2import React, { useEffect, useState } from "https://esm.sh/react";
3import { createRoot } from "https://esm.sh/react-dom/client";
4import { BallpointPenCard } from "https://esm.town/v/dcm31/ballpointPenCard";
5import { MarkerPenCard } from "https://esm.town/v/dcm31/markerPenCard";
1/** @jsxImportSource https://esm.sh/react */
2import React, { useEffect, useRef } from "https://esm.sh/react";
3import { renderToString } from "https://esm.sh/react-dom/server";
4
5const HandDrawnCardsLogo = () => {
440 </li>
441 <li>
442 <strong>Import in JavaScript/React:</strong>
443 <br>
444 <code>import { HandDrawnCardsLogo } from "${import.meta.url.replace("esm.town", "val.town")}";</code>
553
554 // Generate all points around the shape (simplified for brevity)
555 // ... (points generation code - same as in React component)
556
557 // Start with top-left transition point
1/** @jsxImportSource https://esm.sh/react */
2import React, { useEffect, useRef } from "https://esm.sh/react";
3
4const HandDrawnCards = () => {
1/** @jsxImportSource https://esm.sh/react */
2import React, { useEffect, useRef } from "https://esm.sh/react";
3
4const HandDrawnCardsLogo = () => {
20 height="113.266"
21 >
22 <!-- SVG content generated from the React component logic -->
23 <defs>
24 <clipPath id="cardClip">
8- "Hand-Drawn" text in the Alegreya Sans SC font
9
10This is a static representation of the React component that was originally used to generate this logo.
11
12## Usage
1/** @jsxImportSource https://esm.sh/react */
2import React, { useEffect, useRef, useState } from "https://esm.sh/react";
3import { createRoot } from "https://esm.sh/react-dom/client";
4
5const BallpointPenCard = ({
