Source: https://seerepo.com/docs/react-vite
Markdown source: https://seerepo.com/docs/react-vite.md
Description: What SeeRepo reads in a React app built with Vite: its entry and the screens of its router.

# SeeRepo with React and Vite

SeeRepo recognizes a React app built with Vite when its `package.json` has `vite` and `react` and doesn't have `next`.

## What SeeRepo reads

- The entry file (`main` or `index`) is a **door**: where your app starts.
- **Screens** come from your router: React Router's `createBrowserRouter`, `useRoutes`, `<Route>` and `lazy` routes, or TanStack Router's `createFileRoute`.
- Your components are **pieces**, and they live inside the screen that uses them.
- A screen that doesn't require a session is for **Visitors**.

## An example from our test bank

Two React + Vite admin panels, read at a fixed commit:

- `nezhahq/admin-frontend` routes with `createBrowserRouter`: **9 screens**, 80 pieces and 46 inner pieces, 135 product files.
- `satnaing/shadcn-admin` routes with TanStack Router: **30 screens**, 160 pieces and 17 inner pieces, 207 product files.

In both, every screen is reachable without a session in the code SeeRepo reads, so all of them show as screens for visitors.

## Good to know

- A Vite app usually talks to a backend that lives elsewhere. If that backend is in the same repo (Express, FastAPI…), SeeRepo reads it with its own framework. In our bank, `fastapi/full-stack-fastapi-template` shows its React + Vite frontend in `frontend/` and its 2 data models (Item, User) from the Python backend.
- Vue, Nuxt, SvelteKit, Remix and Angular are read with their own frameworks.