Kendi başına yapabilir misin?

Hat 10'un kapanışında söz verilmişti: aynı görevi React'le yapacak, iki çerçeveyi aynı iş üstünde kıyaslayacaksın. Gün bugün. Başvuru arayüzünün dördüncü ve son inşası: Hat 08'de çerçevesiz, Hat 09'da strict TypeScript, Hat 10'da Angular — şimdi React + bu hatta gerekçeleriyle seçtiğin yığın. Davranış kullanıcı gözünde yine aynı kalacak; farkı sen göreceksin ve yazacaksın: görevin çıktısı koddan ibaret değil, bir sayfalık kıyas notu da var. Kural değişmedi: görevi derslere bakmadan tamamlayamıyorsan hat bitmemiştir.

01Bu hat sana ne kazandırmış olmalı

UI = f(state) modelini anlatmak; "sanal DOM daha hızlıdır" efsanesini düzeltmek (render ≠ commit); kütüphane/çerçeve ayrımını ve seçim tablosunu gerekçelendirmek; JSX'in jsx() çağrısına indiğini bilmek.
State'i snapshot modeliyle okumak: her render yeni çağrı, batching, fonksiyonel güncelleme kararı; Object.is sözleşmesi ve değişmez güncelleme kalıpları; lifting + tek doğruluk kaynağı.
Effect'i "React dışı sistemle senkron" olarak kurmak: bağımlılık = beyan, stale closure'ı teşhis, kur-yık temizliği, StrictMode sınavını kapatmadan geçmek; "bu iş hangi olayın sonucu?" turnusolu.
Formun elle iskeletini kurmak (controlled/uncontrolled kararı, sayı tuzağı, touched, çift gönderim kilidi) ve ölçek büyüyünce RHF + zod'a taşımak — şema = tek doğruluk kaynağı, sınırda safeParse.
Listeyi key = kimlik disipliniyle çizmek; key=index kaymasını göstermek; key ile bilinçli remount; dört durumlu ekranı ayırt edici birleşimle kurmak (boş ≠ yükleniyor).
İkinci raf hook'ları yerinde kullanmak: useRef'in iki yüzü, useMemo/useCallback + ölçmeden sarmalama, useReducer geçiş disiplini.
Custom hook tasarlamak: reaktif girdi sözleşmesi, dönüş biçimi, dışa verilen API'nin kararlılığı, useSyncExternalStore; üç tekrar ölçüsü.
Context'i doğru yerde kullanmak: önce bileşim, varsayılan değer tuzağı, context + reducer kalıbı, value/bölme disiplini; "context DI değildir".
Durum yönetimi merdivenini gerekçeyle çıkmak; Zustand selector'ı, Redux Toolkit (createSlice + immer) ve NgRx-RTK köprüsünü kurmak; "her şey store'a girmez".
Sunucu durumunu ayrı tür olarak yönetmek: TanStack Query — queryKey disiplini, staleTime/gcTime, invalidation, optimistic update kavramı; tek kapılı istek sarmalayıcısı.
React Router'la adres kurmak: iç içe rota + Outlet, parametre savunması, ekran durumu URL'de, korumalı rota ("koruma UX, yetki API'de"), lazy rota.
Performansı süreç olarak yürütmek: render/yük ayrımı, Profiler kanıtı, memo'suz memo desenleri, transition/deferred, paket analizi.
Davranış testi yazmak: getByRole önceliği, userEvent, MSW ile ağ, renderHook + sahte zamanlayıcı; kırılgan testten kaçınmak.
Ekosistemi haritalamak: Next.js/SSR-SSG-ISR ve RSC kavramları, Angular/React/Vue kıyası, kütüphane seçme kası.

02Görev — Arayüzü React'e taşı ve kıyasla

Hat 10 yeterliliğinde kurduğun Angular uygulamasının birebir davranış eşini React'le kur: liste, arama (iptalli), beş ekran durumu, kayıt ekleme, detay, korumalı bölüm, klavye erişilebilirliği. Kurulum gerçek: Vite react-ts şablonu (ya da StackBlitz karşılığı), strict TypeScript. Angular sürümü açık dursun — son bölümde yan yana bakacaksın.

Bölüm	Yapılacak
1. Kurulum	Vite `react-ts`; kökte `QueryClientProvider` + `RouterProvider` + `OturumSaglayici` zinciri. Tek kapılı `apiIstek` sarmalayıcısı; sahte API olarak 8. hattaki sunucun ya da gecikmeli sahte servis. DTO'lar zod şemasıyla sınırda doğrulanır (`safeParse`) — `as` ile tip iddiası yasak.
2. Bileşen ağacı	En az: liste sayfası (akıllı), `BasvuruKarti` (sunumsal — yalnız props, callback prop'la olay yukarı; hiçbir context/store okumaz), arama kutusu, durum rozeti. Listede key = kayıt kimliği; dört durumlu ekran ayırt edici birleşimle, boş durum ayrı tasarlanmış.
3. İstemci durumu	Merdiven kanıtla kurulur: filtre/sıralama URL'de (`useSearchParams`), oturum context + reducer kalıbında (fırlatan hook, state/dispatch ayrı context), panel/taslak durumu yerel. Store bilinçli olarak yok — kıyas notunda "hangi belirti beni store'a çıkarırdı?" sorusunu cevapla.
4. Veri katmanı	TanStack Query: liste `["basvurular", filtre]` anahtarıyla, detay `["basvuru", id]`; `staleTime` kararı yazılı gerekçeyle. Kayıt ekleme `useMutation` + `invalidateQueries`; düğme `isPending` ile kilitli. Elle `useEffect` + fetch hiçbir bileşende yok.
5. Rotalar	`createBrowserRouter`: kabuk + `Outlet`, `index` → liste, `basvurular/:id` → detay (`Number` savunması; bozuk id → 404), joker 404, `errorElement`. "Raporlar" bölümü `lazy` + `Suspense`; `RotaKoruma` düzen rotası oturum context'iyle — girişten sonra `state.nereden` ile geri dönüş.
6. Form	Yeni başvuru formu RHF + zod: `zodResolver`, `mode: "onTouched"`, en az bir `coerce` ve bir `refine` kuralı; hatalar `role="alert"` + `aria-describedby`; sahte 422'yi `setError` ile alana yaz; `isSubmitting` kilidi.
7. Arama	Arama metni URL'de; sorguya girmeden önce geciktirme kararını gerekçeyle ver: ağ maliyeti → `useGecikmisDeger` (debounce), CPU süzmesi → `useDeferredValue`. Hızlı filtre değişiminde eski isteğin iptalini Network sekmesinde göster — Query'nin signal'i işinde.
8. Performans + test	Profiler'la bir gerçek sorun bul ve mimariyle çöz (state'i aşağı it ya da children ile geçir) — önce/sonra kaydını sakla. Test: form için iki davranış testi (boş gönderim hatası, başarılı gönderim), liste için MSW ile başarı + 500 testi, `useGecikmisDeger` için sahte zamanlayıcılı `renderHook` testi.
9. Doğrulama + kıyas notu	Kabul turu: beş durum, arama iptali, F5 her rotada, klavye turu, konsol temiz. Sonra bir sayfalık kıyas notu: aynı özellik iki çerçevede — dosya yapısı, satır dengesi, "kutudan gelen vs seçilen", reaktivite farkı (zone/signals vs render + Object.is), hangi projede hangisini önerirsin. Bu not, mülakatın "neden X?" sorusunun senin kanıtın.

Kabul ölçütü: davranış Angular sürümüyle birebir; hiçbir bileşende elle fetch effect'i yok; filtreli URL yeni sekmede aynı ekranı açıyor; "silinen kayıt seçiliyken seçim düşüyor" tutarlılığı tek yerde (reducer/slice) yaşıyor; testler bileşen iç yapısına dokunmadan yeşil; StrictMode açık ve hiçbir uyarı susturulmamış. Kıyas notunu yazmadan bu düğümü işaretleme — 29 düğümlük yatırımın damıtılmış çıktısı o sayfadır.

03Kontrol listesi

Her satırı kendine sorarak işaretle; "evet" diyemediğin satırın dersine dön.

Yardımsız yapabiliyor musun?	Takılırsan dön
UI = f(state) modelini ve render/commit ayrımını anlatmak; sanal DOM efsanesini düzeltmek; Vite projesini kurup anatomisini okumak; props sözleşmesini (veri aşağı, callback yukarı) kurmak	1. ders
Snapshot modelini kanıtlamak (üç set = 1); batching ve fonksiyonel güncelleme kararını vermek; Object.is sözleşmesine uygun değişmez güncelleme yazmak; state'i doğru yere yerleştirmek	2. ders
Effect'i yalnız dış sistemle senkron için kullanmak; bağımlılığı beyan edip lint'i susturmamak; stale closure ve sonsuz döngüyü teşhis etmek; kur-yık temizliğiyle StrictMode sınavını geçmek	3. ders
Controlled/uncontrolled kararını tabloyla vermek; sayı tuzağını (value hep string) çözmek; touched/onBlur ve çift gönderim kilidiyle erişilebilir gönderim kurmak	4. ders
key = kimlik disiplinini savunmak ve key=index kaymasını göstermek; key ile bilinçli remount yapmak; dört durumlu ekranı ayırt edici birleşimle kurmak; && "0" tuzağını bilmek	5. ders
useRef'in iki yüzünü doğru işte kullanmak; useMemo/useCallback'i ölçüme bağlamak; React.memo zincirini kurmak; useReducer'a geçiş ölçüsünü uygulamak	6. ders
Custom hook'u sözleşmesiyle tasarlamak (reaktif girdi, dönüş biçimi, kararlı API); useSyncExternalStore'u yerinde kullanmak; üç tekrar ölçüsüyle soyutlama kararı vermek	7. ders
Drilling'i önce bileşimle çözmek; context + reducer kalıbını fırlatan hook'la kurmak; value nesnesi/bölme disipliniyle yayılımı sınırlamak; context-store çizgisini çekmek	8. ders
Karar merdivenini belirtilerle çıkmak; Zustand selector'ının render davranışını anlatmak; createSlice + immer'in Object.is'le barışını açıklamak; NgRx-RTK köprüsünü kurmak	9. ders
Sunucu/istemci durumu ayrımını yapmak; queryKey disiplinini uygulamak; staleTime/gcTime kararı vermek; mutation + invalidation zincirini kurmak; optimistic update akışını anlatmak	10. ders
Rota ağacını Outlet'le kurmak; parametreyi savunmalı okumak; ekran durumunu URL'ye taşımak; korumalı rotayı kurup güvenlik sınırını doğru çizmek; lazy rota eklemek	11. ders
RHF'in uncontrolled temelini anlatmak; zod şemasından tip türetmek; coerce/refine kullanmak; API sınırında safeParse ile doğrulamak; sunucu hatasını setError'la yazmak	12. ders
Render/yük maliyetini ayırt edip doğru aletle ölçmek; memo'suz memo desenlerini uygulamak; transition/deferred kararını vermek; paket analizi yapıp bölmek	13. ders
getByRole önceliğiyle davranış testi yazmak; MSW ile ağı sahtelemek; renderHook + sahte zamanlayıcı kullanmak; kırılgan testi tanıyıp kaçınmak	14. ders
Yığın tablosunu gerekçeleriyle saymak; SSR/SSG/ISR ve RSC'yi kavram düzeyinde ayırmak; Angular/React/Vue kararını bağlamla vermek; kütüphane seçme süzgecini uygulamak	15. ders

04Sözlü provası

React nedir; felsefesi Angular'dan nasıl ayrılır? Mimarinizi genel hatlarıyla anlatın.

React, kullanıcı arayüzünü UI = f(state) denklemiyle kuran bir kütüphanedir: ekran, durumun bir fonksiyonudur; durum değişince React fonksiyonu yeniden çağırır, yeni tarifle eskisini kıyaslar (render) ve yalnız farkı DOM'a işler (commit) — "sanal DOM hız için" efsanesini düzeltirim: kazanç hız değil programlama modelidir, elle DOM güncelleme sınıfı hataların yok olmasıdır. Angular'dan ayrımı kapsamdır: Angular çerçevedir, router/form/DI/HTTP kutudan gelir; React render katmanını verir, kalanını ekosistemden gerekçeyle seçersin — benim yığınım React Router, RHF + zod, TanStack Query, gerekirse Zustand/RTK, Vitest + Testing Library. Mimaride bileşen ağacı props sözleşmesiyle konuşur (veri aşağı, callback'le olay yukarı); istemci durumu merdivenle yönetilir (yerel → lifted → context → store), sunucu durumu ayrı türdür ve Query'nin önbelleğinde yaşar, ekran adresi URL'dedir. Reaktivite modeli de farklıdır: Angular zone/signals ile değişimi bildirir, React yeniden render + Object.is kıyasıyla çalışır — bu yüzden değişmezlik React'te pazarlıksız sözleşmedir.

React'te state ve render ilişkisini derinlemesine anlatın: snapshot, batching, değişmezlik, effect'in yeri ve memoization disiplini.

Her render, bileşen fonksiyonunun yeni bir çağrısıdır ve o çağrının gördüğü state bir snapshot'tır — olay işleyicisinde üç kez set(sayi + 1) çağırmak 1 artırır çünkü üçü de aynı fotoğrafı okur; eskiden türetilen güncelleme fonksiyonel yazılır. React set çağrılarını toplu işler (batching): olay işleyicisi biter, tek render koşar. Yeniden render kararı Object.is kıyasıyla verilir; bu yüzden nesne/dizi mutasyonla değil yeni referansla güncellenir — bozarsam ekran güncellenmez, memo ve bağımlılık kıyasları yalan söyler. Effect, render'ın değil dış dünyayla senkronun aracıdır: bağımlılıklar beyan edilir, temizlik kur-yık simetrisiyle yazılır, StrictMode bu simetrinin sınavıdır; türetilen değer effect'e değil render'a, olayın işi işleyicisine gider — turnusol "bu iş hangi olayın sonucu?". Memoization disiplinim ölçüme bağlıdır: önce mimari (state'i aşağı it, pahalı ağacı children'la geçir), sonra Profiler kanıtıyla React.memo + useCallback/useMemo zinciri; children ve satır içi nesne tuzaklarını bilirim, React Compiler'ın bu el işçiliğini otomatikleştirdiğini ama mimariyi devralmadığını söylerim.

Bir özelliği uçtan uca anlatın: "başvuru listesi + detay + yeni kayıt formu" ekranını React yığınıyla nasıl kurarsınız?

Adresten başlarım: rota ağacında kabuk + Outlet, basvurular listesi, basvurular/:id detayı (parametre string gelir — Number savunması, bozuksa 404), korumalı bölüm varsa oturum context'ini okuyan düzen rotası — koruma UX'tir, yetki API'de. Filtre ve sayfa durumu useState'e değil URL'ye (useSearchParams) yazılır: link paylaşılabilir, geri tuşu çalışır. Veri TanStack Query'dedir: ["basvurular", filtre] anahtarı hem önbellek adresi hem bağımlılık beyanıdır; yükleniyor/hata/veri ayırt edici birleşim disipliniyle, boş durum ayrıca çizilir; hızlı filtre değişiminde iptal Query'nin signal'iyle kutudan gelir. Liste satırları key = kayıt kimliğiyle, sunumsal kart bileşenine props'la akar. Form RHF + zod'dur: şema tek doğruluk kaynağı, tip z.infer'den, mode: "onTouched", hatalar role="alert" ile; gönderim useMutation → başarıda invalidateQueries listeyi tazeler, isSubmitting çift gönderimi kilitler, 422 alan hatası setError'la geri yazılır; API yanıtı sınırda safeParse'tan geçer. Ağır "raporlar" bölümü lazy + Suspense ile bölünür; testleri davranış üzerinden yazarım — MSW ile ağ, getByRole ile sorgu.

Aynı uygulamayı iki çerçeveyle kurdunuz: Angular ve React'i mühendis gözüyle kıyaslayın — hangi projede hangisini önerirsiniz?

Kıyasım aynı görevin iki inşasına dayanıyor. Yapısal fark karar sahipliğidir: Angular'da router, form, DI, HTTP kutudan gelir ve konvansiyonu çerçeve yazar — büyük, uzun ömürlü, çok ekipli üründe bu tören bir yatırımdır; React'te aynı kararları ben verdim (Router, RHF + zod, Query, merdivenli durum) — esneklik ve dev ekosistem kazandım, karşılığında ekip konvansiyonunu kendim yazmak zorundayım. Reaktivite ayrımı kodun her satırına işler: Angular değişimi bildirir (zone → signals; şablonda mutasyon tolere edilir), React yeniden render + Object.is kıyasıyla çalışır (değişmezlik pazarlıksız; snapshot ve stale closure kavramları buradan doğar). Form modelleri zıttır: Reactive Forms controlled durum ağacı, RHF uncontrolled DOM aboneliği. Sunucu verisinde Angular RxJS operatörleriyle elle kurduğumu React tarafında Query tek katmanda verdi; durum mimarisinde iki dünya aynı desene (Redux/NgRx — eylem, saf reducer, selector) çıkıyor, yani yatırım desene yapılır. Önerim bağlamla: kamu/kurumsal ölçekte ve devralınacak kod tabanında Angular güçlü; işe alım havuzu, ürün hızı ve esneklik öncelikliyse React; ikisini de aynı iş üstünde kurmuş biri olarak geçiş maliyetinin dilde değil zihin modelinde olduğunu söylerim — o modeli ikisinde de taşıyorum.

05Karar

Görevi yardımsız bitirdiysen

Bu düğümü "tamamladım" işaretle — Hat 11 kapanır ve büyük bir eşik geçilir: İlan A'nın "React / Angular / Vue'dan en az biri" ve İlan B'nin "React / Angular / Vue frontend kütüphaneleri" maddeleri, Hat 10 + Hat 11'in 29 düğümüyle birlikte tümden kapanmıştır — üstelik "en az biri" değil, ikisiyle. Elindeki kıyas notu mülakatın en zor frontend sorusunun ("neden X?") kanıtlı cevabıdır; sakla ve güncel tut. Sıradaki durak Hat 12 · Node.js: tarayıcıdan sunucuya geçiyorsun — bu hatta iki kez kapısına geldiğin senetler orada ödenecek: "SSR sunucusu Node işletmektir" (15. ders) ve JavaScript'in sunucudaki yaşamı (olay döngüsü, stream'ler, Express/Nest). Frontend'de kurduğun her istek artık masanın öbür tarafından görünecek.

Takıldıysan

Takıldığın maddeyi tablodan dersine eşle, dersi ve mini alıştırmasını yeniden çalış, 24 saat sonra görevi düzeltmeden, sıfırdan yap. Bu hatta en sık takılan altı yer: sayaç/interval 1'de takılıyor (3. ders — stale closure; fonksiyonel güncelleme), liste düzenlemede inputlar yanlış kayda yapışıyor (5. ders — key=index), "veri iki kez çekiliyor" diye StrictMode kapatma refleksi (3. ders — eksik temizlik/iptal), filtre değişince yanlış listenin görünmesi (10. ders — queryKey'e yazılmayan bağımlılık), React.memo'nun çalışmaması (13. ders — satır içi nesne/children tuzağı) ve context'e bağlı her bileşenin her değişimde render olması (8. ders — value nesnesi + bölünmemiş context). Bu altısı, sahadaki React kod incelemelerinin de en sık işaretlenen hatalarıdır; şimdi çözersen orada ayrıştırıcı olursun.