Ücretsiz araç

Kod & Komut Rehberi

React, Next.js, TypeScript, Tailwind CSS, Git & GitHub, Flutter, SQL ve Python için sık kullanılan modern kod şablonları ve terminal komutları tek merkezde.

React Rehberi

React 1916 şablon

Modern bileşen mimarisi, temel ve ileri Hook kalıpları, performans optimizasyonu ve React 19 form/asenkron desenleri.

/

React içinde 16 kayıt gösteriliyor

Bileşen & JSXTemel

Tip Güvenli Bileşen ve Varsayılan Props

Button.tsx11 satır

tsx

interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: "primary" | "ghost";
}

export function Button({ variant = "primary", children, ...rest }: ButtonProps) {
  return (
    <button data-variant={variant} {...rest}>
      {children}
    </button>
  );
}

Yerleşik HTML özniteliklerini miras alarak esnek, tekrar kullanılabilir ve otomatik tamamlamalı bileşen tanımlar.

Pratik İpucu & Kullanım Notu

`React.ButtonHTMLAttributes` genişletmesi sayesinde `onClick`, `disabled`, `type` ve `aria-*` gibi tüm standart özellikleri tek tek yazmanız gerekmez.

Bileşen & JSXTemel

Koşullu Render ve Kararlı Liste Anahtarı (key)

UserList.tsx9 satır

tsx

{kullanicilar.length === 0 ? (
  <p>Henüz kayıt bulunmuyor.</p>
) : (
  <ul>
    {kullanicilar.map((user) => (
      <li key={user.id}>{user.ad}</li>
    ))}
  </ul>
)}

Boş liste durumunu güvenli şekilde ele alır ve benzersiz `key` ile DOM güncellemelerini doğru eşleştirir.

Pratik İpucu & Kullanım Notu

Sayısal değerlerde `{adet && <Rozet />}` yerine `{adet > 0 && <Rozet />}` kullanın; aksi halde `adet = 0` olduğunda ekrana yanlışlıkla `0` rakamı basılır.

Bileşen & JSXOrta

React 19: forwardRef Olmadan Doğrudan ref Prop

TextInput.tsx12 satır

tsx

interface InputProps extends React.ComponentPropsWithRef<"input"> {
  label: string;
}

export function TextInput({ label, ref, ...props }: InputProps) {
  return (
    <label className="block space-y-1">
      <span>{label}</span>
      <input ref={ref} {...props} />
    </label>
  );
}

React 19 ile fonksiyon bileşenleri `forwardRef` sarmalayıcısına ihtiyaç duymadan `ref`'i doğrudan prop olarak alır.

Pratik İpucu & Kullanım Notu

`ComponentPropsWithRef<'input'>` tipi hem standart input özelliklerini hem de doğru tiplenmiş `ref` alanını tek seferde sağlar.

State & EfektlerTemel

useState: Fonksiyonel Güncelleme ve Tembel Başlangıç

Counter.tsx5 satır

tsx

// Ağır başlangıç hesabı yalnızca ilk render'da çalışır:
const [ayarlar, setAyarlar] = useState(() => JSON.parse(localStorage.getItem("cfg") ?? "{}"));

// Önceki değere bağlı güncellemelerde her zaman fonksiyon kullanın:
const artir = () => setSayac((onceki) => onceki + 1);

Eski state kopyasına (stale closure) takılmadan güvenli güncelleme yapar ve pahalı ilk okumaları optimize eder.

Pratik İpucu & Kullanım Notu

`useState(pahaliFonksiyon())` yazarsanız fonksiyon her render'da boşuna çalışır; `useState(() => pahaliFonksiyon())` ise sadece ilk açılışta çalışır.

State & EfektlerTemel

Dizi ve Nesne State'ini Değişmez (Immutable) Güncelleme

Todos.tsx8 satır

tsx

// Eleman ekleme:
setListe((prev) => [...prev, yeniOge]);

// Eleman güncelleme:
setListe((prev) => prev.map((oge) => (oge.id === id ? { ...oge, tamam: !oge.tamam } : oge)));

// Eleman silme:
setListe((prev) => prev.filter((oge) => oge.id !== id));

`push` veya doğrudan atama yerine yeni referans üreterek React'in değişikliği algılayıp ekranı yenilemesini sağlar.

Pratik İpucu & Kullanım Notu

Derin iç içe nesneleri kopyalamak gerektiğinde modern tarayıcılarda yerleşik `structuredClone(prev)` fonksiyonundan da yararlanabilirsiniz.

State & EfektlerOrta

useEffect ile Güvenli Veri Çekme ve Temizleme (Abort)

SearchResults.tsx12 satır

tsx

useEffect(() => {
  const controller = new AbortController();

  fetch(`/api/ara?q=${encodeURIComponent(sorgu)}`, { signal: controller.signal })
    .then((res) => res.json())
    .then(setSonuclar)
    .catch((err) => {
      if (err.name !== "AbortError") console.error(err);
    });

  return () => controller.abort();
}, [sorgu]);

Kullanıcı hızlıca yeni harf yazdığında eski ağ isteğini iptal ederek yarış durumunu (race condition) önler.

Pratik İpucu & Kullanım Notu

Türetilmiş bir değeri hesaplamak için `useEffect` + `setState` kullanmayın; doğrudan render sırasında hesaplayın veya ağır ise `useMemo` tercih edin.

State & EfektlerOrta

useReducer ile Karmaşık Durum Makinesi

CartReducer.tsx12 satır

tsx

type Action =
  | { type: "EKLE"; urunId: string }
  | { type: "TEMIZLE" };

function reducer(state: string[], action: Action): string[] {
  switch (action.type) {
    case "EKLE": return [...state, action.urunId];
    case "TEMIZLE": return [];
  }
}

const [sepet, dispatch] = useReducer(reducer, []);

Birbiriyle ilişkili çoklu state geçişlerini tek bir saf (pure) fonksiyon altında öngörülebilir biçimde toplar.

Pratik İpucu & Kullanım Notu

TypeScript'te `Action` birleşim tipi (discriminated union) sayesinde `switch` içinde her aksiyonun ek verileri otomatik daraltılır.

State & EfektlerOrta

Context API + Güvenli Tüketici Hook Kalıbı

ThemeContext.tsx7 satır

tsx

const ThemeContext = createContext<{ dark: boolean; toggle: () => void } | null>(null);

export function useTheme() {
  const ctx = useContext(ThemeContext);
  if (!ctx) throw new Error("useTheme yalnızca ThemeProvider içinde kullanılabilir.");
  return ctx;
}

Prop delme (prop drilling) sorununu çözerken sağlayıcı dışında kullanımı anlaşılır bir hatayla yakalar.

Pratik İpucu & Kullanım Notu

React 19 ile `<ThemeContext.Provider value={...}>` yerine doğrudan `<ThemeContext value={...}>` yazabilirsiniz.

Performans & ReferansOrta

useMemo ve useCallback ile Referans Kararlılığı

FilteredTable.tsx8 satır

tsx

const siraliVeri = useMemo(
  () => kayitlar.filter((k) => k.aktif).toSorted((a, b) => a.puan - b.puan),
  [kayitlar]
);

const satirSec = useCallback((id: string) => {
  setSeciliId(id);
}, []);

Büyük listelerin her render'da yeniden sıralanmasını önler ve alt bileşenlere sabit fonksiyon referansı geçirir.

Pratik İpucu & Kullanım Notu

Küçük dizilerde veya ilkel hesaplamalarda `useMemo` eklemek gereksiz yük getirir; yalnızca gerçekten maliyetli işlemlerde veya `memo()` sarmallı alt bileşenlerde kullanın.

Performans & Referansİleri

useTransition ile Arayüzü Dondurmayan Güncelleme

HeavyFilter.tsx8 satır

tsx

const [isPending, startTransition] = useTransition();

function aramaDegisti(deger: string) {
  setGirdi(deger); // Klavye girdisi anında güncellenir
  startTransition(() => {
    setFiltreSorgusu(deger); // Ağır liste render'ı düşük öncelikli çalışır
  });
}

binlerce elemanlı listeyi filtrelerken klavye yazımının takılmasını (INP gecikmesini) engeller.

Pratik İpucu & Kullanım Notu

React 19'da `startTransition` içine `async` fonksiyon da verebilirsiniz; işlem bitene kadar `isPending` otomatik `true` kalır.

Performans & ReferansTemel

useRef: DOM Erişimi ve Render Tetiklemeyen Değer

Stopwatch.tsx4 satır

tsx

const inputRef = useRef<HTMLInputElement>(null);
const timerIdRef = useRef<ReturnType<typeof setInterval> | null>(null);

const odaklan = () => inputRef.current?.focus();

DOM düğümüne doğrudan erişir veya değiştiğinde bileşeni yeniden çizdirmemesi gereken zamanlayıcı kimliklerini saklar.

Pratik İpucu & Kullanım Notu

`ref.current` değerini render gövdesi içinde okumaktan veya değiştirmekten kaçının; yalnızca olay yöneticilerinde (event handler) veya `useEffect` içinde erişin.

Performans & ReferansTemel

useId ile Erişilebilir Form Eşleştirmesi (SSR Uyumlu)

FormField.tsx10 satır

tsx

export function EmailAlan() {
  const id = useId();
  return (
    <div>
      <label htmlFor={`${id}-email`}>E-posta</label>
      <input id={`${id}-email`} aria-describedby={`${id}-hint`} type="email" />
      <p id={`${id}-hint`}>Onay bağlantısı bu adrese gönderilir.</p>
    </div>
  );
}

Sunucu ve istemci tarafında birebir aynı benzersiz kimliği üreterek hydration uyuşmazlığı olmadan etiketleri bağlar.

Pratik İpucu & Kullanım Notu

`useId()` çıktısını liste elemanlarında `key` olarak kullanmayın; yalnızca ARIA ve form `id`/`htmlFor` ilişkileri içindir.

Özel Hook & React 19Orta

Özel Hook: useDebounce

hooks/useDebounce.ts10 satır

export function useDebounce<T>(deger: T, gecikmeMs = 300): T {
  const [gecikmeli, setGecikmeli] = useState(deger);

  useEffect(() => {
    const id = setTimeout(() => setGecikmeli(deger), gecikmeMs);
    return () => clearTimeout(id);
  }, [deger, gecikmeMs]);

  return gecikmeli;
}

Arama kutusu gibi sık değişen girdileri belirlenen süre boyunca yeni tuş basılmadığında dışarı yansıtır.

Pratik İpucu & Kullanım Notu

API isteklerini `gecikmeli` değere bağlayarak her tuş vuruşunda sunucuya gereksiz istek gitmesini önleyebilirsiniz.

Özel Hook & React 19İleri

React 19: useActionState ile Form Yönetimi

NewsletterForm.tsx17 satır

tsx

const [durum, formAction, isPending] = useActionState(
  async (_onceki: string | null, formData: FormData) => {
    const email = String(formData.get("email") ?? "");
    if (!email.includes("@")) return "Geçerli bir e-posta girin.";
    await kayitOl(email);
    return "Kaydınız tamamlandı!";
  },
  null
);

return (
  <form action={formAction}>
    <input name="email" disabled={isPending} />
    <button disabled={isPending}>{isPending ? "Gönderiliyor..." : "Abone Ol"}</button>
    {durum && <p>{durum}</p>}
  </form>
);

Ayrı `loading`, `error` ve `onSubmit` state'leri kurmadan form gönderimini, bekleme durumunu ve yanıtı tek hook'ta yönetir.

Pratik İpucu & Kullanım Notu

Next.js Server Actions ile doğrudan çalışır; JavaScript henüz yüklenmemişken bile aşamalı geliştirme (progressive enhancement) desteği sunar.

Özel Hook & React 19İleri

React 19: useOptimistic ile Anlık Arayüz Tepkisi

LikeButton.tsx9 satır

tsx

const [iyimserBegeni, ekleIyimser] = useOptimistic(
  begeniSayisi,
  (mevcut, eklenen: number) => mevcut + eklenen
);

async function begen() {
  ekleIyimser(1); // Sunucu yanıtını beklemeden anında +1 gösterir
  await begeniGonder(yaziId);
}

Ağ isteği tamamlanana kadar işlemin başarılı olacağını varsayarak kullanıcıya sıfır gecikmeli deneyim sunar.

Pratik İpucu & Kullanım Notu

Sunucu işlemi hata fırlatırsa React iyimser değeri otomatik geri alıp gerçek `begeniSayisi` değerine döner.

Özel Hook & React 19İleri

React 19: use() ile Promise ve Koşullu Context Okuma

Comments.tsx7 satır

tsx

import { use } from "react";

export function Yorumlar({ yorumlarPromise }: { yorumlarPromise: Promise<string[]> }) {
  // Suspense sınırı ile birlikte Promise çözülene kadar bekler:
  const yorumlar = use(yorumlarPromise);
  return <ul>{yorumlar.map((y, i) => <li key={i}>{y}</li>)}</ul>;
}

Sunucu bileşeninden aktarılan bir Promise'i veya `if` bloğu içindeki bir Context'i doğrudan bileşen içinde çözer.

Pratik İpucu & Kullanım Notu

Klasik Hook'ların aksine `use()`, `if` koşulları ve döngüler içinde çağrılabilir; Promise'i render içinde değil üst bileşende oluşturmaya dikkat edin.

Sık sorulan sorular

Toplam dokuz temel geliştirici alanı tek merkezde birleştirilmiştir: React 19, Next.js (App Router), TypeScript, Modern JavaScript (ES6+), Tailwind CSS, Git & GitHub CLI (gh), Flutter & Dart, SQL (PostgreSQL / ANSI) ve Python 3.12+.

Evet. Üstteki sekmelerden herhangi birini seçtiğinizde adres çubuğu `?konu=react`, `?konu=git` veya `?konu=typescript` şeklinde otomatik güncellenir; bağlantıyı paylaştığınızda doğrudan ilgili alan açık gelir.

Evet. Arama kutusunun yanındaki 'Tüm Alanlarda Ara' düğmesini etkinleştirerek dokuz alanın tamamındaki 110'dan fazla komut ve kod şablonunu aynı anda tarayabilirsiniz. Ayrıca normal aramada da her sekmenin üzerinde kaç eşleşme bulunduğu canlı gösterilir.

Uzak depoya gönderilmiş ortak dallarda (`main` vb.) geçmişi bozmadan ters işlem üreten `git revert` kullanılmalıdır. `git reset` geçmişi yeniden yazdığı için yalnızca henüz push edilmemiş yerel commit'lerde tercih edilmelidir; yanlışlıkla `reset --hard` yapıldığında ise `git reflog` ile kurtarma yapılabilir.

Yıldız simgesiyle işaretlediğiniz tüm kartlar sunucuya gönderilmeden yalnızca tarayıcınızın yerel depolama alanında (`localStorage`) saklanır; 'Favoriler' filtresiyle farklı dillerden seçtiğiniz tüm şablonları tek ekranda görebilirsiniz.

Bu araç işine yaradı mı?

Favorilerine ekle ya da ihtiyacı olan birine gönder.

İlgili Araçlar

Flutter Tasarım Alanı

Flutter widget'larını (Container vb.) interaktif olarak tasarlayın ve kodunu alın.

Kullan

JSON to TS/Zod

JSON verilerinizi saniyeler içinde TypeScript veya Zod koduna dönüştürün.

Kullan

CSS Birim Dönüştürücü

Pixel (px) değerlerini REM ve EM birimlerine kolayca çevirin.

Kullan

Tüm araçları gör

interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> { variant?: "primary" | "ghost"; } export function Button({ variant = "primary", children, ...rest }: ButtonProps) { return ( <button data-variant={variant} {...rest}> {children} </button> ); }

interface InputProps extends React.ComponentPropsWithRef<"input"> { label: string; } export function TextInput({ label, ref, ...props }: InputProps) { return ( <label className="block space-y-1"> <span>{label}</span> <input ref={ref} {...props} /> </label> ); }

// Ağır başlangıç hesabı yalnızca ilk render'da çalışır: const [ayarlar, setAyarlar] = useState(() => JSON.parse(localStorage.getItem("cfg") ?? "{}")); // Önceki değere bağlı güncellemelerde her zaman fonksiyon kullanın: const artir = () => setSayac((onceki) => onceki + 1);

// Eleman ekleme: setListe((prev) => [...prev, yeniOge]); // Eleman güncelleme: setListe((prev) => prev.map((oge) => (oge.id === id ? { ...oge, tamam: !oge.tamam } : oge))); // Eleman silme: setListe((prev) => prev.filter((oge) => oge.id !== id));

useEffect(() => { const controller = new AbortController(); fetch(`/api/ara?q=${encodeURIComponent(sorgu)}`, { signal: controller.signal }) .then((res) => res.json()) .then(setSonuclar) .catch((err) => { if (err.name !== "AbortError") console.error(err); }); return () => controller.abort(); }, [sorgu]);

type Action = | { type: "EKLE"; urunId: string } | { type: "TEMIZLE" }; function reducer(state: string[], action: Action): string[] { switch (action.type) { case "EKLE": return [...state, action.urunId]; case "TEMIZLE": return []; } } const [sepet, dispatch] = useReducer(reducer, []);

const ThemeContext = createContext<{ dark: boolean; toggle: () => void } | null>(null); export function useTheme() { const ctx = useContext(ThemeContext); if (!ctx) throw new Error("useTheme yalnızca ThemeProvider içinde kullanılabilir."); return ctx; }

const [isPending, startTransition] = useTransition(); function aramaDegisti(deger: string) { setGirdi(deger); // Klavye girdisi anında güncellenir startTransition(() => { setFiltreSorgusu(deger); // Ağır liste render'ı düşük öncelikli çalışır }); }

export function EmailAlan() { const id = useId(); return ( <div> <label htmlFor={`${id}-email`}>E-posta</label> <input id={`${id}-email`} aria-describedby={`${id}-hint`} type="email" /> <p id={`${id}-hint`}>Onay bağlantısı bu adrese gönderilir.</p> </div> ); }

export function useDebounce<T>(deger: T, gecikmeMs = 300): T { const [gecikmeli, setGecikmeli] = useState(deger); useEffect(() => { const id = setTimeout(() => setGecikmeli(deger), gecikmeMs); return () => clearTimeout(id); }, [deger, gecikmeMs]); return gecikmeli; }

const [durum, formAction, isPending] = useActionState( async (_onceki: string | null, formData: FormData) => { const email = String(formData.get("email") ?? ""); if (!email.includes("@")) return "Geçerli bir e-posta girin."; await kayitOl(email); return "Kaydınız tamamlandı!"; }, null ); return ( <form action={formAction}> <input name="email" disabled={isPending} /> <button disabled={isPending}>{isPending ? "Gönderiliyor..." : "Abone Ol"}</button> {durum && <p>{durum}</p>} </form> );

const [iyimserBegeni, ekleIyimser] = useOptimistic( begeniSayisi, (mevcut, eklenen: number) => mevcut + eklenen ); async function begen() { ekleIyimser(1); // Sunucu yanıtını beklemeden anında +1 gösterir await begeniGonder(yaziId); }

import { use } from "react"; export function Yorumlar({ yorumlarPromise }: { yorumlarPromise: Promise<string[]> }) { // Suspense sınırı ile birlikte Promise çözülene kadar bekler: const yorumlar = use(yorumlarPromise); return <ul>{yorumlar.map((y, i) => <li key={i}>{y}</li>)}</ul>; }

Sık sorulan sorular

Kod & Komut Rehberi

React Rehberi

Tip Güvenli Bileşen ve Varsayılan Props

Koşullu Render ve Kararlı Liste Anahtarı (key)

React 19: forwardRef Olmadan Doğrudan ref Prop

useState: Fonksiyonel Güncelleme ve Tembel Başlangıç

Dizi ve Nesne State'ini Değişmez (Immutable) Güncelleme

useEffect ile Güvenli Veri Çekme ve Temizleme (Abort)

useReducer ile Karmaşık Durum Makinesi

Context API + Güvenli Tüketici Hook Kalıbı

useMemo ve useCallback ile Referans Kararlılığı

useTransition ile Arayüzü Dondurmayan Güncelleme

useRef: DOM Erişimi ve Render Tetiklemeyen Değer

useId ile Erişilebilir Form Eşleştirmesi (SSR Uyumlu)

Özel Hook: useDebounce

React 19: useActionState ile Form Yönetimi

React 19: useOptimistic ile Anlık Arayüz Tepkisi

React 19: use() ile Promise ve Koşullu Context Okuma

Sık sorulan sorular

Bu rehber hangi dil, kütüphane ve komut araçlarını kapsıyor?

Belirli bir dili veya Git & GitHub sekmesini doğrudan bağlantı olarak paylaşabilir miyim?

Tüm diller ve komutlar içinde aynı anda arama yapabilir miyim?

Paylaşılan bir Git dalında reset mi yoksa revert mi kullanmalıyım?

Favorilere eklediğim kod ve komutlar nerede tutuluyor?

İlgili Araçlar

Flutter Tasarım Alanı

JSON to TS/Zod

CSS Birim Dönüştürücü

Kod & Komut Rehberi

React Rehberi

Tip Güvenli Bileşen ve Varsayılan Props

Koşullu Render ve Kararlı Liste Anahtarı (key)

React 19: forwardRef Olmadan Doğrudan ref Prop

useState: Fonksiyonel Güncelleme ve Tembel Başlangıç

Dizi ve Nesne State'ini Değişmez (Immutable) Güncelleme

useEffect ile Güvenli Veri Çekme ve Temizleme (Abort)

useReducer ile Karmaşık Durum Makinesi

Context API + Güvenli Tüketici Hook Kalıbı

useMemo ve useCallback ile Referans Kararlılığı

useTransition ile Arayüzü Dondurmayan Güncelleme

useRef: DOM Erişimi ve Render Tetiklemeyen Değer

useId ile Erişilebilir Form Eşleştirmesi (SSR Uyumlu)

Özel Hook: useDebounce

React 19: useActionState ile Form Yönetimi

React 19: useOptimistic ile Anlık Arayüz Tepkisi

React 19: use() ile Promise ve Koşullu Context Okuma

Sık sorulan sorular

Bu rehber hangi dil, kütüphane ve komut araçlarını kapsıyor?

Belirli bir dili veya Git & GitHub sekmesini doğrudan bağlantı olarak paylaşabilir miyim?

Tüm diller ve komutlar içinde aynı anda arama yapabilir miyim?

Paylaşılan bir Git dalında reset mi yoksa revert mi kullanmalıyım?

Favorilere eklediğim kod ve komutlar nerede tutuluyor?

İlgili Araçlar

Flutter Tasarım Alanı

JSON to TS/Zod

CSS Birim Dönüştürücü