⚛️ React: Kaynağı Okumak

React: Kaynağı Okumak: React component'i, bir LEGO PARÇASI FABRİKASINDAKİ KALIP gibidir: bir kez `BugCard` kalıbını yazarsın, sonra her bug için o kalıptan bir kart basılır.

React component'i, bir LEGO PARÇASI FABRİKASINDAKİ KALIP gibidir: bir kez `BugCard` kalıbını yazarsın, sonra her bug için o kalıptan bir kart basılır. Kalıba dökülen "malzeme" prop'tur (bug'ın verisi), kalıbın çıktısı ise JSX'in ürettiği gerçek DOM. Neden bir tester React kaynağını okuyabilmeli? Çünkü `className={styles.card}` yazan bir satırın tarayıcıda `class="BugCard_card__x7f2a"` gibi hash'li bir class ürettiğini GÖREBİLİRSE, ona göre locate etmenin kırılacağını önceden anlar. Java analojisi: component ≈ bir metot/sınıf, prop ≈ parametre, state ≈ instance field, re-render ≈ metodu yeni argümanla yeniden çağırmak. QA bağlamında: JSX'i okuyup üretilecek DOM'u zihinde canlandıran tester, developer'la aynı dili konuşur ve doğru locator'ı baştan seçer. Bu grup boyunca BugCard, Modal, StatusBadge ve Toast component'lerinin her biri için birer Kaynak→DOM→Locator panosu göreceksin.

📜 F1. Component Nedir? Fonksiyon → JSX → DOM

Bir React component'i, gizemli bir "arayüz parçası" değil, SADE bir JavaScript fonksiyonudur — Java'da bir METODUN parametre alıp bir sonuç döndürmesi gibi. `function BugCard({ bug })` bir metottur, `bug` onun parametresidir, `return ... ` ise metodun döndürdüğü DEĞERDİR — ama bu değer gerçek DOM değil, bir JSX "TARİF"idir. Peki neden bu ayrımı bilmek işine yarar? Çünkü React bu tarifi ALIR ve gerçek DOM'a KENDİSİ dönüştürür (reconciliation) — component'in döndürdüğü şey ile tarayıcıdaki gerçek node ARASINDA bir dönüşüm adımı vardır. Java analojisi: bir metodun `return new Button()` demesi ile o Button nesnesinin GERÇEKTEN ekranda çizilmesi arasındaki fark gibi — nesneyi DÖNDÜRMEK ile onu EKRANA ÇİZMEK ayrı adımlardır. QA bağlamında: component'i bir fonksiyon olarak gören tester, "bu component yeniden çağrılırsa (re-render) DOM nasıl değişir?" sorusunu Java'daki "bu metot farklı argümanla çağrılırsa ne döner?" sorusuyla AYNI şekilde düşünür.

🎬 Component Bir Fonksiyondur: Prop İçeri Akar, JSX Dışarı Çıkar

function BugCard(props)

Bir React component'i, ilk bakışta gizemli görünse de aslında SADE bir JavaScript fonksiyonudur. Bu filmde `BugCard` component'inin React tarafından NASIL çağrıldığını, prop'un içeri NASIL aktığını ve dönen JSX'in gerçek DOM'a NASIL dönüştüğünü izleyeceksin.

Adım 1 — React motoru `BugCard`'ı ÇAĞIRIR: tıpkı Java'da bir metodu çağırmak gibi, `BugCard(props)` çalıştırılır. Prop (`{ bug: {...} }`) fonksiyona bir PARAMETRE gibi akar.

Adım 2 — Prop içeri akar ve fonksiyon GÖVDESİ çalışır: `bug.status`, `bug.title` gibi alanlar okunur, gerekiyorsa bir koşul (`{isOpen && ...}`) değerlendirilir — bu ana kadar hiçbir DOM değişikliği YOKTUR, sadece JS çalışıyor.

Adım 3 — Fonksiyon bir JSX DÖNER: bu JSX gerçek DOM DEĞİLDİR — sadece "böyle bir yapı istiyorum" diyen bir TARİFTİR (aslında arka planda `React.createElement(...)` çağrılarından oluşan sade bir JS nesnesidir).

Final — React bu TARİFİ gerçek DOM'a dönüştürür: React, döndürülen JSX'i önceki halle karşılaştırır (reconciliation) ve GERÇEK DOM node'larını oluşturur/günceller. İşte locator'ın gerçekte hedeflediği yer BURASIDIR — JSX değil, bu adımın SONUCU.

Bir developer "component'im `return ... ` dedi, yani DOM'a bir ` ` eklendi" diyor. Bu ifadedeki teknik eksik nedir?

Hiçbir eksik yok, return demek DOM'a eklemek demektir

return edilen şey gerçek DOM değil bir JSX tarifidir; React bunu ALIP reconciliation ile gerçek DOM'a dönüştürür — ayrı bir adımdır

Sadece class component'lerde bu doğrudur