React'e giriş: bileşenler ve JSX

Blok 5'te veriyi sunucuda ve veritabanında tuttun. Şimdi o verinin kullanıcıya görünen yüzüne dönüyorsun. Bu derste React ile tanışıyorsun: arayüzü küçük, yeniden kullanılabilir bileşenlere bölen ve sayfayı veriden kendisi kuran bir kütüphane. Vite ile ilk React projeni açacak, HTML'e benzeyen JSX sözdizimini yazacak, bileşenlere props ile veri verecek, bir diziyi listeye çevirip bazı parçaları yalnız gerektiğinde göstereceksin. Bütün kodu Ders 39'daki gibi TypeScript ile, yani .tsx dosyalarında yazacaksın.

#React neden var: arayüz verinin görüntüsüdür

Ders 25'teki ansiklopedide kartları createElement ile tek tek kurmuştun. Sadeleştirilmiş hâliyle, solda o yol, sağda React'teki karşılığı:

function kartOlustur(sampiyon) {    const kart = document.createElement("article")    kart.className = "kart"    const ad = document.createElement("h3")    ad.textContent = sampiyon.isim    const rol = document.createElement("p")    rol.textContent = sampiyon.rol    kart.append(ad, rol)    return kart}

function SampiyonKarti({ isim, rol }: SampiyonKartiProps) {    return (        <article className="kart">            <h3>{isim}</h3>            <p>{rol}</p>        </article>    )}

Soldaki kod nasıl yapılacağını adım adım söylüyor: öğe oluştur, sınıf ver, yazı koy, birbirine ekle. Sağdaki ise yalnız ne istediğini söylüyor: "kart, içinde bir başlık ve bir paragraf olan bir article'dır". İkinci yazım hem kısa hem de sayfadaki sonuca benziyor; okuyunca kartı gözünde canlandırabiliyorsun.

Asıl fark veri değişince ortaya çıkar. Ders 23'teki maç günlüğünde kural "veriyi değiştir, sonra ciz() ile listeyi baştan kur" idi (çizmek). Listeyi her seferinde silip baştan kurmak yavaştır; silmeyip yalnız değişen yeri elle düzeltmek ise hataya açıktır: bir yeri güncellemeyi unutursan ekran ile veri birbirini tutmaz. React bu ikinci işi senden alır. Sen "bu veri için ekran böyle görünür" diye bir fonksiyon yazarsın; veri değişince React aynı fonksiyonu yeniden çağırır, eski sonuçla yenisini karşılaştırır ve sayfada yalnız değişen yeri günceller.

React tek başına yalnız arayüz kısmını çözer; sayfalar arası gezinme, sunucuda çalışma gibi işler için üstüne kurulan çatılar var. Blok 6'nın ilerisinde onlardan birini, Next.js'i göreceksin (Ders 43). Önce React'in kendisini sağlam öğreniyoruz.

#Vite ile proje açmak

Tarayıcı JSX'ten de TypeScript'ten de anlamaz. Ders 39'da Node .ts dosyalarını tipleri silerek çalıştırıyordu, ama tarayıcıda böyle bir kolaylık yok. Kodunu tarayıcının anlayacağı JavaScript'e çeviren, dosyalarını sunan ve sen kaydettikçe sayfayı tazeleyen bir araca ihtiyacın var. Bu işi Vite yapıyor.

#Projeyi oluştur

VS Code'da bir terminal aç ve cd C:\kod ile kod klasörüne geç. Sonra Vite'ın proje sihirbazını çalıştır:

PS C:\kod> npm create vite@latest sampiyon-kartlari -- --template react-ts

• npm create vite@latest: create-vite adlı paketin en son sürümünü indirip çalıştırır. Bu paketin tek işi yeni proje klasörü kurmak.
• sampiyon-kartlari: oluşturulacak klasörün adı.
• --: "bundan sonrası npm'e değil, çalıştırılan araca" demek. Yazmazsan --template'i npm kendisine sanır ve şablon seçilmez.
• --template react-ts: React + TypeScript şablonu. Yalnız react yazsaydın .jsx dosyalı, tipsiz bir proje gelirdi.

İlk çalıştırmada npm, paketi indirmek için izin ister; y yaz ve Enter'a bas. Ardından sihirbaz iki soru sorar. İlki hangi kod denetleyiciyi (linter) istediğin:

│◆  Which linter to use?│  ● Oxlint│  ○ ESLint│  ↑/↓ to navigate • Enter: confirm└

Seçili olan Oxlint'te kal ve Enter'a bas. İkinci soru "paketleri kurup projeyi hemen başlatayım mı?":

◆  Install with npm and start now?│  ● Yes / ○ No└

Bu kez → ok tuşuyla No'ya geç ve Enter'a bas. Kurma ve başlatma adımlarını kendin yapıp her birinin ne olduğunu göreceksin. Sonunda ekranın tamamı şöyle olmalı:

PS C:\kod> npm create vite@latest sampiyon-kartlari -- --template react-tsNeed to install the following packages:create-vite@9.2.1Ok to proceed? (y) y > npx> create-vite sampiyon-kartlari --template react-ts  To create in one go, run: create-vite <DIRECTORY> --no-interactive --template <TEMPLATE> │◇  Which linter to use?│  Oxlint│◇  Install with npm and start now?│  No│◇  Scaffolding project in C:\kod\sampiyon-kartlari...│└  Done. Now run:   cd sampiyon-kartlari  npm install  npm run dev

Bu ders create-vite 9.2.1 ile denendi; sende daha yeni bir sürüm ve biraz farklı sorular çıkabilir. Seçeneklerin anlamı aynı kalır. Altında npm notice ile başlayan bir yeni sürüm duyurusu görürsen görmezden gel. To create in one go satırı, aynı işi sorusuz yapmanın yolunu söylüyor; şimdilik gerek yok.

Şimdi klasörü VS Code'da aç ve paketleri kur:

PS C:\kod> code sampiyon-kartlari

Yeni pencerede güven sorusu gelirse Yes, I trust the authors'a bas, menüden Terminal → New Terminal ile terminali aç ve yaz:

PS C:\kod\sampiyon-kartlari> npm install added 27 packages, and audited 28 packages in 3s 9 packages are looking for funding  run `npm fund` for details found 0 vulnerabilities

npm install, package.json'daki paketleri (react, react-dom, vite, typescript ve birkaç yardımcı) node_modules'a kurar (Ders 14). Paket sayısı ve süre sende farklı olabilir.

#Geliştirme sunucusunu başlat

PS C:\kod\sampiyon-kartlari> npm run dev > sampiyon-kartlari@0.0.0 dev> vite    VITE v8.3.4  ready in 655 ms   ➜  Local:   http://localhost:5173/  ➜  Network: use --host to expose  ➜  press h + enter to show help

npm run dev, package.json'daki dev betiğini, yani vite komutunu çalıştırır. Vite bilgisayarında bir yerel sunucu açtı ve onu 5173 numaralı porttan dinliyor. Ctrl basılıyken http://localhost:5173/ bağlantısına tıkla; tarayıcıda şablonun hazır sayfası açılır:

localhost:5173

Count is 0 düğmesine birkaç kez tıklarsan sayı artar. Bunun nasıl çalıştığını Ders 41'de öğreneceksin; bu derste o düğmeyi silip kendi sayfanı yazacaksın.

Sunucu çalıştığı sürece terminal meşguldür: istem (PS C:\…>) geri gelmez, yeni komut yazamazsın. Başka bir komut gerekince terminal panelinin sağ üstündeki + düğmesiyle ikinci bir terminal aç; Vite birincide çalışmaya devam eder. Sunucuyu durdurmak için onun terminaline tıklayıp Ctrl+C'ye bas.

#Klasörün içi

Vite sana küçük ama eksiksiz bir proje kurdu. Önemli dosyalar ve birbirlerini nasıl çağırdıkları:

• index.html: tarayıcının açtığı tek HTML sayfası. Gövdesinde yalnız boş bir <div id="root"></div> ve main.tsx'i yükleyen bir <script type="module"> var. Sayfanın bütün içeriğini React bu kutunun içine koyacak.
• src/main.tsx: React'i başlatan dosya. Aşağıda içine bakıyoruz.
• src/App.tsx: ilk bileşen; şablon sayfasının bütün içeriği burada. Bu derste en çok bu dosyayla çalışacaksın.
• src/index.css, src/App.css, src/assets/: şablon sayfasının stilleri ve resimleri.
• public/: olduğu gibi sunulan dosyalar (sekmedeki küçük simge favicon.svg gibi).
• package.json: betikler ve paketler. dev (geliştirme sunucusu), build (yayın için derleme), lint (Oxlint), preview (derlenmiş hâli denemek).
• tsconfig.json, tsconfig.app.json, tsconfig.node.json: TypeScript ayarları. Biri src'deki tarayıcı kodu, biri vite.config.ts için; üçüncüsü ikisini birbirine bağlar. Şimdilik dokunmana gerek yok.
• vite.config.ts: Vite'ın ayarları; React eklentisini açan tek satır var.

src/main.tsx'i aç:

1import { StrictMode } from 'react'2import { createRoot } from 'react-dom/client'3import './index.css'4import App from './App.tsx'5 6createRoot(document.getElementById('root')!).render(7  <StrictMode>8    <App />9  </StrictMode>,10)

• import './index.css': CSS dosyasını sayfaya ekler. Vite, JavaScript'ten CSS içe aktarmayı da bilir.
• import App from './App.tsx': App.tsx'in varsayılan dışa aktarmasını App adıyla alır.
• document.getElementById('root'): index.html'deki boş kutuyu bulur (Ders 22'deki querySelector("#root") ile aynı iş). Kutu bulunamazsa null döner; sondaki ! TypeScript'e "burada kesin var" diye söz verir. Ders 39'daki as gibi bir sözdür, denetim değil.
• createRoot(…).render(<App />): "bu kutunun içini React yönetsin ve içine App'i çiz" demek.
• <StrictMode>: geliştirirken sık yapılan bazı hataları yakalamak için React'in ek denetimlerini açar. Yayındaki sitede hiçbir şey yapmaz.

Bu dosyaya dokunmayacaksın. Tek tırnak ve iki boşluk girinti kullandığına dikkat et: Vite'ın tercihi. Kursta yazdığımız dosyalarda kendi düzenimizi (çift tırnak, dört boşluk, noktalı virgül yok) sürdürüyoruz; JavaScript ikisini de kabul eder (Ders 7).

#Sıfırdan başla

Şablonun sayfası işini gördü. Kendi sayfanı yazmak için önce src/App.tsx'in içini tamamen sil ve yerine şu üç satırı kendin yaz:

1export default function App() {2    return <h1>Şampiyon Kartları</h1>3}

PS C:\kod\sampiyon-kartlari> npm run dev > sampiyon-kartlari@0.0.0 dev> vite    VITE v8.3.4  ready in 211 ms   ➜  Local:   http://localhost:5173/  ➜  Network: use --host to expose  ➜  press h + enter to show help03:36:00 [vite] (client) hmr update /src/App.tsx

Tarayıcıya bak: sayfayı yenilemene gerek kalmadan koca başlık "Şampiyon Kartları" oldu. Bu, senin ilk bileşenin: adı App, büyük harfle başlıyor ve HTML'e benzeyen bir şey döndürüyor. Başlıktaki yazıyı değiştirip kaydet; sayfa yine kendiliğinden güncellenir.

Şimdi temizlik. Yeni App.tsx şablonun stillerini ve resimlerini artık kullanmıyor; src/App.css dosyasını ve src/assets klasörünü sil (VS Code'un dosya listesinde sağ tık → Delete). Sıra önemli: eski App.tsx dururken silseydin, o dosya hâlâ ./App.css'i içe aktardığı için Vite Failed to resolve import "./App.css" from "src/App.tsx". Does the file exist? ("içe aktarılan dosya bulunamadı") diye hata katmanı açardı.

Sonra src/index.css'in içini tamamen sil ve yerine şunu koy. CSS'i Ders 20 ve Ders 21'de öğrendin; bu dersin konusu olmadığı için bu kez kopyalayabilirsin:

1:root {2    font-family: system-ui, "Segoe UI", sans-serif;3    color: #e8e6f0;4    background: #16141f;5}6 7body {8    margin: 0;9}10 11main {12    max-width: 760px;13    margin: 0 auto;14    padding: 24px 16px;15}16 17h1 {18    margin: 0 0 12px;19}20 21.ozet {22    margin: 0 0 20px;23    color: #a9a4bd;24}25 26.kartlar {27    display: grid;28    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));29    gap: 12px;30}31 32.kart {33    position: relative;34    padding: 16px;35    border: 1px solid #34304a;36    border-radius: 12px;37    background: #211e2e;38}39 40.kart h3 {41    margin: 10px 0 2px;42}43 44.kart p {45    margin: 0;46    color: #a9a4bd;47}48 49.harf {50    display: grid;51    place-items: center;52    width: 48px;53    height: 48px;54    border-radius: 50%;55    background: #6d4bd8;56    font-size: 22px;57    font-weight: 700;58}59 60.rozet {61    position: absolute;62    top: 12px;63    right: 12px;64    padding: 2px 8px;65    border-radius: 999px;66    background: #1f6f4a;67    font-size: 12px;68}69 70.bos {71    padding: 16px;72    border: 1px dashed #34304a;73    border-radius: 12px;74    color: #a9a4bd;75}76 77.kart.ucretsiz {78    border-color: #2f8f62;79}

Kaydedince sayfa koyu renge döner. Birazdan yazacağın kartların, rozetlerin ve boş liste kutusunun stilleri de bu dosyada hazır.

#JSX: JavaScript'in içinde HTML gibi yazmak

return <h1>Şampiyon Kartları</h1> satırı bir JavaScript dosyasında tuhaf duruyor: tırnak yok, ama metin var; HTML etiketi var, ama bir fonksiyonun içinde. Bu yazımın adı JSX. Tarayıcı onu tanımaz; Vite her .tsx dosyasını sunmadan önce sıradan JavaScript'e çevirir. Şu iki satırın Vite'tan geçmiş hâli (çeviriyi Vite'ın kendi çeviricisiyle, npm run build'in kullandığı ayarlarla aldık; okuman yeter, yazmayacaksın):

const oyuncu = "Deniz" export const baslik = <h1 className="baslik">Şampiyon Kartları</h1>export const selam = <p>{oyuncu} hoş geldin</p>

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";const oyuncu = "Deniz";export const baslik = /* @__PURE__ */ _jsx("h1", {	className: "baslik",	children: "Şampiyon Kartları"});export const selam = /* @__PURE__ */ _jsxs("p", { children: [oyuncu, " hoş geldin"] });

Her JSX etiketi bir fonksiyon çağrısına dönüşüyor: ilk argüman etiketin adı ("h1"), ikincisi bir obje. Nitelikler objenin alanları oluyor (className: "baslik"), etiketin içindekiler de children alanına giriyor. /* @__PURE__ */ yalnız derleme aracına bırakılmış bir not. npm run dev sırasında çağrının adı _jsxDEV olur ve hata mesajları için dosya adıyla satır numarası da eklenir; fikir aynıdır. Yani JSX, React'in fonksiyonlarını daha okunaklı yazmanın bir yolu; altta yine JavaScript var. Bu bilgi, birazdan göreceğin kuralların neden var olduğunu açıklayacak.

JSX HTML'e benzer ama HTML değildir; birkaç kuralı var. Hepsini tek tabloda gör, sonra tek tek deneyeceğiz:

#Süslü parantez: JSX'in içinde JavaScript

App.tsx'i şöyle değiştir:

1export default function App() {2    const oyuncu = "Deniz"3    const sampiyonSayisi = 64 5    return (6        <main>7            <h1>Şampiyon Kartları</h1>8            <p className="ozet">{oyuncu}, koleksiyonunda {sampiyonSayisi} şampiyon var</p>9        </main>10    )11}

localhost:5173

JSX'in içinde { } açtığın her yer bir JavaScript penceresidir: içindeki ifade hesaplanır ve sonucu oraya yazılır. Şablon metindeki ${ } ile aynı fikir. İçine değer üreten her şeyi yazabilirsin: {oyuncu}, {sampiyonSayisi + 1}, {oyuncu.toUpperCase()}, {sampiyonlar.length}. Değer üretmeyen satırları yazamazsın: {if (…) …} ya da {for (…) …} yazım hatasıdır; Vite [PARSE_ERROR] Unexpected token der. Onların JSX'teki karşılıklarını bu dersin ilerisinde göreceksin.

{ } ile koyduğun metin, textContent gibi her zaman düz yazı olarak basılır. Bir oyuncu adına <script> yazmış olsa bile sayfada yalnız o harfleri görürsün; React metni hiçbir zaman etikete çevirmez. Ders 22'deki XSS korumasını kendiliğinden alırsın.

İki ayrıntı daha. Birden çok satırlık JSX'i return'den sonra parantez içine al; <main>'i return ile aynı satırda açmazsan bu parantez seni bir tuzaktan korur (Sık hatalar). Nitelik değeri sabit bir metinse tırnakla yazılır (className="ozet"), bir JavaScript değeriyse süslü parantezle (className={secilenSinif}); ikisi birden olmaz.

1export default function App() {2    const oyuncu = "Deniz"3    const favori = { isim: "Ahri", rol: "Büyücü" }4 5    return (6        <main>7            <h1>Şampiyon Kartları</h1>8            <p className="ozet">{oyuncu}, favorin: {favori}</p>9        </main>10    )11}

Uncaught Error: Objects are not valid as a React child (found: object with keys {isim, rol}). If you meant to render a collection of children, use an array instead.An error occurred in the <p> component. Consider adding an error boundary to your tree to customize error handling behavior.Visit https://react.dev/link/error-boundaries to learn more about error boundaries.

#Tek kök öğe

Şimdi bilerek bozalım. App.tsx'teki <main> ve </main> satırlarını sil, başlık ile paragraf yan yana kalsın:

1export default function App() {2    const oyuncu = "Deniz"3    const sampiyonSayisi = 64 5    return (6        <h1>Şampiyon Kartları</h1>7        <p className="ozet">{oyuncu}, koleksiyonunda {sampiyonSayisi} şampiyon var</p>8    )9}

Kaydettiğin anda tarayıcıda Vite'ın hata katmanı açılır:

localhost:5173

Aynı mesaj Vite'ın terminaline de düşer:

03:10:29 [vite] Internal server error: Transform failed with 1 error: [PARSE_ERROR] Adjacent JSX elements must be wrapped in an enclosing tag.   ╭─[ src/App.tsx:7:9 ]   │ 7 │         <p className="ozet">{oyuncu}, koleksiyonunda {sampiyonSayisi} şampiyon var</p>   │         ┬   │         ╰──   │   │ Help: Did you want a JSX fragment `<>...</>`?───╯   Plugin: vite:oxc  File: C:/kod/sampiyon-kartlari/src/App.tsx

Parça parça oku:

• [PARSE_ERROR]: dosya okunurken (ayrıştırılırken) çıkan bir yazım hatası; Ders 1'deki SyntaxError'ın Vite'taki adı. Kod hiç çalışmadı.
• Adjacent JSX elements must be wrapped in an enclosing tag: "yan yana JSX öğeleri, onları saran bir etiketin içine alınmalı".
• src/App.tsx:7:9: 7. satır, 9. sütun; yani ikinci öğe olan <p>'nin başı. Kutunun içindeki ┬ işareti de oranın altında.
• Help: Did you want a JSX fragment <>...</>?: "Bir JSX fragment'ı mı istedin?" Çözümü de söylüyor.

Kuralın sebebi yukarıdaki çeviride: her etiket bir fonksiyon çağrısı. İki kardeş öğeyi döndürmek return _jsx("h1", …) _jsx("p", …) yazmak gibi olurdu; bir fonksiyon iki değer döndüremez.

Düzeltmeden önce tsc'nin aynı hatayı nasıl söylediğine de bak. Bir Vite projesinde tip denetimi komutu npx tsc -b'dir (sebebini props bölümünde göreceksin). Vite'ın çalıştığı terminale dokunmadan + ile ikinci bir terminal aç:

PS C:\kod\sampiyon-kartlari> npx tsc -bsrc/App.tsx:6:9 - error TS2657: JSX expressions must have one parent element. 6         <h1>Şampiyon Kartları</h1>          ~~~~~~~~~~~~~~~~~~~~~~~~~~7         <p className="ozet">{oyuncu}, koleksiyonunda {sampiyonSayisi} şampiyon var</p>  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~  Found 1 error.

JSX expressions must have one parent element: "JSX ifadelerinin tek bir ebeveyn öğesi olmalı". ~~~ çizgisi iki satırın da altında; sorun ikisinin birlikteliği. VS Code da aynı yerin altını kırmızıyla çizer.

İki çözüm var. Ya öğeleri anlamlı bir kapsayıcıya koyarsın (biz <main> kullanmıştık), ya da sayfaya fazladan bir öğe eklemek istemiyorsan fragment kullanırsın:

1export default function App() {2    const oyuncu = "Deniz"3    const sampiyonSayisi = 64 5    return (6        <>7            <h1>Şampiyon Kartları</h1>8            <p className="ozet">{oyuncu}, koleksiyonunda {sampiyonSayisi} şampiyon var</p>9        </>10    )11}

<> ile </> arası, JSX açısından tek bir kök öğedir ama sayfaya hiçbir etiket eklemez. F12 → Elements'te bakarsan h1 ile p'nin doğrudan #root'un içinde durduğunu görürsün. Biz kartlar için ortak bir <main> istediğimizden <main>'e geri dön.

#className ve htmlFor

HTML'den alışkanlıkla class yazarsan ne olur? Paragraftaki className'i class yap ve kaydet. Sayfa değişmez, paragraf yine soluk renkte görünür. Ama bu "doğru" demek değil:

8            <p class="ozet">{oyuncu}, koleksiyonunda {sampiyonSayisi} şampiyon var</p>

Invalid DOM property `class`. Did you mean `className`?

PS C:\kod\sampiyon-kartlari> npx tsc -bsrc/App.tsx:8:16 - error TS2322: Type '{ children: (string | number)[]; class: string; }' is not assignable to type 'DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>'.  Property 'class' does not exist on type 'DetailedHTMLProps<HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>'. Did you mean 'className'? 8             <p class="ozet">{oyuncu}, koleksiyonunda {sampiyonSayisi} şampiyon var</p>                 ~~~~~  Found 1 error.

Neden böyle? JSX JavaScript'e çevriliyor ve class JavaScript'te sınıf tanımlamak için ayrılmış bir sözcük. Ders 25'te kart.className = "kart" yazmıştın; DOM da aynı adı kullanıyor. Bu kural birçok nitelikte geçerli: JSX'te nitelikler camelCase yazılır (tabIndex, maxLength). aria-… ve data-… ile başlayanlar ise HTML'deki gibi kalır.

#Her etiket kapanır

HTML'de <br>, <hr>, <img>, <input> gibi etiketlerin kapanışı yoktur. JSX'te her etiket kapanmak zorunda; içi boş olanlar /> ile kendini kapatır: <br />, <hr />, <input id="not" />. Kapatmazsan Vite dosyanın geri kalanını o etiketin içi sanır ve şaşırtıcı bir yerde hata verir:

6        <main>7            <h1>Şampiyon Kartları</h1>8            <br>9            <p className="ozet">{oyuncu}, koleksiyonunda {sampiyonSayisi} şampiyon var</p>10        </main>

03:11:53 [vite] Internal server error: Transform failed with 2 errors: [PARSE_ERROR] Expected corresponding JSX closing tag for 'br'.    ╭─[ src/App.tsx:10:11 ]    │  8 │             <br>    │              ─┬    │               ╰── Opened here    │ 10 │         </main>    │           ──┬─    │             ╰─── Expected `</br>`────╯ [PARSE_ERROR] Unexpected token. Did you mean `{'}'}` or `&rbrace;`?

#Bileşen: arayüzün yapı taşı

Sayfaya şampiyon kartları koyacağız. Her kartta aynı yapı var: harfli bir yuvarlak, isim, rol. Aynı JSX'i altı kez kopyalamak Ders 3'teki kendini tekrar etme kuralını çiğner; kartın görünüşünü değiştirmek isteyince altı yeri düzeltmen gerekir. Çözüm, kartı bir kez tarif edip istediğin kadar kullanmak: bir bileşen.

Bileşen, JSX döndüren bir fonksiyondur. App de öyleydi. src klasöründe yeni bir dosya aç, adını SampiyonKarti.tsx koy:

1export default function SampiyonKarti() {2    return (3        <article className="kart">4            <div className="harf">A</div>5            <h3>Ahri</h3>6            <p>Büyücü</p>7        </article>8    )9}

Sonra App.tsx'te onu içe aktar ve bir HTML etiketi gibi kullan:

1import SampiyonKarti from "./SampiyonKarti"2 3export default function App() {4    return (5        <main>6            <h1>Şampiyon Kartları</h1>7            <div className="kartlar">8                <SampiyonKarti />9                <SampiyonKarti />10                <SampiyonKarti />11            </div>12        </main>13    )14}

localhost:5173

<SampiyonKarti /> yazdığın her yerde React SampiyonKarti fonksiyonunu çağırır ve döndürdüğü JSX'i oraya koyar. İçe aktarırken dosya uzantısı yazmıyorsun ("./SampiyonKarti"); Vite ve TypeScript .tsx'i kendileri bulur.

Bileşen yazarken üç alışkanlık edin:

• Ad büyük harfle başlar. JSX küçük harfle başlayan her etiketi HTML etiketi sanar. Bu, Ders 16'daki PascalCase yazımı: SampiyonKarti, KartListesi.
• Her bileşen kendi dosyasında. Dosyanın adı bileşenin adıyla aynı olsun (SampiyonKarti.tsx). Aradığını bulmak kolaylaşır.
• export default. Dosyanın asıl bileşenini varsayılan dışa aktarma ile ver, içe aktaran da süslü parantezsiz alsın.

<sampiyonKarti /> is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements.The tag <sampiyonKarti> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.

PS C:\kod\sampiyon-kartlari> npx tsc -bsrc/App.tsx:1:1 - error TS6133: 'sampiyonKarti' is declared but its value is never read. 1 import sampiyonKarti from "./SampiyonKarti"  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ src/App.tsx:8:17 - error TS2339: Property 'sampiyonKarti' does not exist on type 'JSX.IntrinsicElements'. 8                 <sampiyonKarti />                  ~~~~~~~~~~~~~~~~~...Found 4 errors.

[vite] SyntaxError: The requested module '/src/SampiyonKarti.tsx?t=1791774687932' does not provide an export named 'default'[vite] Failed to reload /src/App.tsx. This could be due to syntax errors or importing non-existent modules. (see errors above)

PS C:\kod\sampiyon-kartlari> npx tsc -bsrc/App.tsx:1:8 - error TS2613: Module '"C:/kod/sampiyon-kartlari/src/SampiyonKarti"' has no default export. Did you mean to use 'import { SampiyonKarti } from "C:/kod/sampiyon-kartlari/src/SampiyonKarti"' instead? 1 import SampiyonKarti from "./SampiyonKarti"         ~~~~~~~~~~~~~  Found 1 error.

#Props: bileşene veri vermek

Üç kartın üçü de Ahri. Bileşen her seferinde aynı sabit metni döndürdüğü için başka türlü olamaz. Ders 3'te aynı sorunu fonksiyonlarda çözmüştün: değişen kısmı parametre yaptın. Bileşenlerde parametrelere props denir.

Önce kartın hangi bilgileri alacağını bir tiple söyle, sonra o bilgileri kullan. SampiyonKarti.tsx'i baştan yaz:

1type SampiyonKartiProps = {2    isim: string3    rol: string4    zorluk: number5}6 7export default function SampiyonKarti({ isim, rol, zorluk }: SampiyonKartiProps) {8    return (9        <article className="kart">10            <div className="harf">{isim[0]}</div>11            <h3>{isim}</h3>12            <p>{rol}</p>13            <p>Zorluk {zorluk}/3</p>14        </article>15    )16}

App.tsx'te de her karta kendi bilgilerini ver:

1import SampiyonKarti from "./SampiyonKarti"2 3export default function App() {4    return (5        <main>6            <h1>Şampiyon Kartları</h1>7            <div className="kartlar">8                <SampiyonKarti isim="Ahri" rol="Büyücü" zorluk={2} />9                <SampiyonKarti isim="Garen" rol="Dövüşçü" zorluk={1} />10                <SampiyonKarti isim="Yasuo" rol="Dövüşçü" zorluk={3} />11            </div>12        </main>13    )14}

localhost:5173

Ne oldu, adım adım:

1. <SampiyonKarti isim="Ahri" rol="Büyücü" zorluk={2} /> yazınca React nitelikleri tek bir objede toplar: { isim: "Ahri", rol: "Büyücü", zorluk: 2 }. Bu objenin adı props.
2. React SampiyonKarti'yi bu objeyle çağırır. Bileşen props'u tek parametre olarak alır.
3. Parametredeki { isim, rol, zorluk }, Ders 12'deki parçalama: objenin alanlarını aynı adlı değişkenlere açar. props.isim yazmak yerine doğrudan isim yazarsın.
4. : SampiyonKartiProps Ders 39'daki tip notu: "bu obje bu şekilde olmalı". Tipe Props ekiyle ad vermek React dünyasında yaygın bir alışkanlık.
5. {isim[0]} metnin ilk harfi (Ders 9): Ahri için A.

Tırnak ile süslü parantezin farkına dikkat et: isim="Ahri" bir metin verir. Metin dışındaki her değer süslü parantezle verilir: zorluk={2} bir sayı, ucretsiz={true} bir boolean, sampiyonlar={liste} bir dizi. zorluk="2" yazarsan bileşene "2" metni gider. Bu yanlışı kimin yakaladığına bak:

8                <SampiyonKarti isim="Ahri" rol="Büyücü" zorluk="2" />

PS C:\kod\sampiyon-kartlari> npx tsc -bsrc/App.tsx:8:57 - error TS2322: Type 'string' is not assignable to type 'number'. 8                 <SampiyonKarti isim="Ahri" rol="Büyücü" zorluk="2" />                                                          ~~~~~~   src/SampiyonKarti.tsx:4:5    4     zorluk: number          ~~~~~~    The expected type comes from property 'zorluk' which is declared here on type 'IntrinsicAttributes & SampiyonKartiProps'  Found 1 error.

Bir prop'u hiç vermezsen de tsc yakalar. Garen'in kartından rol="Dövüşçü"'yü silersen: error TS2741: Property 'rol' is missing in type '{ isim: string; zorluk: number; }' but required in type 'SampiyonKartiProps'. Sayfada ise Garen'in rol satırı sessizce boş kalır. Tipte olmayan bir prop verirsen (seviye={18}) yine TS2322 gelir; zincirin en içindeki satır: Property 'seviye' does not exist on type 'IntrinsicAttributes & SampiyonKartiProps'.

Props bir yöne akar: yukarıdaki bileşen aşağıdakine verir. SampiyonKarti kendi props'unu değiştirmez; isim = "Lux" gibi bir satır, React'in "bileşen aynı props'la hep aynı sonucu verir" varsayımını bozar. Ekranda değişmesi gereken veri için props değil state kullanılır (Ders 23'teki durumun React'teki hâli); o, Ders 41'in konusu.

#Liste çizmek ve key

Kartları elle yazmak yerine veriden üretelim. Gerçek bir uygulamada bu veri bir API'den gelir (Ders 42); şimdilik bir dosyada tutuyoruz. src/veri.ts dosyasını oluştur (JSX yok, o yüzden .ts):

1export type Sampiyon = {2    id: number3    isim: string4    rol: string5    zorluk: number6    ucretsiz: boolean7}8 9export const sampiyonlar: Sampiyon[] = [10    { id: 1, isim: "Ahri", rol: "Büyücü", zorluk: 2, ucretsiz: true },11    { id: 2, isim: "Garen", rol: "Dövüşçü", zorluk: 1, ucretsiz: false },12    { id: 3, isim: "Jinx", rol: "Nişancı", zorluk: 2, ucretsiz: true },13    { id: 4, isim: "Lux", rol: "Büyücü", zorluk: 1, ucretsiz: false },14    { id: 5, isim: "Yasuo", rol: "Dövüşçü", zorluk: 3, ucretsiz: false },15    { id: 6, isim: "Teemo", rol: "Nişancı", zorluk: 1, ucretsiz: false },16]

Her şampiyonun bir id'si var; veritabanından gelen satırlardaki birincil anahtar gibi. Birazdan neden önemli olduğunu göreceksin.

Diziyi kartlara çevirmek için Ders 11'deki map'i kullan. Bu kez her eleman bir metne değil, bir JSX öğesine dönüşüyor:

1import SampiyonKarti from "./SampiyonKarti"2import { sampiyonlar } from "./veri"3 4export default function App() {5    return (6        <main>7            <h1>Şampiyon Kartları</h1>8            <p className="ozet">Koleksiyonunda {sampiyonlar.length} şampiyon var</p>9            <div className="kartlar">10                {sampiyonlar.map((s) => (11                    <SampiyonKarti key={s.id} isim={s.isim} rol={s.rol} zorluk={s.zorluk} />12                ))}13            </div>14        </main>15    )16}

map altı elemanlı bir JSX dizisi döndürür; süslü parantez içindeki bir diziyi React elemanlarını sırayla yan yana çizerek gösterir. Ok fonksiyonunun gövdesindeki normal parantez ( … ), "bu JSX'i döndür" demek (Ders 10); süslü parantez kullansaydın return yazman gerekirdi. Veriye yedinci bir şampiyon eklersen kart kendiliğinden çıkar; App.tsx'e dokunmazsın.

#key neden şart?

key={s.id} kısmını sil ve kaydet. Sayfa aynı görünür, ama konsolda kırmızı bir satır belirir:

Each child in a list should have a unique "key" prop. Check the render method of `App`. See https://react.dev/link/warning-keys for more information.

"Bir listedeki her çocuğun benzersiz bir key prop'u olmalı. App'in çizim fonksiyonuna bak." React listeyi her yeniden çizdiğinde eski listeyle yenisini karşılaştırır ve hangi kartın hangisi olduğunu key'e bakarak anlar. key yoksa elinde yalnız sıra numarası kalır; liste değişince yanlış kartı yanlış veriyle eşleştirebilir.

Şimdilik kartların içinde değişen bir şey olmadığı için iki yol da ekranda aynı sonucu verir; sağdaki yalnız fazladan iş yapar. Liste öğelerinin kendi hâli olunca (örneğin içine not yazılmış bir kutu) fark büyür: sıra numarasıyla eşleştirme, Garen'in satırına yazılmış notu listeden Garen çıkınca başka bir satırda bırakır. Bunu Ders 41'de kendi gözünle göreceksin.

key seçerken:

• Verideki kimliği kullan: id alanı en iyisi. Veritabanından gelen her satırın zaten bir birincil anahtarı var.
• Benzersiz olsun. Aynı listedeki iki öğenin key'i aynı olamaz (aşağıdaki hata kartı). Farklı listelerde aynı key kullanılabilir.
• Sabit olsun. key={Math.random()} her çizimde yeni bir değer üretir; React her seferinde bütün kartları yeni sanar.
• Sıra numarası son çare. map((s, i) => … key={i}) uyarıyı susturur ama yukarıdaki şekildeki sorunu çözmez. Yalnız hiç sıralanmayan, araya ekleme ya da silme yapılmayan listelerde kabul edilebilir.
• key en dıştaki öğeye yazılır: map'in döndürdüğü öğeye. SampiyonKarti'nin içindeki <article>'a yazmak işe yaramaz.

Encountered two children with the same key, `Büyücü`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.

#Listeyi kendi bileşenine taşı

Kart listesi kendi başına bir parça: başka bir sayfada da işine yarayabilir. Onu ayrı bir bileşene al. src/KartListesi.tsx:

1import SampiyonKarti from "./SampiyonKarti"2import type { Sampiyon } from "./veri"3 4type KartListesiProps = {5    sampiyonlar: Sampiyon[]6}7 8export default function KartListesi({ sampiyonlar }: KartListesiProps) {9    return (10        <div className="kartlar">11            {sampiyonlar.map((s) => (12                <SampiyonKarti13                    key={s.id}14                    isim={s.isim}15                    rol={s.rol}16                    zorluk={s.zorluk}17                />18            ))}19        </div>20    )21}

Props'un bir dizi olabileceğine dikkat et: sampiyonlar: Sampiyon[]. Satır uzayınca props'u alt alta yazmak okunurluğu artırır. İkinci satırdaki import type, yalnız bir tip aldığını söyler. Vite tipleri silerken bu satırı da tamamen siler; sıradan import { Sampiyon } yazarsan ne olduğunu aşağıdaki kartta göreceksin.

App.tsx de kısaldı:

1import KartListesi from "./KartListesi"2import { sampiyonlar } from "./veri"3 4export default function App() {5    return (6        <main>7            <h1>Şampiyon Kartları</h1>8            <p className="ozet">Koleksiyonunda {sampiyonlar.length} şampiyon var</p>9            <KartListesi sampiyonlar={sampiyonlar} />10        </main>11    )12}

Uncaught SyntaxError: The requested module '/src/veri.ts' does not provide an export named 'Sampiyon'

PS C:\kod\sampiyon-kartlari> npx tsc -bsrc/KartListesi.tsx:2:10 - error TS1484: 'Sampiyon' is a type and must be imported using a type-only import when 'verbatimModuleSyntax' is enabled. 2 import { Sampiyon } from "./veri"           ~~~~~~~~  Found 1 error.

Artık sayfan üç katlı bir ağaç: App, KartListesi'ni; KartListesi de her şampiyon için bir SampiyonKarti çiziyor. Veri yukarıdan aşağı props'la iniyor:

#Koşullu çizim

Bazı parçalar yalnız belli durumlarda görünmeli: bu hafta ücretsiz olan şampiyonların kartında bir rozet, liste boşsa bir uyarı. JSX'in içine if yazamadığını gördün. React'te koşul üç yolla kurulur.

#&&: ya göster ya hiçbir şey

Önce JavaScript'in && işaretinin küçük bir sırrını gör. Ders 3'te iki koşulu birleştirmek için kullanmıştın; aslında && her zaman true ya da false döndürmez. Soldaki değer yanlış sayılıyorsa onu, değilse sağdakini döndürür. C:\kod\ogren\ders40.js dosyasında dene:

1console.log(true && "rozet")2console.log(false && "rozet")3console.log(0 && "rozet")4console.log(3 && "rozet")

rozetfalse0rozet

React false, true, null ve undefined'ı hiç çizmez. Bu sayede {kosul && <Oge />} "koşul doğruysa öğeyi göster, değilse hiçbir şey" anlamına gelir. SampiyonKarti'ye isteğe bağlı bir ucretsiz prop'u ekle:

1type SampiyonKartiProps = {2    isim: string3    rol: string4    zorluk: number5    ucretsiz?: boolean6}7 8export default function SampiyonKarti({ isim, rol, zorluk, ucretsiz }: SampiyonKartiProps) {9    return (10        <article className={ucretsiz ? "kart ucretsiz" : "kart"}>11            {ucretsiz && <span className="rozet">Ücretsiz</span>}12            <div className="harf">{isim[0]}</div>13            <h3>{isim}</h3>14            <p>{rol}</p>15            <p>Zorluk {zorluk}/3</p>16        </article>17    )18}

KartListesi.tsx'te de karta bilgiyi ver: zorluk={s.zorluk} satırının altına ucretsiz={s.ucretsiz} ekle. ucretsiz?: isteğe bağlı olduğu için onu vermeyen bir kart (<SampiyonKarti isim="Lux" rol="Büyücü" zorluk={1} />) da hatasız çalışır; o kartta ucretsiz undefined olur ve rozet çıkmaz.

#Üçlü ifade: ya şu ya bu

10. satırdaki ucretsiz ? "kart ucretsiz" : "kart" bir üçlü ifade: koşul ? doğruysa : yanlışsa. Ders 25'teki favori ? "★" : "☆" satırında görmüştün. Bir if/else'in değer üreten kısa hâli olduğu için JSX'in içine yazılabilir. Burada ücretsiz kartlar kart ucretsiz sınıfını alıyor ve CSS onlara yeşil bir kenarlık veriyor. İki ayrı öğe arasında da seçebilirsin: {zorluk === 3 ? <strong>Zor</strong> : <span>Normal</span>}.

#Erken return: bambaşka bir görünüm

Liste boşsa boş bir ızgara yerine bir mesaj göstermek istiyorsun. Bu durumda bileşenin bütün görünümü değişiyor; en temiz yol, Ders 6'daki erken çıkış. KartListesi'nin başına ekle:

8export default function KartListesi({ sampiyonlar }: KartListesiProps) {9    if (sampiyonlar.length === 0) {10        return <p className="bos">Gösterilecek şampiyon yok.</p>11    }12 13    return (

Bileşen bir fonksiyon olduğu için içinde istediğin JavaScript'i yazabilirsin; JSX'te yasak olan if burada serbest. Yeter ki her yol bir JSX (ya da hiçbir şey çizmemek için null) döndürsün.

Şimdi App'e bu hafta ücretsiz olanlardan oluşan ikinci bir liste ekle. Aynı KartListesi bileşeni, farklı props'la:

1import KartListesi from "./KartListesi"2import { sampiyonlar } from "./veri"3 4export default function App() {5    const ucretsizler = sampiyonlar.filter((s) => s.ucretsiz)6 7    return (8        <main>9            <h1>Şampiyon Kartları</h1>10            <p className="ozet">Koleksiyonunda {sampiyonlar.length} şampiyon var</p>11            <KartListesi sampiyonlar={sampiyonlar} />12            <h2>Bu hafta ücretsiz</h2>13            <KartListesi sampiyonlar={ucretsizler} />14        </main>15    )16}

localhost:5173

Sınırı dene: veri.ts'te Ahri ile Jinx'in ucretsiz değerini false yap. Üstteki listede rozet kalmaz, "Bu hafta ücretsiz" başlığının altında da kesik çizgili kutuda Gösterilecek şampiyon yok. yazar. Sonra iki değeri true'ya geri al.

Sık hataEkranda tek başına bir 0 çıkıyor

Ne zaman çıkar? &&'nin solunda bir sayı varken. Diyelim ki başlığın altına "bu hafta kaç şampiyon ücretsiz" satırını, yalnız ücretsiz şampiyon varsa göstermek istedin ve App.tsx'te <h1>'in hemen altına şu satırı ekledin:

9            <h1>Şampiyon Kartları</h1>10            {ucretsizler.length && <p className="ozet">Bu hafta {ucretsizler.length} şampiyon ücretsiz</p>}

Ücretsiz şampiyon varken doğru çalışır: başlığın altında "Bu hafta 2 şampiyon ücretsiz" yazar. Ama Ahri ile Jinx'in ucretsiz değerini yine false yaparsan başlığın altında tek başına bir sıfır belirir:

localhost:5173

Hiç ücretsiz şampiyon yokken ucretsizler.length 0 olur; yukarıdaki denemede gördüğün gibi 0 && … sonucu da 0'dır. React false'u çizmez ama 0 bir sayıdır ve sayıları çizer. Hata mesajı yoktur, konsol da susar; ancak gözünle yakalarsın.

Nasıl düzelir? &&'nin soluna gerçek bir boolean koy: {ucretsizler.length > 0 && …}. Kural: &&'nin solunda bir sayı görürsen karşılaştırmaya çevir. Denemeden sonra Ahri ile Jinx'i yine true yap; düzeltilmiş satırı istersen bırak.

Üç yolu ne zaman seçeceğin:

#React geliştirici araçları

Sayfa büyüdükçe "bu kart hangi bileşenden geliyor, eline hangi props geçti?" sorusu sık sorulur. F12 → Elements sana yalnız son HTML'i gösterir (article, div, h3); bileşenleri göremezsin. React'in bunun için kendi aracı var. Konsolu açtığında React de onu hatırlatıyor:

Download the React DevTools for a better development experience: https://react.dev/link/react-devtools

React Developer Tools, React ekibinin resmî tarayıcı eklentisi. Kurulumu sen yapacaksın (arayüz değişmiş olabilir; adımların özü aynı kalır):

1. Bileşen ağacı: Elements'teki HTML ağacı yerine senin bileşenlerin: App, iki KartListesi, onların altında SampiyonKarti'ler, yanlarında key'leri. Ağaçta bir bileşenin üstüne gelince sayfadaki karşılığı vurgulanır.
2. Props: Ağaçta bir bileşen seçince sağda aldığı props görünür. rendered by kısmı onu kimin çizdiğini söyler. Değerler düzenlenebilir: Garen'in zorluk değerinin üstüne tıkla, 3 yaz ve Enter'a bas; sayfadaki kart anında "Zorluk 3/3" olur. true/false değerlerin yanında bir onay kutusu vardır, tıklamak yeter. Değişiklik geçicidir; sayfayı yenileyince dosyadaki değere döner.
3. Arama: Büyük bir ağaçta bileşeni adıyla bulursun: Sampiyon yaz.

Bir kart yanlış görünüyorsa önce ona bak: props doğruysa sorun bileşenin JSX'inde, yanlışsa veriyi veren üst bileşende. Profiler sekmesi hangi bileşenin ne kadar sürede çizildiğini ölçer; performansla uğraşırken işine yarar, şimdilik gerek yok.

#Sık hatalar

Bileşen, JSX ve props hataları ilgili bölümlerde. Burada projeyi çalıştırırken karşına çıkabilecekler var. Bir hatayla karşılaşınca bütün derslerin hatalarını toplayan hata rehberine de bakabilirsin.

PS C:\kod> npm run devnpm error code ENOENTnpm error syscall opennpm error path C:\kod\package.jsonnpm error errno -4058npm error enoent Could not read package.json: Error: ENOENT: no such file or directory, open 'C:\kod\package.json'npm error enoent This is related to npm not being able to find a file.npm error enoentnpm error A complete log of this run can be found in: C:\Users\Deniz\AppData\Local\npm-cache\_logs\2026-10-12T00_13_26_846Z-debug-0.log

PS C:\kod\sampiyon-kartlari> npm run dev > sampiyon-kartlari@0.0.0 dev> vite 'vite' is not recognized as an internal or external command,operable program or batch file.

1export default function App() {2    return3        <main>4            <h1>Şampiyon Kartları</h1>5        </main>6}

PS C:\kod\sampiyon-kartlari> npx tsc -bsrc/main.tsx:8:6 - error TS2786: 'App' cannot be used as a JSX component.  Its type '() => void' is not a valid JSX element type.    Type '() => void' is not assignable to type '(props: any) => ReactNode | Promise<ReactNode>'.      Type 'void' is not assignable to type 'ReactNode | Promise<ReactNode>'. 8     <App />       ~~~  Found 1 error.

#Görevler

Görevleri aynı projede yap. Her görevin bileşenini kendi dosyasına yaz, denemek için App.tsx'te </main>'in hemen üstüne ekle. Bir görev bitince iki denetim yap: tarayıcıda konsol temiz mi (kırmızı satır yok), ikinci terminalde npx tsc -b sessiz mi? İkisi de temizse görev bitmiştir.

1export default function Profil() {2    return (3        <h2 class="baslik">Oyuncu Profili</h2>4        <p>Seviye 30<br>Rütbe: Altın</p>5        <hr>6        <label for="not">Maç notu</label>7        <input id="not" placeholder="Bugün ne öğrendin?">8    )9}

1export default function Profil() {2    return (3        <section>4            <h2 className="baslik">Oyuncu Profili</h2>5            <p>Seviye 30<br />Rütbe: Altın</p>6            <hr />7            <label htmlFor="not">Maç notu</label>8            <input id="not" placeholder="Bugün ne öğrendin?" />9        </section>10    )11}

Oyuncu Profili Seviye 30Rütbe: Altın Maç notu

1type EsyaKartiProps = {2    ad: string3    fiyat: number4    etki: string5}6 7export default function EsyaKarti({ ad, fiyat, etki }: EsyaKartiProps) {8    return (9        <article className="kart">10            <h3>{ad}</h3>11            <p>{fiyat} altın</p>12            <p>{etki}</p>13        </article>14    )15}

15            <div className="kartlar">16                <EsyaKarti ad="Uzun Kılıç" fiyat={350} etki="+10 saldırı gücü" />17                <EsyaKarti ad="Yakut Kristali" fiyat={400} etki="+150 can" />18                <EsyaKarti ad="Büyü Kitabı" fiyat={435} etki="+20 yetenek gücü" />19            </div>

1export type Esya = {2    id: number3    ad: string4    fiyat: number5    stokta: boolean6}7 8export const esyalar: Esya[] = [9    { id: 1, ad: "Uzun Kılıç", fiyat: 350, stokta: true },10    { id: 2, ad: "Yakut Kristali", fiyat: 400, stokta: false },11    { id: 3, ad: "Görüş Totemi", fiyat: 0, stokta: true },12    { id: 4, ad: "Sonsuzluk Kılıcı", fiyat: 3450, stokta: true },13]

Uzun Kılıç: 350 altınYakut Kristali: 400 altın (Tükendi)Görüş Totemi: BedavaSonsuzluk Kılıcı: 3450 altın

1import type { Esya } from "./esyalar"2 3type DukkanProps = {4    esyalar: Esya[]5}6 7export default function Dukkan({ esyalar }: DukkanProps) {8    return (9        <ul>10            {esyalar.map((e) => (11                <li key={e.id}>12                    {e.ad}: {e.fiyat === 0 ? "Bedava" : e.fiyat + " altın"}13                    {!e.stokta && <strong> (Tükendi)</strong>}14                </li>15            ))}16        </ul>17    )18}

1<Dukkan esyalar={esyalar} altin={350} />2<Dukkan esyalar={esyalar} altin={349} />3<Dukkan esyalar={esyalar} altin={0} />4<Dukkan esyalar={esyalar.filter((e) => e.fiyat > 0)} altin={0} />5<Dukkan esyalar={[]} altin={5000} />

350 altınla 2 eşya alabilirsinUzun Kılıç: 350 altınGörüş Totemi: Bedava349 altınla 1 eşya alabilirsinGörüş Totemi: Bedava0 altınla 1 eşya alabilirsinGörüş Totemi: BedavaAltının hiçbir eşyaya yetmiyor.Dükkân boş.

1import type { Esya } from "./esyalar"2 3type DukkanProps = {4    esyalar: Esya[]5    altin: number6}7 8export default function Dukkan({ esyalar, altin }: DukkanProps) {9    if (esyalar.length === 0) {10        return <p className="bos">Dükkân boş.</p>11    }12 13    const alinabilir = esyalar.filter((e) => e.stokta && e.fiyat <= altin)14 15    if (alinabilir.length === 0) {16        return <p className="bos">Altının hiçbir eşyaya yetmiyor.</p>17    }18 19    return (20        <section>21            <h3>{altin} altınla {alinabilir.length} eşya alabilirsin</h3>22            <ul>23                {alinabilir.map((e) => (24                    <li key={e.id}>25                        {e.ad}: {e.fiyat === 0 ? "Bedava" : e.fiyat + " altın"}26                    </li>27                ))}28            </ul>29        </section>30    )31}

Görev 5

Maç geçmişi

Son maçlarını gösteren iki bileşen yaz. Veri src/maclar.ts'te:

1export type Mac = {2    id: number3    sampiyon: string4    sonuc: "zafer" | "yenilgi"5    kill: number6    olum: number7    asist: number8}9 10export const maclar: Mac[] = [11    { id: 101, sampiyon: "Ahri", sonuc: "zafer", kill: 8, olum: 2, asist: 11 },12    { id: 102, sampiyon: "Garen", sonuc: "yenilgi", kill: 3, olum: 6, asist: 4 },13    { id: 103, sampiyon: "Jinx", sonuc: "zafer", kill: 12, olum: 0, asist: 7 },14]

• MacSatiri (src/MacSatiri.tsx): tek bir prop alsın, mac (tipi Mac). Bir <li> döndürsün: kalın harfle Zafer ya da Yenilgi, ardından · Ahri · 8/2/11. <li>'nin sınıfı maçın sonucu olsun (zafer ya da yenilgi). Hiç ölmediği maçta (olum 0) sonuna Ölümsüz rozeti eklensin.
• MacGecmisi (src/MacGecmisi.tsx): maclar prop'u alsın. Liste boşsa yalnız Henüz maç yok. yazsın. Değilse önce <h3> ile Son 3 maç: 2 zafer, sonra maclar sınıflı bir <ul> içinde her maç için bir MacSatiri.

Renkler için index.css'in sonuna ekle:

1.maclar {2    padding: 0;3    list-style: none;4}5 6.maclar li {7    margin-bottom: 8px;8    padding: 10px 12px;9    border-left: 4px solid;10    border-radius: 8px;11    background: #211e2e;12}13 14.maclar .zafer {15    border-color: #2f8f62;16}17 18.maclar .yenilgi {19    border-color: #b8434e;20}21 22.rozet-kucuk {23    margin-left: 8px;24    padding: 1px 6px;25    border-radius: 999px;26    background: #1f6f4a;27    font-size: 12px;28}

Üç durumla dene:

1<MacGecmisi maclar={maclar} />2<MacGecmisi maclar={[]} />3<MacGecmisi maclar={maclar.filter((m) => m.sonuc === "yenilgi")} />

localhost:5173

Son adım, React Developer Tools'u kurduysan: ⚛ Components sekmesinde üç MacGecmisi'yi bul ve maclar prop'larındaki eleman sayısını karşılaştır. Sonra Jinx'in MacSatiri'sini seç, mac prop'unu aç ve olum değerini 1 yap: Ölümsüz rozeti kaybolmalı.

İpucu 1

MacSatiri'nin props tipi: type MacSatiriProps = { mac: Mac }. Bir prop'un kendisi bir obje olabilir; içeride mac.sampiyon, mac.kill diye okursun. Mac tipini import type ile al.

İpucu 2

Sınıf için ayrı bir koşula gerek yok: className={mac.sonuc}. Metin için üçlü ifade: mac.sonuc === "zafer" ? "Zafer" : "Yenilgi". Rozet için {mac.olum === 0 && …}; mac.olum && … yazsaydın ne olurdu?

İpucu 3

Zafer sayısı: maclar.filter((m) => m.sonuc === "zafer").length. key hangi bileşene, hangi değerle? map'in döndürdüğü öğeye: <MacSatiri key={m.id} mac={m} />.

Çözümü göster

1import type { Mac } from "./maclar"2 3type MacSatiriProps = {4    mac: Mac5}6 7export default function MacSatiri({ mac }: MacSatiriProps) {8    return (9        <li className={mac.sonuc}>10            <strong>{mac.sonuc === "zafer" ? "Zafer" : "Yenilgi"}</strong>11            {" · "}{mac.sampiyon} · {mac.kill}/{mac.olum}/{mac.asist}12            {mac.olum === 0 && <span className="rozet-kucuk">Ölümsüz</span>}13        </li>14    )15}

1import MacSatiri from "./MacSatiri"2import type { Mac } from "./maclar"3 4type MacGecmisiProps = {5    maclar: Mac[]6}7 8export default function MacGecmisi({ maclar }: MacGecmisiProps) {9    if (maclar.length === 0) {10        return <p className="bos">Henüz maç yok.</p>11    }12 13    const zaferSayisi = maclar.filter((m) => m.sonuc === "zafer").length14 15    return (16        <section>17            <h3>Son {maclar.length} maç: {zaferSayisi} zafer</h3>18            <ul className="maclar">19                {maclar.map((m) => (20                    <MacSatiri key={m.id} mac={m} />21                ))}22            </ul>23        </section>24    )25}

{" · "}: satır sonundaki boşlukları JSX siler; </strong>'dan hemen sonra boşluk istediğimiz için onu bir metin olarak yazdık. Sınırlar: Jinx'in 0 ölümlü maçı rozeti sınar; mac.olum && … yazsaydın Jinx'in satırına 0 düşerdi. Yalnız yenilgilerden oluşan listede başlık 0 zafer der; bu kez sıfırı bilerek yazdırıyoruz, &&'nin solunda değil. sonuc alanı "zafer" | "yenilgi" birleşim tipi olduğu için sonuc: "galibiyet" gibi bir yazım hatasını tsc daha veri dosyasında yakalar (Ders 39).

Components sekmesinde maclar dizileri 3, 0 ve 1 elemanlı görünür. Jinx'in olum değerini 1 yapınca rozet kaybolur, 0'a döndürünce geri gelir: MacSatiri aldığı props'a göre çiziliyor. Sayfayı yenileyince her şey dosyadaki değerlere döner.

#Kendini sına

<p>{oyuncu} {seviye + 1}. seviyeye ulaştı ({"seviye"})</p>

export default function Baslik() {    return (        <h1 class="baslik">Takımım</h1>        <img src="/logo.svg" alt="">    )}

#Kayıt noktası

Commit'ten önce son denetim: tarayıcıda konsol temiz, ikinci terminalde npx tsc -b sessiz olmalı. Görevler için App.tsx'e eklediğin satırları istersen bırak, istersen sil; dosyaları kalsın. Vite, node_modules ve dist klasörlerini dışarıda tutan bir .gitignore'u projeye zaten koydu.

Sıradaki derste sayfan canlanıyor: state ile değişen veriyi tutacak, tıklamalara ve yazılan metne tepki veren bileşenler yazacaksın.