Followup from the chat sample (`examples/chat/`). Add a React + Vite SPA
frontend alongside the plain HTML and Lit frontends.
Scaffolding plan
```bash
cd examples/chat
npm create vite@latest frontend-react -- --template react-ts
cd frontend-react
npm install
npm run build -- --outDir ../static/react
```
Components
- `` — controlled form, posts to `useAuth()`.
- `` — three-column CSS-Grid layout.
- ``, ``, ``.
- `useWebSocket()` — custom hook owning the `WebSocket`,
buffers messages until React state is ready.
State
- `useReducer` for multi-room state (`messagesByRoom`,
`usersByRoom`, `unreadByRoom`).
- `useEffect` for the WebSocket lifecycle.
Versions / requirements
- React >= 19 (latest Major), no React Compiler required.
- Vite latest (defaults are fine).
Shared types
Relative import from `examples/chat/shared/protocol.ts`; Vite resolves
parent imports out of the box.
Stub `frontend-react/README.md` already in the repo.
Followup from the chat sample (`examples/chat/`). Add a React + Vite SPA
frontend alongside the plain HTML and Lit frontends.
Scaffolding plan
```bash
cd examples/chat
npm create vite@latest frontend-react -- --template react-ts
cd frontend-react
npm install
npm run build -- --outDir ../static/react
```
Components
buffers messages until React state is ready.
State
`usersByRoom`, `unreadByRoom`).
Versions / requirements
Shared types
Relative import from `examples/chat/shared/protocol.ts`; Vite resolves
parent imports out of the box.
Stub `frontend-react/README.md` already in the repo.