GitHub Copilot CLI can handle most day-to-day React work directly from your terminal. You start it with copilot in the project folder, describe the change, and let it propose edits, run commands, and iterate with you. This guide shows how to make that loop reliable for a Vite + React codebase with TypeScript, Vitest, React Testing Library, and Storybook. For CLI mechanics outside React, see GitHub Copilot CLI.
Why GitHub Copilot CLI fits React development
GitHub Copilot CLI suits React work because React changes are usually local and testable. The agent can read a component, its hook, its test, and its Storybook story together, then propose a coherent diff instead of editing files in isolation. Because it runs in your terminal, it reuses the same npm scripts, TypeScript compiler, and test runner you already use, so verification is not a separate AI-specific step. It also respects project instructions, which means you can encode React-specific rules such as no direct state mutation, co-located tests, and explicit props and have them applied consistently across many turns. When a task involves several files, the agent can update the component, its story, and its tests in one pass, but only if the project structure tells it where those files live. This is not a generic chatbot; it reads files and runs commands, so it can close the loop from JSX to a test failure.
Set up project instructions for React
Put project rules in .github/copilot-instructions.md at the repo root. If both that file and AGENTS.md exist, keep one as the source of truth for React conventions and point the other to it. The agent reads this automatically, so include the exact commands, folder conventions, and rules that prevent common React regressions. A copy-pasteable example for a Vite app is below.
# React project instructions
## Commands
- Install: npm install
- Build: npm run build
- Test: npm run test -- --run
- Lint: npm run lint
- Typecheck: npx tsc --noEmit
- Storybook: npm run storybook
## Conventions
- Source: src/
- Components: src/components/ComponentName/ with index.tsx, ComponentName.tsx, ComponentName.test.tsx, ComponentName.stories.tsx
- Hooks: src/hooks/useName.ts with tests colocated
- State: use React context + useReducer; do not add Redux unless asked
- Tests: React Testing Library, user-event, accessible queries first
- No snapshots for UI; use explicit assertions
## React rules
- Never mutate state or props
- Keep effects minimal, include correct dependency arrays
- Prefer composition over prop drilling
- Do not introduce new dependencies without asking
- Keep components focused; extract subcomponents when a component exceeds about 200 linesDo not fill this file with generic React advice; keep it specific to this repository. The commands block is the most important part because Copilot CLI uses it to decide whether a change is done. Keep the file short enough to stay in context: ten to twenty lines is often enough. If the agent frequently needs to find related code, a lightweight codebase map can help (Codebase map for AI agents: find code without grep).
A repeatable prompt-and-test loop
Start each task with a one-line objective, not a wall of context. Ask the agent to read the relevant files first, then propose a plan before editing if the task spans more than two files. Keep changes small and run the verification commands after each turn. Review the diff with git diff before saying yes; the agent can generate code that looks plausible but still misses a React-specific issue. If you need a wider view of the CLI workflow, see How to use GitHub Copilot CLI: a step-by-step guide.
Example prompts for typical React tasks:
- Add a useDebouncedValue hook in src/hooks with TypeScript, tests, and a Storybook story. Follow the existing test patterns from useLocalStorage.
- In DashboardPage, extract the recent activity list into a RecentActivityList component without changing behavior. Keep props explicit and move the related tests.
- Fix the stale closure in usePolling: the setInterval callback still reads the old value. Use a ref or a functional state update and add a regression test.
- Refactor CartContext reducer to split add, remove, and update actions into separate case handlers and add unit tests for each action.
- Run the full test suite and typecheck, then fix only the failures caused by my last change. Show the commands you run and their output.
What Copilot CLI handles well in React, and where to double-check
Copilot CLI is strongest on mechanical, repeatable React changes: extracting components, converting prop drilling to context, adding hooks, writing stories, and expanding test coverage. It can also follow an existing state pattern, such as useReducer, better than it invents one from scratch.
| Task | Copilot CLI does well | Watch closely |
|---|---|---|
| Extracting a component | Moves JSX, props, and co-located tests | It can miss Context usage or import aliases |
| Converting useState to useReducer | Groups actions and dispatch calls | It may leave unused state slices or wrong initial state |
| Writing React Testing Library tests | Follows existing query patterns | Async updates, waitFor, and user-event vs fireEvent |
| Adding a hook | Creates typed hook and tests | Effect dependencies and cleanup |
Watch it closely around effect dependencies, async state updates after unmount, and synthetic events. It may add an effect where derived state would do, or add useMemo and useCallback prematurely. Review every effect and every subscription; React Strict Mode in development can expose cleanup problems that the agent may not test. Avoid letting it refactor large components in one step; the result often keeps stale props or breaks Context consumers. Also double-check list keys when it generates lists and event handlers that could close over the wrong render.
Testing components, hooks, and state changes
Tell the agent up front that a task is done only when npm run test -- --run and npx tsc --noEmit pass, plus npm run lint if you use it. For UI behavior that tests cannot catch, ask it to start Storybook or pair the change with a browser check; AI agent browser testing: let the agent check your app shows how to catch visual and interaction regressions. Do not accept a claim like tests pass unless the agent shows the command output. Prefer React Testing Library queries that mirror user behavior, and ask the agent to use user-event over fireEvent. When a test is flaky or too implementation-specific, have the agent rewrite it to assert on rendered output and user-visible state. For custom hooks, require the agent to test through a small test component or use renderHook from the testing library, so the hook is exercised under real React lifecycle rules.
Running multiple agents with AgentVera on a React codebase
For teams running GitHub Copilot CLI on a React codebase, AgentVera helps when several agents work at once. You can run agents in parallel, each in its own git worktree, so one component refactor does not overwrite another. Automatic code review catches React-specific mistakes like missing effect dependencies or stale tests and links findings to file:line. Checkpoints let you undo a bad state refactor or hook extraction in one click and replay the session. Token budgets stop runaway agent turns before they consume your quota.
Closing thoughts
With clear React-specific instructions and a small-step loop, GitHub Copilot CLI becomes a useful terminal pair programmer for React work. Keep it close to tests, typechecking, and diffs, and treat every suggestion as a proposed change rather than a finished patch.