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.
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">
37imageUrl: "https://example.com/my-custom-image.jpg"
38author: "username"
39tags: ["javascript", "react", "val-town"]
40---
41
61## Technical Details
62
63- Built with React (client-side)
64- Hono (server-side)
65- Tailwind CSS (styling)
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
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React, { useState, useEffect } from "https://esm.sh/react@18.2.0";
3import { UserProfile } from "./UserProfile.tsx";
4import { HomePage } from "./HomePage.tsx";
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React from "https://esm.sh/react@18.2.0";
3import { ValGridItem } from "./ValGridItem.tsx";
4
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React, { useState, useEffect } from "https://esm.sh/react@18.2.0";
3import { fetchMoiConfig } from "../utils/moiConfig.tsx";
4
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React, { useState, useEffect } from "https://esm.sh/react@18.2.0";
3import { ValGrid } from "./ValGrid.tsx";
4import { fetchMoiConfig, getProfileImageUrl } from "../utils/moiConfig.tsx";
1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React, { useState } from "https://esm.sh/react@18.2.0";
3
4interface HomePageProps {
9 const [username, setUsername] = useState("");
10
11 const handleSubmit = (e: React.FormEvent) => {
12 e.preventDefault();
13 if (username.trim()) {
1/** @jsxImportSource npm:react */
2/** @jsxImportSourceTypes npm:@types/react */
3import { renderToString } from "npm:react-dom/server";
4import { SearchPage } from "./components.tsx";
5import {