---
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)