# Claude Code React: Practical Workflow for React Developers

URL: https://agentvera.dev/en/blog/claude-code-for-react/ · Published: 2026-11-01

Use Claude Code on React projects: set up CLAUDE.md, plan changes, run tests and review diffs. A hands-on guide for Vite, hooks, Testing Library and Storybook.

**In short:**

- Claude Code works best on React when CLAUDE.md defines commands, component rules, and test conventions up front.
- A tight loop of plan, small diff, run tests, review catches most React-specific mistakes before they reach your branch.
- Use multiple agents in git worktrees with AgentVera only after you have a clean shared setup and automated checks.

Claude Code works well on React projects when you treat it as a pair programmer that needs explicit project context. Start `claude` in the repository root, keep a focused CLAUDE.md, and drive changes through small, testable diffs. This guide covers setup, prompts, pitfalls, and verification for Vite-based React codebases.

## Why React codebases are a good fit for Claude Code

Claude Code is most useful for React work that spans several files in a predictable way: extracting a custom hook, updating props across a component subtree, adding tests to an existing suite, or converting a form from local state to a server-state library. It reads your existing components, hooks, and tests, and can match the conventions you write down. Because React logic is often split across JSX, hooks, tests, and stories, an agent that can edit all of those at once reduces the chance of leaving one file stale.

The value is not in generating a single component from a blank screen. It is in keeping existing patterns consistent: renaming a prop across twelve call sites, adding error and loading states to every screen that uses a query, or applying a lint rule fix without reformatting the entire file. [Claude Code best practices: a practical checklist](/en/blog/claude-code-best-practices/) covers the general discipline; the React-specific parts are below.

## Preparing a React project: CLAUDE.md that keeps the agent on track

The single highest-leverage file is CLAUDE.md at the project root. Keep it short enough that the agent reads it on every session, and update it when a convention changes. For a React project, include the exact commands the agent should run for verification, the folder layout, and rules that prevent common React mistakes.

Here is a realistic example for a Vite + TypeScript + Vitest + React Testing Library + Storybook project:

```markdown
# CLAUDE.md

## Commands
- Install: npm ci
- Run dev: npm run dev
- Build: npm run build
- Lint: npm run lint
- Test: npm run test -- --run
- Storybook: npm run storybook

## Conventions
- Components live in src/components/<Name>/ with index.tsx, <Name>.test.tsx, <Name>.stories.tsx, and styles.
- Hooks live in src/hooks/ with a co-located test file.
- Use function components and hooks only. No default exports for components unless lazy loading requires it.
- State libraries: use TanStack Query for server state, local React state for UI; do not add Redux.
- Tests use React Testing Library with user-event; query by role or label, not test IDs unless necessary.
- Never change a component's public props without updating its story and test.

## Rules
- Keep one logical change per turn.
- Run the test command after code changes and report failures with the exact output.
- Do not use useEffect for derived state; compute it during render.
- Preserve existing import order and formatting unless asked.
- If you remove a dependency of a hook, update its dependency array explicitly.
```

After you add this file, run `claude` in the same repository and ask it to read the file before the first task. The agent uses CLAUDE.md automatically in later turns, but the initial read confirms it has parsed the commands. If you need a broader orientation, see [How to use Claude Code: a beginner’s guide](/en/blog/how-to-use-claude-code/).

## The daily loop: plan, edit, test, review

The loop that avoids most React-specific breakage is: plan, small step, run tests, review the diff. For anything larger than a prop rename, start with a short plan. [Claude Code plan mode: plan first, then let it build](/en/blog/claude-code-plan-mode/) is especially useful for React because prop changes and hook extraction can ripple into tests and stories before the agent writes code.

Then make the change in one logical step. Require the agent to run `npm run test -- --run` and `npm run lint` after the edit, and to paste the output. Finally, read the diff yourself, focusing on dependency arrays, hook call order, and any public prop changes. If something looks off, ask for a follow-up rather than accepting a large correction.

Example prompts for typical React tasks:

- 'Convert `UserCard` to use the `useUser` hook and keep its props unchanged. Add a test for the loading state.'
- 'Replace the local `useState` for fetched posts with TanStack Query. Update `PostList` and its test; remove the old effect.'
- 'Add an accessible error message to the login form. Use `role=alert`, update the existing test, and run lint and tests.'
- 'Extract the duplicated table filtering logic from `OrdersTable` and `CustomersTable` into `useFilteredRows`. Keep existing behavior and stories.'
- 'Run the full test suite and fix only the failures introduced by the previous change; do not reformat unrelated files.'

## Where the agent shines and where to double-check React specifics

Here are the tasks I rely on it for most, and the one thing to check before accepting a diff.

| Task | Good prompt | Watch closely |
| --- | --- | --- |
| Extracting a hook | Extract the duplicated effect from `Dashboard` and `Settings` into `usePolling`. Keep all call sites behavior identical. | It may change polling interval or cleanup timing; review effect cleanup and dependency arrays. |
| Adding tests | Add tests for `SortableList` keyboard interactions using Testing Library and user-event. Follow existing test setup in `src/test/setup.ts`. | It may assert on implementation details or use test IDs instead of roles; correct queries. |
| Converting to TanStack Query | Replace fetch + useState in `ProductList` with useQuery. Show loading and error states. Update tests. | It can drop error handling or stale-while-revalidate behavior; verify loading and cached data. |
| Storybook stories | Add a story for `Button` with loading and disabled states using CSF 3. Follow existing args pattern. | It may import wrong types or omit controls; run Storybook and check props table. |

React-specific pitfalls to watch closely: stale closures from incorrectly memoized callbacks, effects that run more often than intended because dependencies are missing or unnecessary, derived state stored in `useState` plus an effect to sync, and tests that pass by asserting on implementation details rather than rendered output. When the agent edits a component, check that it did not silently change a prop type, remove a key, or move a hook call inside a conditional block.

## Verifying React changes: tests, lint, and the diff

Do not accept 'tests pass' without output. Ask the agent to run `npm run test -- --run` and paste the final lines, including the number of tests and any `act` warnings. React Testing Library often surfaces `act` warnings that indicate a state update outside React’s expected flow; those are real bugs, not noise. Also run `npm run lint` to catch hook dependency violations, and `npm run build` to catch TypeScript errors that tests may not cover.

For component changes, have the agent run Storybook if it exists. A story that builds does not guarantee the visual output is correct, but it catches missing imports, bad arg types, and obvious prop mismatch. If the project has no Storybook, ask it to write or update the component test so every public prop is exercised at least once.

Finally, review `git diff` yourself. Look for changes outside the files you asked for, removed comments that explain tricky hook logic, or reformatting that buries the actual edit. If you use a second agent for code review, point it at the exact diff and the CLAUDE.md rules.

## Parallel agents with AgentVera on one React repo

For React work, the AgentVera features that matter most are parallel agents in separate git worktrees, automatic code review, and checkpoints. Worktrees let one agent refactor a hook while another adds stories without overwriting files. Because React changes ripple through props, hooks, and tests, the second-model review with file:line links catches stale closures or missing cleanup before merge. Checkpoints make risky refactors safe: undo any turn and replay the session. For coordinating several agents, see [How to run multiple Claude Code agents in parallel](/en/blog/run-multiple-claude-code-agents/).

## Conclusion

Claude Code earns its place in a React workflow when the project instructions are explicit, the changes stay small, and every edit is verified with tests, lint, and a build. Use it for hook extraction, test coverage, state-library migrations, and component updates. Review the diff around hooks and prop boundaries, and if you parallelize work across agents, keep worktrees and code review in place.

## Frequently asked questions

**Can I use Claude Code with my existing React project?** Yes. Run claude in the project root and it reads package.json and CLAUDE.md. It works with Vite, Vitest, React Testing Library, Storybook, and common state libraries without changing your setup.

**What should I put in CLAUDE.md for a React project?** Keep it short: exact build, test, lint, and Storybook commands; folder conventions for components, hooks, and tests; and React-specific rules such as no useEffect for derived state, preserve props, and use role-based testing queries.

**How do I keep Claude Code from breaking my React components?** Ask for one logical change per turn, require tests and lint after each change, and review the diff around hooks, dependency arrays, and prop changes. Use plan mode for larger refactors so you can approve the approach before edits.

**Can Claude Code write React tests and Storybook stories?** Yes. Point it to existing test and story files so it follows the project’s patterns. Have it run the test suite and Storybook build to catch missing imports, wrong types, or query mistakes before you merge.

---

**About AgentVera.** AgentVera is a desktop app for macOS, Windows and Linux, built by Solviera Teknoloji. It runs 18 AI coding agents (Claude Code, Codex, Gemini CLI, Copilot, Cursor, Antigravity, opencode, Hermes, Qwen Code, Kimi Code, Kiro, Amp, Droid, Goose, Vibe, Crush, Aider, Cline) side by side, per project, in real terminals with the user's own CLI installs and logins. The free plan has unlimited agents. Download: https://agentvera.dev/en/download/ · Pricing: https://agentvera.dev/en/pricing/