Frontend Geliştirme Kalıpları

React, Next.js ve performanslı kullanıcı arayüzleri için modern frontend kalıpları.

Ne Zaman Aktifleştirmelisiniz

• React bileşenleri oluştururken (composition, props, rendering)
• State yönetirken (useState, useReducer, Zustand, Context)
• Veri çekme implementasyonu (SWR, React Query, server components)
• Performans optimize ederken (memoization, virtualization, code splitting)
• Formlarla çalışırken (validation, controlled inputs, Zod schemas)
• Client-side routing ve navigasyon işlerken
• Erişilebilir, responsive UI kalıpları oluştururken

Bileşen Kalıpları

Kalıtım Yerine Composition

// PASS: İYİ: Bileşen composition
interface CardProps {
  children: React.ReactNode
  variant?: 'default' | 'outlined'
}

export function Card({ children, variant = 'default' }: CardProps) {
  return <div className={`card card-${variant}`}>{children}</div>
}

export function CardHeader({ children }: { children: React.ReactNode }) {
  return <div className="card-header">{children}</div>
}

export function CardBody({ children }: { children: React.ReactNode }) {
  return <div className="card-body">{children}</div>
}

// Kullanım
<Card>
  <Car…