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.
83 lines
2.2 KiB
Markdown
83 lines
2.2 KiB
Markdown
---
|
|
type: reference
|
|
title: React
|
|
description: Current best practices for React - Vite vs Next.js, component patterns, and testing.
|
|
tags:
|
|
- react
|
|
- nextjs
|
|
- frontend
|
|
- bootstrap
|
|
- engineering
|
|
timestamp: 2026-08-11
|
|
verified: 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:
|
|
|
|
```bash
|
|
npm create vite@latest my-app -- --template react-ts
|
|
```
|
|
|
|
Scaffold a Next.js project:
|
|
|
|
```bash
|
|
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 `_components` for 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.
|
|
|
|
## Citations
|
|
|
|
* [React](https://react.dev/)
|
|
* [Next.js project structure](https://nextjs.org/docs/app/getting-started/project-structure)
|
|
* [Biome](https://biomejs.dev/)
|
|
* [Vitest](https://vitest.dev/)
|
|
|
|
## See Also
|
|
|
|
* [Node.js and JavaScript](node-js.md)
|
|
* [Agent Instruction Files](../agents-files.md)
|