Val Town Code SearchReturn to Val Town

1/** @jsxImportSource https://esm.sh/react@18.2.0?dev */
2import { Link, useNavigate } from "https://esm.sh/react-router@7?dev&deps=react@18.2.0&react-dom@18.2.0";
3import { useLocalStorage } from "https://esm.sh/react-use?dev&deps=react@18.2.0&react-dom@18.2.0";
4import { useContext, useEffect } from "https://esm.sh/react@18.2.0?dev";
5import { useAuth } from "../hooks/useAuth.tsx";
6import { AppContext } from "./App.tsx";

1/** @jsxImportSource https://esm.sh/react */
2import { renderToString } from "npm:react-dom/server";
3
4export default async function(req: Request) {

1/** @jsxImportSource https://esm.sh/react@18.2.0?dev */
2import { useNavigate } from "https://esm.sh/react-router@7?dev&deps=react@18.2.0&react-dom@18.2.0";
3import { useEffect, useState } from "https://esm.sh/react@18.2.0?dev";
4import { useAuth } from "../hooks/useAuth.tsx";
5

1import { useEffect, useState } from "https://esm.sh/react@18.2.0?dev";
2import { useAuth } from "./useAuth.tsx";
3

1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
3import React, { useState } from "https://esm.sh/react@18.2.0";
4
5function App() {
8  const [isLoading, setIsLoading] = useState(false);
9
10  const handleFileUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
11    const uploadedFile = event.target.files?.[0];
12    if (uploadedFile) {

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@18.2.0 */
2import { useState, useEffect } from "https://esm.sh/react@18.2.0";
3
4interface ProjectInfo {

1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import { createRoot } from "https://esm.sh/react-dom@18.2.0/client?deps=react@18.2.0";
3import { App } from "./components/App.tsx";
4

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# 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/components/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.