1declare module 'react-dom' {
2 export interface Root {
3 render(element: ReactElement): void;
4 unmount(): void;
5 }
15}
16
17declare module 'react-dom/client' {
18 export const createRoot: typeof createRoot;
19 export const hydrateRoot: typeof createRoot;
7 "types": [
8 "https://www.val.town/types/valtown.d.ts",
9 "https://www.val.town/v/willscriv/WS-Chess/src/types/react.d.ts",
10 "https://www.val.town/v/willscriv/WS-Chess/src/types/global.d.ts",
11 "https://www.val.town/v/willscriv/WS-Chess/src/types/types.d.ts",
12 "https://www.val.town/v/willscriv/WS-Chess/src/types/jsx-runtime.d.ts",
13 "https://www.val.town/v/willscriv/WS-Chess/src/types/react-dom.d.ts"
14 ],
15 "lib": [
20 "deno.unstable"
21 ],
22 "jsx": "react-jsx",
23 "jsxImportSource": "react"
24 },
25 "importMap": {
26 "imports": {
27 "react": "https://esm.sh/react@18.2.0",
28 "react-dom": "https://esm.sh/react-dom@18.2.0",
29 "react-dom/client": "https://esm.sh/react-dom@18.2.0/client"
30 }
31 },
1declare module 'react/jsx-runtime' {
2 export function jsx(
3 type: string | ComponentClass<any>,
4 props: any,
5 key?: string
6 ): ReactElement;
7
8 export function jsxs(
10 props: any,
11 key?: string
12 ): ReactElement;
13
14 export const Fragment: ComponentClass<{ children?: ReactNode }>;
15}
16
1import React, { useState } from 'react';
2import { Piece, Square } from '../types/chess';
3import '../components/ChessBoard.css';
1import React from 'react';
2import { ChessBoard } from './components/ChessBoard';
3import './App.css';
1/// <reference types="react" />
2/// <reference types="react-dom" />
3
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
