# GitHub Copilot CLI en proyectos React: guía práctica

URL: https://agentvera.dev/es/blog/copilot-cli-para-react/ · Publicado: 2026-11-01

Aprende a configurar y usar GitHub Copilot CLI en un proyecto React con Vite: instrucciones, prompts, testing con Vitest y verificación de cambios.

**En resumen:**

- Configura .github/copilot-instructions.md con comandos, carpetas y reglas de React para que el agente trabaje sin fricción.
- Usa prompts pequeños centrados en componentes, hooks y pruebas; revisa siempre el diff antes de aceptar.
- Verifica con Vitest, lint y build; el agente acelera tareas mecánicas, pero el criterio de React sigue siendo tuyo.

GitHub Copilot CLI es útil en proyectos React cuando le das contexto claro: abre la terminal en la raíz del repo, ejecuta `copilot` y pide cambios acotados. Con un archivo de instrucciones y prompts pequeños, acelera componentes, hooks y pruebas sin convertir el código en una caja negra. Si necesitas la referencia del comando, consulta [GitHub Copilot CLI](/es/agents/copilot-cli/).

## Por qué GitHub Copilot CLI encaja en proyectos React

Un proyecto React tiene convenciones fuertes: componentes, props, hooks, árbol de imports y tests. Copilot CLI puede leer varios archivos a la vez, seguir la traza de un componente y lanzar comandos como `npx vitest run` o `npm run lint`. Eso lo hace útil para tareas que requieren contexto disperso: mover lógica a un hook, actualizar todos los usos de un componente o corregir tests tras un cambio de API.

No es un generador de pantallas: funciona mejor cuando el repo ya tiene una estructura clara y le pides una responsabilidad por prompt. En React, eso significa pedir un componente, un hook o una corrección de tests, y validar con el runner. Si usas Zustand, Redux Toolkit o Context, indícalo en las instrucciones para que no mezcle patrones de estado.

## Configurar el proyecto para el agente

GitHub Copilot CLI lee las instrucciones del proyecto desde `.github/copilot-instructions.md` o `AGENTS.md`. En React no basta con decir que use React: define comandos, carpetas y reglas que eviten ambigüedad. Un archivo corto es mejor que un documento largo; lo importante es que responda qué ejecutar y qué convenciones respetar.

Un ejemplo realista:

```
# Instrucciones para agentes en este repo React

Proyecto: panel React con Vite y TypeScript.

Comandos:
- Instalar: npm ci
- Dev: npm run dev
- Test: npx vitest run
- Lint: npm run lint
- Build: npm run build
- Storybook: npm run storybook

Carpetas:
- src/components: componentes reutilizables
- src/hooks: hooks propios
- src/features: lógica por dominio
- src/test: utilidades de prueba

Reglas específicas de React:
- Usa componentes funcionales y hooks; evita clases salvo justificación.
- No derives estado con useEffect si puedes calcularlo durante el render.
- Mantén el fetching en hooks, no en el cuerpo del componente.
- Si cambias un componente, revisa sus tests con Vitest y React Testing Library.
- Prioriza consultas accesibles (getByRole, getByLabelText) sobre getByTestId.
- No añadas dependencias sin confirmar con package.json.
```

Si el proyecto crece, conviene mantener un [mapa de código para agentes de IA](/es/blog/codebase-map-for-ai-agents/) que reduzca búsquedas ciegas.

## Ciclo de trabajo con el agente

El flujo que mejor funciona en React es: planifica, da un paso pequeño, ejecuta las pruebas y revisa el diff. No pidas modernizar la app; pide extraer el estado del formulario a un hook y actualizar los tests. Antes de aceptar, mira `git diff` y verifica que no cambie props públicas ni añada dependencias sin motivo. Si el agente propone un cambio grande, pídele que lo divida en pasos.

Prompts de ejemplo:

- Crea el componente `EmptyState` en `src/components/` con tipos, story de Storybook y test de Vitest.
- Extrae la lógica de `useUsers` de `UserList` a `src/hooks/useUsers.ts` sin cambiar el comportamiento; ejecuta los tests.
- Añade estados `loading`, `error` y `data` a `useProducts` y actualiza el test para simular fetch fallido y exitoso.
- Refactoriza `CheckoutForm` para usar `useReducer` y mueve las validaciones a funciones puras; ejecuta lint y tests.
- Analiza por qué falla `ProductCard.test.tsx` tras el cambio de props y propón la corrección mínima.

Para tareas más grandes, una especificación breve antes de abrir el agente reduce iteraciones; aquí tienes una guía de [desarrollo guiado por especificaciones con agentes de IA](/es/blog/spec-driven-development-with-ai/).

## Tareas típicas y puntos donde vigilar

Copilot CLI maneja bien tareas mecánicas de React: crear componentes pequeños con tipos y tests, extraer hooks, migrar estado local a `useReducer` o Context, actualizar pruebas tras un cambio de props, corregir errores de TypeScript y añadir atributos de accesibilidad.

Donde hay que vigilar de cerca:

- Efectos: puede introducir `useEffect` innecesario o con dependencias mal calculadas; revisa que no haya suscripciones duplicadas ni llamadas en bucle.
- Memorización: a veces envuelve todo con `useMemo` o `useCallback` sin ganancia real; acepta solo si hay evidencia de rendimiento.
- API pública: un refactor puede cambiar el contrato de un componente sin actualizar todos los consumidores; revisa el diff global, no solo el archivo tocado.
- Tests: puede generar pruebas que comprueban estado interno en lugar del comportamiento renderizado; pide consultas accesibles y aserciones de usuario.
- Estado: si usas una librería de estado, confirma que el agente respete el patrón existente en lugar de añadir Context o props por su cuenta.

## Pruebas y verificación para React

Pide al agente que ejecute las pruebas después de cada cambio y no asumas que ya lo hizo. En React, la verificación mínima es `npx vitest run`, `npm run lint` y `npm run build`. Si usas React Testing Library, indícale que use `testing-library/jest-dom` y simulaciones reales de fetch. Para flujos con navegador, combina Copilot CLI con Playwright; esta guía cubre [pruebas en navegador con agentes de IA y Playwright](/es/blog/ai-agent-browser-testing/).

| Comando | Qué confirma |
| --- | --- |
| `npx vitest run` | Hooks y componentes renderizados según su contrato |
| `npm run lint` | Reglas de hooks y estilo; evita efectos defectuosos |
| `npm run build` | TypeScript y empaquetado de producción |
| `git diff --check` | Espacios y conflictos triviales antes de commit |

Después revisa que no queden tests con `skip` o `only`, y que las esperas asíncronas usen `find*` en lugar de `waitFor` innecesario. Un diff limpio con tests verdes es la señal mínima para aceptar.

## Varios agentes en un proyecto React con AgentVera

Si quieres lanzar varios agentes sobre el mismo repo React, AgentVera los ejecuta en terminales reales y permite que cada uno trabaje en su propio git worktree. Así uno puede refactorizar componentes mientras otro corrige tests sin pisar archivos. Al acabar un turno, un segundo modelo revisa el código y enlaza los hallazgos a file:line, útil para detectar regresiones en props o hooks. Los checkpoints guardan cada turno y permiten deshacerlo o reproducirlo paso a paso; los presupuestos de tokens frenan al agente sin perder la conversación.

## Conclusión

GitHub Copilot CLI no sustituye el criterio de React; el valor está en tareas acotadas con verificación inmediata. Define instrucciones, trabaja en pasos pequeños, ejecuta pruebas y revisa el diff. Con ese hábito, el agente reduce el trabajo mecánico sin convertirse en una caja negra.

## Preguntas frecuentes

**¿Cómo uso GitHub Copilot CLI en un proyecto React?** Abre la terminal en la raíz del proyecto y ejecuta copilot. Antes de pedir cambios, define .github/copilot-instructions.md con comandos como npm run test, npm run lint y la estructura de carpetas. Luego pide tareas concretas: crear un hook, refactorizar un componente o añadir pruebas.

**¿Qué instrucciones debe tener .github/copilot-instructions.md para React?** Incluye comandos de build, test y lint, convenciones de carpetas y reglas específicas como preferir componentes funcionales, evitar useEffect para estado derivado y usar consultas accesibles en tests. También indica la librería de estado si usas Redux, Zustand o Context.

**¿Puede GitHub Copilot CLI generar tests para componentes React?** Sí. Suele funcionar bien con Vitest y React Testing Library si le describes el comportamiento esperado. Pídele que use getByRole o getByLabelText y que compruebe interacciones; revisa que los tests no verifiquen detalles internos.

**¿Cómo evito que Copilot CLI rompa mi proyecto React?** Trabaja en una rama, da pasos pequeños y ejecuta tests, lint y build después de cada cambio. Revisa el diff para detectar cambios de API pública, efectos innecesarios o dependencias nuevas. Si usas varios agentes, aíslalos con git worktrees.

---

**Sobre AgentVera.** AgentVera es una app de escritorio para macOS, Windows y Linux, desarrollada por Solviera Teknoloji. Ejecuta 18 agentes de programación con IA (Claude Code, Codex, Gemini CLI, Copilot, Cursor, Antigravity, opencode, Hermes, Qwen Code, Kimi Code, Kiro, Amp, Droid, Goose, Vibe, Crush, Aider, Cline) en paralelo, por proyecto, en terminales reales con las instalaciones y sesiones de CLI del propio usuario. El plan gratuito tiene agentes ilimitados. Descargar: https://agentvera.dev/es/download/ · Precios: https://agentvera.dev/es/pricing/