Skip to content

Chat sample: React + Vite frontend #95

@pathosDev

Description

@pathosDev

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions