yoklateknik mülakat
GelişimGeçmiş

Frontend React Components Jsx Mülakat Soruları

75 doğrulanmış Frontend React Components Jsx mülakat sorusu — cevaplarıyla çöz, açıklamalarıyla öğren, gerçek simülasyonda kendini test et.

Gerçek simülasyonu dene →

Örnek sorular

React Components JsxZorluk 1
React'te JSX, derleme (build) zamanında aslında neye dönüşür?
  • aDüz bir JS nesne ağacı kuran React.createElement(type, props, ...children) çağrılarına✓
  • bSayfa yüklenirken tarayıcı tarafından parse edilen bir template string'ine
  • cDerleme sırasında çalıştırılan bir grup document.createElement DOM çağrısına
  • dComponent ağacını tarif eden bir JSON konfigürasyon dosyasına
Açıklama:JSX bir syntactic sugar'dır; bir derleme aracı (JSX transform) <h1 className="title">Hi</h1> ifadesini React.createElement('h1', {className: 'title'}, 'Hi') çağrısına çevirir — bu, UI'ı tarif eden bir nesne ağacı kuran düz bir JS çağrısıdır. (b) şıkkı bunu çalışma zamanlı bir template motoruyla karıştırır, (c) derleme zamanındaki createElement çağrılarını gerçek DOM manipülasyonuyla karıştırır, (d) ise hiç JSON değildir — JavaScript'tir.
React Components JsxZorluk 1
Bir JSX elementine CSS class uygulamak için hangi attribute kullanılır?
  • aDüz HTML markup'undaki gibi birebir class
  • bclassName, çünkü class ayrılmış bir JavaScript kelimesidir✓
  • cYalnızca JSX component'lerine özgü olan cssClass
  • dInline style prop'uyla eşleşen styleName
Açıklama:JSX attribute'ları sonunda JavaScript nesne property'lerine dönüşür ve class JS'te ayrılmış bir kelimedir; bu yüzden React onun yerine className kullanır (bu da arka planda DOM'un gerçek class attribute'una uygulanır). class'ı doğrudan kullanmak beklenen stili uygulamaz ve console'da uyarı tetikler; (c) ve (d) React'in gerçekten tanımladığı prop isimleri değildir.
React Components JsxZorluk 2
Bu component ile ne olur?
function Banner({show}) {
  return (
    <div>
      {if (show) { 'Visible' }}
    </div>
  );
}
  • ashow true olduğunda "Visible" render eder, false olduğunda hiçbir şey render etmez
  • bshow ne olursa olsun boş bir <div> render eder
  • cHiç derlenmez, çünkü if bir ifade değil bir deyimdir✓
  • d"if (show) { 'Visible' }" metnini olduğu gibi render eder
Açıklama:JSX'teki süslü parantez {} yalnızca bir değere indirgenen bir ifadeyi (string, sayı, element vb.) kabul eder; if bir ifade değil bir deyimdir, bu yüzden bu kod bir syntax hatasıdır ve hiç çalışmaz. Koşullu render için genellikle ternary (show ? 'Visible' : null) ya da && kullanılır.
React Components JsxZorluk 2
Bir arkadaşın component'i şöyle tanımlıyor ve <userCard name="Ada" /> ile kullanıyor:
function userCard({name}) {
  return <div>{name}</div>;
}

Gerçekte ne olur?
  • aReact userCard'ı çağırır ve "Ada"yı bir <div> içinde render eder
  • bReact küçük harfli isim yüzünden derleme zamanı hatası fırlatır
  • cReact doğru render eder ama küçük harf ismi için bir uyarı loglar
  • dReact userCard'ı bilinmeyen bir host tag ismi olarak ele alır✓
Açıklama:JSX, küçük harfle başlayan bir tag'i host (DOM) elementi sayar; <userCard /> literal bir <usercard> tag'i olarak çıkar ve fonksiyon HİÇ çağrılmaz — component sessizce hiçbir şey render etmez. React dev modunda bir uyarı basar ("<userCard /> is using incorrect casing…"), ama asıl sorun uyarı değil: component'in hiç çalışmamasıdır. Component adları büyük harfle başlamalıdır.
React Components JsxZorluk 1
Bir junior geliştirici şunu yazıyor:
function Toolbar() {
  return (
    <button>Save</button>
    <button>Cancel</button>
  );
}

Bu dosya derlendiğinde ne olur?
  • aHiç derlenmez, çünkü bir component'in tek bir kök JSX node'una ihtiyacı vardır✓
  • bİki buton da örtük bir <div> sarmalayıcısı içinde render edilir
  • cYalnızca ilk <button> render edilir; ikincisi düşürülür
  • dİkisi de sorunsuz render edilir, ama React eksik-key uyarısı loglar
Açıklama:return'den sonra yalnızca tek bir ifade gelebilir ve iki bitişik üst-seviye elementten oluşan JSX geçerli bir syntax değildir — bunun için örtük bir array veya sarmalayıcı oluşturulmaz. Çözüm, bunları tek bir parent element'e ya da bir Fragment'e (<>...</>) sarmaktır; bunun ekstra bir DOM node eklemeden her iki child'ı da render ettiği doğrulandı.
React Components JsxZorluk 3
Bir TodoList component'i props.todos üzerinden bir array alıyor ve render mantığının içinde doğrudan şunu yapıyor:
function TodoList({todos}) {
  todos.push({id: Date.now(), text: 'new'});
  return <ul>{todos.map(t => <li key={t.id}>{t.text}</li>)}</ul>;
}

Bu kodun, stil tercihinin ötesinde asıl sorunu nedir?
  • a.push, modern JavaScript'te deprecated bir array metodudur
  • bSahibi child değil parent olan array verisini mutate eder✓
  • ckey={t.id} geçersizdir çünkü id string değil bir sayıdır
  • dProps olarak geçilen array'ler donduğu için component çöker
Açıklama:React'in sözleşmesi, bir component'in kendi prop'larına asla yazmaması gerektiğidir — prop'lar tek yönlü akar (parent'tan child'a) ve altındaki veri parent'a aittir. todos.push(...) parent'ın elinde tuttuğu array'in ta kendisini (aynı referans) mutate eder, yani parent'ın verisi dışarıdan, izlenmeden değiştirilmiş olur; bu klasik bir debug edilmesi zor bug kaynağıdır. Array'ler React tarafından donmuş değildir (d'yi eler), .push deprecated değildir (a'yı eler); sayısal bir id'nin key olarak kullanılması tamamen geçerlidir, React onu otomatik dönüştürür (c'yi eler).

Uzmanlığa göre

Angular 450JavaScript 450React 450TypeScript 450Vue 450

Kıdeme göre

Frontend JuniorFrontend MidFrontend Senior

Diğer alanlar

BackendFullstackDevOps / CloudAI EngineerVeritabanıMobilGüvenlikQA / Test OtomasyonuData EngineerOyun GeliştirmeML Engineer

2925 soruluk Frontend bankasında kendini sına.

Mülakata başla