Val Town Code SearchReturn to Val Town

how-toREADME.md17 matches

@jxnblk•Updated 1 week ago

3A list of minimal starter projects to show you how to do various things in Val Town.
4
5- [React Starter][]: Render React on the server and hydrate on the client
6- [React Streaming Starter][]: Render React with a streaming response
7- [React SPA Starter][]: Render React on the client-side only
8- [React Router Starter][]: Render a React app with client-side routing using React Router
9- [Remark Starter][]: Render markdown as HTML
10- [Remark Frontmatter Starter][]: Parse frontmatter in markdown
15- [SVG Starter][]: Render an SVG image response
16- [SVG PNG Starter][]: Render an SVG as a PNG image response
17- [Preact Starter][]: Render Preact on the server
18- [Preact Client Starter][]: Render Preact on the server and hydrate the app on the client
19- [Vue Starter][]: Render Vue JSX on the server
20- [Three.js Starter][]: Render Three.js on the client
22
23
24[react starter]: https://val.town/x/jxnblk/react-starter
25[react streaming starter]: https://val.town/x/jxnblk/react-streaming-starter
26[react spa starter]: https://val.town/x/jxnblk/react-spa-starter
27[remark starter]: https://www.val.town/x/jxnblk/remark-starter
28[remark frontmatter starter]: https://www.val.town/x/jxnblk/remark-frontmatter-starter
32[svg starter]: https://val.town/x/jxnblk/svg-starter
33[svg png starter]: https://www.val.town/x/jxnblk/svg-png-starter
34[preact starter]: https://val.town/x/jxnblk/preact-starter
35[preact client starter]: https://val.town/x/jxnblk/preact-client-starter
36[vue starter]: https://val.town/x/jxnblk/vue-starter
37[three.js starter]: https://val.town/x/jxnblk/threejs-starter
39[hono client starter]: https://val.town/x/jxnblk/hono-client-starter
40
41[react router starter]: https://val.town/x/jxnblk/react-router-starter
42
43<!--
44- README card image
45
46- [x] React Starter
47- [x] React Streaming Starter
48- [x] React SPA Starter
49- [x] Remark Starter
50- [x] Remark Frontmatter Starter
54- [x] Hono client components
55- [ ] Hono Routing
56- [x] Preact
57- [x] Preact w/ client hydration
58- [x] Vuejs Starter
59- [x] Three.js

react-router-starterREADME.md3 matches

@jxnblk•Updated 1 week ago

1# React Router Starter
2
3Minimal React Router starter example for Val Town
4
5[View demo][demo]
9The `http.tsx` file is the main server that responds with an HTML stream.
10The HTML includes a `<script type="module">` tag that loads the `client.tsx` file to hydrate the app
11with client-side routing provided by React Router's declarative mode.
12
13[demo]: https://jxnblk--82fd72a61fb411f0996a569c3dd06744.web.val.run

1/**
2 * @jsxImportSource https://esm.sh/react@18.2.0
3 */
4

1# React Hono Val Town Project Starter Template
2
3This is a starter template for a full-stack app in a Val Town Project. The app itself is a simple persistent message board.

1# Frontend
2
3This template is a classic client-side-only React app. 
4
5## `index.html`
9This HTML file imports `/frontend/style.css` from `/public/style.css` and `/frontend/favicon.svg` from `/frontend/favicon.svg`. Everything in `/frontend/` is mapped to `/public` by `/backend/index.ts`. This is just a convention. You could import & serve everything out of the same folder name.
10
11This HTML file has a `<div id="root"></div>`, which is where we mount the React app.
12
13This 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).)
14
15## `index.tsx`
16
17This 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>`.
18
19It also looks for *bootstrapped* JSON data at `window.__INITIAL_DATA`, and passes that only to the `<App />`.
25## `components/`
26
27This directory is where the React components are stored. They're pretty standard client-side React components.

12## Serving assets to the frontend
13
14This 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.
15
16In 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. 
26## CRUD API Routes
27
28This 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.
29
30## Errors

8## Migrations
9
10In `backend/database/migrations.ts`, this app creates a new SQLite table `reactHonoStarter_messages` to store messages. 
11
12This "migration" runs once on every app startup because it's imported in `index.ts`. You can comment this line out for a slight (30ms) performance improvement on cold starts. It's left in so that users who fork this project will have the migration run correctly.

1/** @jsxImportSource https://esm.sh/react@18.2.0 */
2import React, {
3  useState,
4  useEffect,
5  useCallback,
6  useMemo,
7} from "https://esm.sh/react@18.2.0";
8import { type Memory } from "../../shared/types.ts";
9
89  }, [fetchMemories]);
90
91  const handleAddMemory = async (e: React.FormEvent) => {
92    e.preventDefault();
93    if (!newMemoryText.trim()) return;
144  };
145
146  const handleUpdateMemory = async (e: React.FormEvent) => {
147    e.preventDefault();
148    if (!editingMemory || !editingMemory.text.trim()) return;

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/**
2 * @jsxImportSource https://esm.sh/react@18.2.0
3 */
4import { blob } from "https://esm.town/v/std/blob";