React Kopya Kağıdı
Aranabilir, yazdırılabilir React 19 başvurusu — bileşenler, JSX, hook'lar, yeni Actions API'leri, context, ref'ler ve performans. Ücretsiz.
Bileşenler ve JSX
12function App() { return <h1>Hi</h1>; }
JSX döndüren bir fonksiyon bileşeni
export default function App() {}
Bir bileşeni varsayılan dışa aktar
<Greeting name="Ada" />
Bir bileşeni prop'larla render et
{1 + 2} or {user.name}
Süslü parantezlerle bir JS ifadesi göm
<>{a}{b}</>
Fragment düğümleri gruplar, ekstra DOM yok
<div className="card">
CSS için class değil className kullan
{isOpen && <Menu />}
&& ile koşullu render et
{ok ? <Yes /> : <No />}
Üçlü ifadeyle düğümler arası seç
{items.map(i => <li key={i.id}>{i.t}</li>)}
Bir diziden liste render et
function Btn({ label, onClick }) {}
İmzada prop'ları parçala
function Card({ children }) { return children; }
İç içe JSX'i children prop'u ile oku
<input value={v} onChange={onChange} />
State'e bağlı kontrollü giriş
Render ve kurulum
10import { createRoot } from 'react-dom/client'
İstemci kök API'sini içe aktar
createRoot(document.getElementById('root')).render(<App/>)
Uygulamayı DOM'a bağla
import { StrictMode } from 'react'
StrictMode sarmalayıcısını içe aktar
<StrictMode><App /></StrictMode>
Geliştirmede hataları ortaya çıkar
import { hydrateRoot } from 'react-dom/client'
Hydration API'sini içe aktar
hydrateRoot(el, <App />)
React'i sunucu HTML'ine bağla
root.unmount()
Bağlanmış bir kökü kaldır
import App from './App.jsx'
Bir modülden bileşen içe aktar
<App {...props} />
Bir nesneyi prop olarak yay
export { Button, Card }
Birden çok bileşeni adlandırılmış dışa aktar
State ve effect'ler
12const [count, setCount] = useState(0)
Bir state değişkeni tanımla
setCount(c => c + 1)
Önceki değerden güncelle
setUser(u => ({ ...u, name }))
Nesne state'ini değişmez şekilde güncelle
useEffect(() => { run(); }, [dep])
Bağımlılıklar değiştiğinde effect çalıştır
useEffect(() => { /* once */ }, [])
Yalnızca bağlanmada effect çalıştır
useEffect(() => () => cleanup(), [])
Bir temizleme fonksiyonu döndür
const ref = useRef(null)
Render'lar boyunca değişebilir bir değer tut
const [state, dispatch] = useReducer(r, init)
Bir reducer ile karmaşık state yönet
const theme = useContext(ThemeContext)
En yakın context değerini oku
const memo = useMemo(() => calc(a), [a])
Pahalı bir hesaplamayı belleğe al
useLayoutEffect(() => {}, [])
Layout'tan sonra senkron çalıştır
useSyncExternalStore(sub, get)
Harici bir store'a abone ol
React 19 hook'ları ve API'leri
12import { use } from 'react'
Yeni use API'sini içe aktar
const data = use(promise)
Bir promise oku, hazır olana kadar askıda kalır
const theme = use(ThemeContext)
Context oku, koşullu olarak izinli
const [state, action, pending] = useActionState(fn, init)
State, action ve bekleyeni izle
const [opt, addOpt] = useOptimistic(state, reducer)
Anında iyimser bir değer göster
const { pending } = useFormStatus()
Üst form gönderim durumunu oku
const [isPending, startTransition] = useTransition()
Güncellemeleri acil-olmayan olarak işaretle
startTransition(async () => await save())
Bir transition içinde async Action çalıştır
const deferred = useDeferredValue(value)
Arayüzü duyarlı tutmak için bir değeri ertele
const id = useId()
Kararlı benzersiz bir id üret
<title>Page title</title>
Meta veriyi ağacın herhangi bir yerinde render et
function Input({ ref }) {}
ref normal bir prop, forwardRef yok
Formlar ve Action'lar
12<form action={handleSubmit}>
Bir fonksiyonu form Action olarak geçir
function handleSubmit(formData) {}
Action FormData'yı alır
formData.get('email')
FormData'dan bir alan oku
const [state, action] = useActionState(submit, null)
Bir Action'ı bileşen state'ine bağla
<form action={action}>
Sarmalanmış Action'ı formda kullan
const [s, a, pending] = useActionState(fn, init)
Arayüz için bir bekleme bayrağı sun
return { error: 'Invalid' }
Bir Action'dan hata state'i döndür
function Submit() { const { pending } = useFormStatus() }
Gönder düğmesi içinde bekleyeni oku
<button disabled={pending}>Save</button>
Beklerken göndermeyi devre dışı bırak
import { requestFormReset } from 'react-dom'
Form sıfırlama yardımcısını içe aktar
requestFormReset(formEl)
Kontrolsüz bir formu sıfırla
<form action={action}><Submit /></form>
Action formunu durumla oluştur
Prop'lar ve kompozisyon
10function Hi({ name = 'Guest' }) {}
Parçalama ile varsayılan prop
function Box({ children }) { return children; }
İçeriği children prop'u ile sarmala
<Box><p>Inside</p></Box>
JSX'i children olarak geçir
function List({ render }) { return render(); }
Render prop kalıbı
<List render={() => <Item />} />
Bir render fonksiyonu sağla
<Input {...props} />
Tüm prop'ları yayma ile ilet
const { id, ...rest } = props
Bir prop seç ve geri kalanı geçir
<Avatar {...rest} size="lg" />
Yay sonra bir prop'u geçersiz kıl
function Btn(props: BtnProps) {}
Prop'ları TypeScript arabirimleriyle türle
<Slot label={<b>Hi</b>} />
JSX'i adlandırılmış bir prop ile geçir
Olaylar
10<button onClick={handleClick}>
Bir tıklama işleyici ekle
function handleClick(e) {}
Sentetik olayı al
<input onChange={e => set(e.target.value)} />
Değişimde bir giriş değeri oku
<form onSubmit={e => e.preventDefault()}>
Varsayılan form gönderimini durdur
e.stopPropagation()
Olayın yayılmasını engelle
<li onClick={() => remove(id)}>
Bir closure ile argüman geçir
<input onKeyDown={e => e.key === 'Enter'}
Belirli bir tuş basışını işle
<div onMouseEnter={hover}>
İşaretçi olaylarını dinle
e.currentTarget.value
İşleyicinin bulunduğu öğeyi oku
<button onClick={() => {}} type="button">
Örtük form gönderiminden kaçın
Listeler ve anahtarlar
10arr.map(x => <li key={x.id}>{x.t}</li>)
Öğe başına bir düğüm render et
key={item.id}
Her öğeye kararlı bir anahtar ver
key={index}
İndeks anahtarları yalnızca statik listeler için
users.map(u => <Card key={u.id} {...u} />)
Öğe alanlarını prop olarak yay
{list.length === 0 && <Empty />}
Boş listeler için bir yedek göster
import { Fragment } from 'react'
Anahtarlı gruplar için Fragment içe aktar
<Fragment key={id}>{a}{b}</Fragment>
Bir listede anahtarlı fragment
{rows.filter(r => r.on).map(...)}
Eşlemeden önce filtrele
Keys must be unique among siblings
Anahtarlar React'in listeleri karşılaştırmasına neden yardım eder
{[...Array(n)].map((_, i) => ...)}
Sabit uzunluklu bir aralığı eşle
Context
10const ThemeContext = createContext('light')
Varsayılanlı bir context oluştur
import { createContext } from 'react'
Context fabrikasını içe aktar
<ThemeContext value={theme}>
Bir değer sağla (React 19 söz dizimi)
<ThemeContext value={theme}><App /></ThemeContext>
Onu okuyan ağacı sarmala
const theme = useContext(ThemeContext)
useContext ile context oku
const theme = use(ThemeContext)
use API'si ile context oku
if (cond) { const t = use(Ctx); }
use, context'i koşullu okuyabilir
export const ThemeContext = createContext()
Paylaşılan bir context dışa aktar
<Ctx value={{ user, setUser }}>
Bir nesneyi değer olarak geçir
Avoid new objects each render
Yeniden render'ları sınırlamak için değerleri belleğe al
Ref'ler
10const inputRef = useRef(null)
Bir ref tutucu oluştur
<input ref={inputRef} />
ref'i bir düğüme bağla
inputRef.current.focus()
DOM düğümüne current ile eriş
function Field({ ref }) { return <input ref={ref} /> }
prop olarak ref, forwardRef yok
<Field ref={inputRef} />
Bir bileşene ref geçir
useImperativeHandle(ref, () => ({ focus }))
Buyurgan bir API sun
const setRef = node => { box = node; }
Bir callback ref kullan
<div ref={setRef} />
Bir callback ref bağla
const count = useRef(0)
Yeniden render etmeden bir değer sakla
ref={node => { return () => cleanup(); }}
Temizlemeli callback ref (React 19)
Performans
10const Memo = memo(Component)
Prop'lar eşitse yeniden render'ı atla
import { memo } from 'react'
memo yardımcısını içe aktar
const value = useMemo(() => calc(a), [a])
Hesaplanmış bir değeri önbelleğe al
const fn = useCallback(() => f(a), [a])
Bir fonksiyon kimliğini önbelleğe al
const Lazy = lazy(() => import('./Big.jsx'))
Bir bileşeni kod-bölme yap
import { lazy, Suspense } from 'react'
lazy ve Suspense'i içe aktar
<Suspense fallback={<Spin />}><Lazy /></Suspense>
Yüklenirken bir yedek göster
startTransition(() => setQuery(q))
Acil-olmayan state güncellemelerini işaretle
const slow = useDeferredValue(query)
Pahalı türetilmiş arayüzü ertele
React Compiler auto-memoizes
Çoğunlukla manuel belleğe almayı kaldırır
Çeşitli ve meta veri
10<Suspense fallback={<Loading />}>
Async içerik için sınır
class ErrorBoundary extends Component {}
Render hatalarını yakala (eski sınıf)
<title>My Page</title>
Belge başlığını bir bileşenden yukarı taşı
<meta name="description" content="..." />
Meta etiketleri head'e render et
<link rel="stylesheet" href="..." />
Bir stil sayfası bağlantısını yukarı taşı
<Comp key={id} />
Bir bileşeni yeniden bağlamak için key değiştir
React.lazy(() => import('./Page.jsx'))
Bir rota bileşenini tembel içe aktar
createPortal(node, container)
Farklı bir DOM düğümüne render et
{/* a comment */}
JSX içine bir yorum yaz
cleanup return in useEffect
Abonelikleri/zamanlayıcıları her zaman serbest bırak
“:q” ile eşleşen bir girdi yok.
Yardıma mı ihtiyacınız var?
Bu araçta bir sorun mu buldunuz? Ekibimize bildirin.