React için Cursor Kuralları: AI Destekli React Geliştirmeye Yönelik Kapsamlı Kılavuz

Cursor ile React Geliştirme için Kurallar: AI Destekli React Geliştirmeye Yönelik Tam Kılavuz

React, "o render eder" ifadesinin en uzun yalanı gizlediği çerçevedir. Bileşen monte edilir, ekran düzgün görünür ve derleme hattında size ebeveynin her tuş vuruşunda tüm ağacı yeniden render ettiği, bir useEffect'in geliştirme ortamında iki kez fetch yaptığı ve bunu bir bağımlılığı kaldırarak "düzeltmiş" olduğunuz ya da bir yaprağın bayrak okuyabilmesi için ulaştığınız bağlamın her token yenilendiğinde kırk kardeşi yeniden render ettiği söylenmez. Uygulama çalışır. Altı ay sonraki bir profiler izi, ağacınızın yarısının URL değiştiğinde her seferinde monte olduğunu ve üç "memoize edilmiş" geri çağrının her render'da referans değiştirdiğini ortaya çıkarır. Ardından bir AI asistanı ekliyorsunuz. Cursor ve Claude Code, bir gezegen kadar React kodu üzerinde eğitildi. Bunun çoğu sınıf bileşenleri, yarısı hook'ların öncesinden ve modern kısmının yarısı da performans için her geri çağrının useCallback ile sarıldığı blog yazılarından öğrenmiş durumda. Ölçüm yapılmadan. "Bir kullanıcı yükleyen ve düzenlemenize izin veren bir form" isteyin, karşınıza beş useState'li, AbortController olmayan bir useEffect'li, any olarak yazılmış prop'ları olan, string birleştirmesi etrafında useMemo bulunan ve prop'ları iletmektense üç katman yukarıdaki bir bağlam sağlayıcısıyla karşılaşırsınız. Kod render eder. Taşınacak React bu değil. Çözüm .cursorrules — deponuzdaki tek bir dosya, AI'ye modern React'in nasıl olması gerektiğini anlatıyor. Aşağıdaki sekiz kural, her biri başarısızlık modu, kural ve önce/sonra örnekleriyle birlikte. .cursorrules'ı en sona kopyala-yapıştır.

Cursor Kurallarının React Projelerinde Çalışması

Cursor, proje kurallarını iki konumdan okur: .cursorrules (depo kökünde tek bir dosya, hala destekleniyor) ve .cursor/rules/*.mdc (modüler dosyalar, önerilen, bir SPA'dan daha büyük her şey için). React için, Next.js uygulamasının sunucu bileşeni kurallarının aynı monorepo içindeki Vite SPA'sının istemci tarafı desenlerine karışmamasını sağlamak için modüler kuralları öneririm: .cursor/rules/ react-core.mdc # bileşim, prop'lar, dosya düzeni react-hooks.mdc # useEffect, useMemo, useCallback disiplini react-state.mdc # yerel vs global, sunucu durumu, bağlam kapsamı react-perf.mdc # memo, render kapsamı, liste anahtarları react-testing.mdc # RTL, davranış odaklı

Frontmatter etkinleştirmeyi kontrol eder: globs: ["*/.tsx", "*/.jsx"] with alwaysApply: false.

Şimdi kurallar.

Kural 1: Yapılandırma Yerine Bileşim — Çocuklar ve Yuvalar, Boolean Prop'lar Değil

React'te AI'nın en yaygın başarısızlığı boolean patlamasıdır. Cursor, Card'ın üç yerde kullanıldığını görür ve hasHeader, iconLeft, iconRight, variant, size ve actions dizisiyle "genelleştirir". Altı ay sonra Card'ın otuz prop'u olur, dördü karşılıklı olarak dışlayıcıdır ve bir tüketiciye yapılan her değişiklik paylaşılan bileşeni etkiler. Kural: Yapılandırma yerine bileşimi tercih edin. Yeniden kullanılabilir bileşenler, children ve adlandırılmış ReactNode yuvaları (header, footer, actions) kabul eder — büyüyen bir boolean geçişleri, ikon adları veya içerik dizileri listesi değil. Boolean prop'lar gerçek durumu temsil etmek için ayrılmıştır (disabled, loading, selected). Hiçbir zaman bir alt öğenin render edilip edilmeyeceğini değiştirmek için kullanılmazlar. Polimorfik sarıcılar için as prop'unu veya render-prop desenini kullanın — asla aynı işi yapan parallel linkTo / buttonHref prop'larını değil.

Önce — boolean patlaması: interface CardProps { title: string; hasHeader?: boolean; hasFooter?: boolean; iconLeft?: 'user' | 'cart' | 'star'; actions?: { label: string; onClick: () => void; variant: string }[]; variant?: 'default' | 'bordered' | 'elevated'; collapsible?: boolean; }

Her tüketici yeni bir bayrak ekler. Bileşen sonsuza kadar büyür.

Sonra — yuvalarla bileşim: interface CardProps { header?: React.ReactNode; footer?: React.ReactNode; children: React.ReactNode; }

function Card({ header, footer, children }: CardProps) {
  return (

<section className="rounded-lg border bg-white shadow-sm"> {header && <header className="border-b p-4">{header}</header>} {children} {footer && <footer className="border-t p-4">{footer}</footer>} </section> );