GitHub Copilot CLI ile React Projesi: Pratik Rehber

GitHub Copilot CLI’yi bir React projesinde copilot komutuyla başlattığınızda bileşen, hook, test ve state yönetimi değişikliklerini terminalden yönetebilirsiniz. Doğru proje talimatları ve küçük adımlı bir döngüyle ajan, refactor ve test odaklı geliştirmede ciddi zaman kazandırır; ancak görsel doğrulama ve mimari kararlar sizde kalmalıdır. Bu rehberde Vite, Vitest, React Testing Library ve Storybook varsayılanlarıyla çalışan pratik bir akış anlatıyorum.

React işleri için neden uygun

GitHub Copilot CLI, proje klasöründe çalıştığı için package.json, tsconfig.json, vite.config.ts ve mevcut bileşen ağacını görür. Salt sohbet arayüzüne göre en büyük farkı, birden çok dosyayı birlikte değiştirebilmesi ve komutları gerçek terminalde çalıştırabilmesidir. React tarafında useEffect bağımlılık dizisi, props tipi güncelleme veya bir bileşenin taşınması gibi işler tek komutla planlanır; ajan ilgili import, test ve story dosyalarını birlikte günceller. Ayrıca React Testing Library ve Vitest çıktılarını okuyup hatayı kendi denemesiyle düzeltmeye çalışır; bu, manuel test döngüsünü kısaltır. Yine de ajan, tarayıcıdaki gerçek render sonucunu kendiliğinden doğrulamaz; Storybook veya Playwright ile sizin kontrol etmeniz gerekir.

Proje kurulumu ve ajan talimatları

Ajanı serbest bırakmadan önce .github/copilot-instructions.md veya AGENTS.md dosyasına projeye özel beklentileri yazın. Bu dosya, her oturumda bağlam olarak okunur; komutlar, klasör düzeni, hook kuralları ve test beklentisi net olursa ajan daha az yanlış yapar. Aşağıdaki örnek, Vite + TypeScript + Vitest + React Testing Library + Storybook varsayılanlarına göre kısadır.

# .github/copilot-instructions.md

## Komutlar
- Kurulum: `npm install`
- Geliştirme: `npm run dev` (Vite)
- Test: `npm run test -- --run` (Vitest)
- Lint: `npm run lint`
- Storybook: `npm run storybook`

## Klasör kuralları
- Bileşenler `src/components/` altında; her bileşen kendi klasöründe: `Button/Button.tsx`, `Button/Button.test.tsx`, `Button/Button.stories.tsx`.
- Hook'lar `src/hooks/` altında; her hook ayrı dosyada ve adı `use` ile başlar.
- State yönetimi `src/store/` altında; yalnızca global durumlar burada.

## React kuralları
- Fonksiyon bileşeni kullan; class bileşeni önerme.
- Hook'ları en üstte çağır; koşul ve döngü içinde hook kullanma.
- `useEffect` bağımlılık dizisini eksiksiz yaz; gereksiz efekt açma.
- Props tiplerini `type` veya `interface` ile tanımla; `any` kullanma.
- UI metinlerini Türkçe tut; kullanıcıya görünen string'leri ayrı bir `tr.json` veya sabit dosyada toplama.

## Test beklentisi
- Yeni bileşen için en az bir React Testing Library testi yaz.
- Değişiklikten sonra `npm run test -- --run` çalıştır; kırmızı test bırakma.

Dosyayı kısa tutun; 100-150 satır yeterli. Talimatlarda ‘şunu yapma’ yerine ‘şunu yap’ cümleleri daha etkilidir. Aynı anda iki dosya varsa projenin hangi ajanla çalıştığını test edin; öncelik .github/copilot-instructions.md olabilir ancak ekibinizde net bir standart belirleyin. Bu dosyaları yazarken CLAUDE.md nasıl yazılır? AGENTS.md ve GEMINI.md rehberi içindeki yapı önerilerinden yararlanabilirsiniz.

Çalışma döngüsü ve React görev promptları

Ajanla çalışırken her turda şu düzeni izleyin: önce küçük bir plan isteyin, planı onaylayın, sonra değişikliği yaptırın, testleri çalıştırın ve diff’i inceleyin. Büyük refactor yerine tek sorumluluklu görevler verin. Aşağıdaki promptlar React projelerinde sık işe yarar:

• “UserCard bileşenindeki avatar prop’unu opsiyonel yap; avatar yoksa kullanıcı adının ilk harfini gösteren bir AvatarFallback ekle. Sadece ilgili bileşeni ve testini güncelle.”
• “Vitest’i çalıştır ve başarısız testleri listele. İlk başarısız testin nedenini bul, sadece o testin geçmesi için gerekli kodu değiştir; diğer dosyalara dokunma.”
• “useFetchUsers hook’unu AbortController ile iptal edilebilir yap. useEffect bağımlılık dizisini ve cleanup fonksiyonunu kontrol et, testini güncelle.”
• “Storybook’ta Button için primary, secondary, disabled varyantlarını ekle; Button.stories.tsx dosyasını güncelle, yeni bileşen dosyası açma.”
• “src/components altındaki tüm any tiplerini bul; her biri için doğru tipi öner, testleri bozmadan uygula.”

Her istemde kapsamı daraltın; ‘tüm projeyi refactor et’ gibi istekler yerine tek bileşen veya tek hook seçin. Ajan bir turda fazla dosyayı değiştirirse turu geri alıp daha küçük isteyin.

Hangi React görevlerinde iyi, nerelerde dikkatli olmalı

Ajan bazı React işlerinde oldukça güvenilirdir; bazılarında ise mimari kararları size bırakmalıdır.

Özellikle useMemo/useCallback ekleme konusunda ajan gereksiz optimizasyon yapabilir; önce profilleme verisi isteyin. Görsel değişikliklerde tarayıcı doğrulaması şarttır.

Test ve doğrulama

React projesinde ajanın çıktısını kabul etmeden önce üç katman doğrulaması yapın: tip kontrolü, testler ve görsel kontrol. tsc --noEmit, npm run lint ve npm run test -- --run komutlarını ajanın kendisine çalıştırtın; ancak çıktıyı siz yorumlayın. React Testing Library testlerinde ‘getByRole’ ve kullanıcı etkileşimi odaklı senaryolar isteyin; sadece snapshot testleri yeterli değildir. Storybook doğrulaması için ajanın dosyayı güncellemesi yetmez; Storybook’u açıp varyantlara bakın. Kod haritası çıkarırken Yapay zeka ajanları için kod haritası: grep’siz arama yöntemleriyle ajanın nereyi değiştireceğini önceden netleştirebilirsiniz.

Birden fazla ajanı AgentVera ile çalıştırmak

Birden fazla ajanı aynı React projesinde çalıştıracaksanız AgentVera, GitHub Copilot CLI dahil gerçek CLI araçlarını yan yana çalıştırır. React işinde en çok işe yarayan özellikler: her ajanın kendi git worktree’sinde paralel çalışarak dosyaları ezmemesi, bir ajan turu bitince ikinci modelin kod incelemesi yapıp file:line ile bulgu vermesi ve her turun kontrol noktasıyla tek tık geri alınabilmesi. Token bütçeleri de ajanın uzun refactor sırasında kontrolden çıkmasını engeller; böylece bileşen ve hook değişikliklerini güvenle paralel yürütebilirsiniz.

Sonuç

GitHub Copilot CLI, React projesinde net talimatlar, küçük plan ve test döngüsüyle çalıştığında refactor ve test işlerini terminalde hızlandırır. Önemli olan ajanı serbest bırakmak değil; bileşen sınırları, hook kuralları ve test beklentisini dosyaya yazmaktır. Her turda diff’i inceleyin; görsel sonuçları Storybook veya tarayıcıda doğrulayın. Böylece ajan günlük geliştirme hızınızı artıran bir yardımcı olur, mimari kararları devretmezsiniz.