1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React from "https://esm.sh/react@18.2.0";
3import { renderToString } from "https://esm.sh/react-dom@18.2.0/server";
4
5interface Vibe {
16}
17
18function Section({ title, content }: { title: string; content: React.ReactNode }) {
19 return (
20 <section>
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React, { useState } 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@18.2.0 */
2import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
3import React, { useEffect, useState } from "https://esm.sh/react@18.2.0";
4import { blob } from "https://esm.town/v/std/blob";
5import { sqlite } from "https://esm.town/v/stevekrouse/sqlite";
210 const [imageUrl, setImageUrl] = useState("");
211
212 const handleSubmit = (e: React.FormEvent) => {
213 e.preventDefault();
214 onSubmit({
266}) {
267 const [newMessage, setNewMessage] = useState("");
268 const chatEndRef = React.useRef<HTMLDivElement>(null);
269
270 useEffect(() => {
535 <script src="https://esm.town/v/std/catch"></script>
536 <script type="module">
537 import React from "https://esm.sh/react@18.2.0";
538 import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
539 import App from "${import.meta.url}";
540
541 createRoot(document.getElementById("root")).render(React.createElement(App));
542 </script>
543 </body>
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { parseProject } from "https://esm.town/v/std/parseImportMeta/project";
3import { sqlite } from "https://esm.town/v/std/sqlite?v=6";
4import { html } from "https://esm.town/v/stevekrouse/html";
5import { renderToString } from "npm:react-dom@18.2.0/server";
6import config from "./config.json" with { type: "json" };
7import { SparklineSVG } from "./sparklineSVG";
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2export function SparklineSVG({ strokeWidth = 2, data = [], fill = "none", stroke = "black" }) {
3 const padding = 2;
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 { ArrowLeft, Share } from "https://esm.sh/lucide-react";
3import { useEffect, useState } from "https://esm.sh/react@19";
4
5export function Section({ children, ...props }: any) {
2launch miniapps when running from outside warpcast
3
4react-query
5notifications
6db storage
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@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
