Search

# React Router SSR Starter
Minimal React Router starter example with server-side rendering for Val Town
The `http.tsx` file is the main server that responds with an HTML stream, using React Router's `StaticRouter` component.
The HTML includes a `<script type="module">` tag that loads the `client.tsx` file to hydrate the app
with client-side routing provided by React Router's `BrowserRouter` in declarative mode.

# React Hono Starter
This app is a starter template for client-side React and server-side Hono.
- 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`.
[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.

This backend HTTP server is responsible for serving all static assets to the browser to render the app, including HTML, JavaScript (including all client-side React), CSS, and even the favicon SVG.
In a normal server environment, you would likely use a middleware [like this one](https://hono.dev/docs/getting-started/nodejs#serve-static-files) to serve static files. Some frameworks or deployment platforms automatically make any content inside a `public/` folder public. 
We *bootstrap* `index.html` with some initial data from the server, so that it gets dynamically injected JSON data without having to make another round-trip request to the server to get that data on the frontend. This is a common pattern for client-side rendered apps.
This app has two CRUD API routes: for reading and inserting into the messages table. They both speak JSON, which is standard. They import their functions from `/backend/database/queries.ts`. These routes are called from the React app to refresh and update data.

# React Hono Val Town Project Starter Template
The entrypoint of this app is `backend/index.ts`, which is the Hono HTTP server, which serves the HTML, CSS, and JS, which run client-side.

This template is a classic client-side-only React app. 
This HTML file has a `<div id="root"></div>`, which is where we mount the React app.
This HTML file imports `/frontend/index.tsx` from `/public/index.tsx`, which is the **entrypoint** for all frontend JavaScript, including all the React. It is not a problem that it imports a file with a `.tsx` extension becaues browsers ignore file extensions. They only pay attention to content-types, which is great, because all these files will be returned as transpiled JS with the appropriate JS content type by [stevekrouse/utils/serve-public](https://www.val.town/x/stevekrouse/utils/branch/main/code/serve-public/README.md).)
This file is the **entrypoint** for frontend JavaScript. It imports the React app from `/frontend/components/App.tsx` and mounts it on `<div id="root"></div>`.
This directory is where the React components are stored. They're pretty standard client-side React components.

This template is a classic client-side-only React app. 
This HTML file has a `<div id="root"></div>`, which is where we mount the React app.
This HTML file imports `/frontend/index.tsx` from `/public/index.tsx`, which is the **entrypoint** for all frontend JavaScript, including all the React. It is not a problem that it imports a file with a `.tsx` extension becaues browsers ignore file extensions. They only pay attention to content-types, which is great, because all these files will be returned as transpiled JS with the appropriate JS content type by [stevekrouse/utils/serve-public](https://www.val.town/x/stevekrouse/utils/branch/main/code/serve-public/README.md).)
This file is the **entrypoint** for frontend JavaScript. It imports the React app from `/frontend/components/App.tsx` and mounts it on `<div id="root"></div>`.
This directory is where the React components are stored. They're pretty standard client-side React components.

# React Hono Val Town Project Starter Template
The entrypoint of this app is `backend/index.ts`, which is the Hono HTTP server, which serves the HTML, CSS, and JS, which run client-side.

This backend HTTP server is responsible for serving all static assets to the browser to render the app, including HTML, JavaScript (including all client-side React), CSS, and even the favicon SVG.
In a normal server environment, you would likely use a middleware [like this one](https://hono.dev/docs/getting-started/nodejs#serve-static-files) to serve static files. Some frameworks or deployment platforms automatically make any content inside a `public/` folder public. 
We *bootstrap* `index.html` with some initial data from the server, so that it gets dynamically injected JSON data without having to make another round-trip request to the server to get that data on the frontend. This is a common pattern for client-side rendered apps.
This app has two CRUD API routes: for reading and inserting into the messages table. They both speak JSON, which is standard. They import their functions from `/backend/database/queries.ts`. These routes are called from the React app to refresh and update data.

# Preact Client Starter
Minimal Preact starter example with client-side hydration
The `http.tsx` file renders the `HTML` Preact component on the server.
This component includes a `<script>` tag that requests the `client.ts` module in the browser.
This module hydrates the `<div id="app">` element with the `App` component
to allow you to use client-side state.

This template is a classic client-side-only React app. 
This HTML file has a `<div id="root"></div>`, which is where we mount the React app.
This HTML file imports `/frontend/index.tsx` from `/public/index.tsx`, which is the **entrypoint** for all frontend JavaScript, including all the React. It is not a problem that it imports a file with a `.tsx` extension becaues browsers ignore file extensions. They only pay attention to content-types, which is great, because all these files will be returned as transpiled JS with the appropriate JS content type by [stevekrouse/utils/serve-public](https://www.val.town/x/stevekrouse/utils/branch/main/code/serve-public/README.md).)
This file is the **entrypoint** for frontend JavaScript. It imports the React app from `/frontend/components/App.tsx` and mounts it on `<div id="root"></div>`.
This directory is where the React components are stored. They're pretty standard client-side React components.

# React Hono Val Town Project Starter Template
The entrypoint of this app is `backend/index.ts`, which is the Hono HTTP server, which serves the HTML, CSS, and JS, which run client-side.

This backend HTTP server is responsible for serving all static assets to the browser to render the app, including HTML, JavaScript (including all client-side React), CSS, and even the favicon SVG.
In a normal server environment, you would likely use a middleware [like this one](https://hono.dev/docs/getting-started/nodejs#serve-static-files) to serve static files. Some frameworks or deployment platforms automatically make any content inside a `public/` folder public. 
We *bootstrap* `index.html` with some initial data from the server, so that it gets dynamically injected JSON data without having to make another round-trip request to the server to get that data on the frontend. This is a common pattern for client-side rendered apps.
This app has two CRUD API routes: for reading and inserting into the messages table. They both speak JSON, which is standard. They import their functions from `/backend/database/queries.ts`. These routes are called from the React app to refresh and update data.

A simple community message board application built with React Router 7, demonstrating a full-stack approach with server-side rendering and client-side navigation.
- **Server-Side Rendering**: All pages are server-rendered when accessed directly
- **Client-Side Navigation**: After initial load, navigation happens client-side
- **Topic Management**: Create and view discussion topics
│   ├── index.html           # HTML template
│   └── index.tsx            # Client entry point
├── routes/
### Server-Side Rendering
The application uses React Router 7's `createStaticHandler`, `createStaticRouter`, and `StaticRouterProvider` to render pages on the server. When a user directly accesses a URL:
2. It runs the appropriate loaders/actions for the matched route
3. The page is rendered with the data and sent to the client
4. The client hydrates the page with `createBrowserRouter` and `RouterProvider`
### Client-Side Navigation
After the initial page load, navigation happens entirely on the client:
1. React Router handles link clicks and form submissions
2. Data is fetched asynchronously using loaders and actions
- **Hono**: For server-side routing and handling
- **React Router 7**: For both server and client-side routing
- **SQLite**: For data persistence
The code is structured to be idiomatic and simple, serving as a reference for building full-stack applications with React Router 7. The project uses a Remix-style file naming convention with co-located components, loaders, and actions in the `/routes` directory.

# React Hono Starter
This app is a starter template for client-side React and server-side Hono.
- 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`.
[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.

/** @jsxImportSource https://esm.sh/react@18.2.0 */
import React, { useState, useEffect } from "https://esm.sh/react@18.2.0";
import { createRoot } from "https://esm.sh/react-dom@18.2.0/client";
import { Hono } from "https://esm.sh/hono@3";
// Client-side App component
function App() {
// Client-side rendering
function client() {
  createRoot(document.getElementById("root")).render(<App />);
}
if (typeof document !== "undefined") { client(); }
// Server-side code
const app = new Hono();