Frank
02883d3ed2
Copy of the legacy ~/.pi/agent/docs tree rebuilt as the command-center knowledge base: concept files promoted to path identity, index listings stripped of frontmatter, all wikilinks/relative links resolved, every checkable claim verified against the live fleet (Dankserver = Ryzen 7 7700X + RTX 3090; Strix Halo is Dankclaw), unverifiable claims tagged. kb-lint exits 0.
2.2 KiB
2.2 KiB
type, title, description, tags, timestamp, verified
| type | title | description | tags | timestamp | verified | |||||
|---|---|---|---|---|---|---|---|---|---|---|
| reference | React | Current best practices for React - Vite vs Next.js, component patterns, and testing. |
|
2026-08-11 | 2026-08-28 |
CUT
React
This page covers current (2025/2026) best practices for React projects.
Framework Choice
Create React App is deprecated. Use Vite or Next.js for new projects.
- Use Vite + React for a single-page application with a separate API.
- Use Next.js for a full-stack application with server-side rendering.
Next.js uses the App Router with React Server Components by default. Components render on the server unless you mark them with "use client".
Bootstrap
Scaffold a Vite project:
npm create vite@latest my-app -- --template react-ts
Scaffold a Next.js project:
npx create-next-app@latest my-app --yes
Tooling
| Category | Tool | Notes |
|---|---|---|
| CSS | Tailwind CSS | Default in create-next-app. |
| State | Zustand and TanStack Query | Zustand for client state. TanStack Query for server state. |
| Testing | Vitest and Testing Library | Unit and integration tests. |
| End-to-end | Playwright or Cypress | For user journeys. |
| Lint and format | Biome or ESLint | Use Biome for one fast tool. |
Component Patterns
- Keep components, hooks, and types near the routes that use them.
- Use route groups for organization without changing the URL.
- Use
_componentsfor code that must not become a route. - Use React Server Components to reduce client-side state.
Notable 2025/2026 Changes
- React 19 is stable with Actions and new hooks.
- Next.js 16 uses Turbopack as the default bundler.
- Next.js no longer runs the linter as part of
next build.
Related Technologies
- Remix, Redwood, Gatsby, and Astro as other meta-frameworks.
- Playwright for end-to-end testing.
- Vercel Edge Functions and Cloudflare Workers for serverless.