[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"me":3,"catalog:tr:frontend\u002Freact-components-jsx":4,"config":236},null,{"field_key":5,"field_name":6,"seniority":7,"topic_key":8,"topic_name":9,"spec_key":7,"spec_name":7,"locale":10,"cell_total":11,"field_total":12,"seniorities":13,"topics":17,"specs":133,"samples":150},"frontend","Frontend","","react-components-jsx","React Components Jsx","tr",75,2925,[14,15,16],"junior","mid","senior",[18,21,24,27,30,33,36,39,42,45,48,51,54,57,60,63,66,69,70,73,76,79,82,85,88,91,94,97,100,103,106,109,112,115,118,121,124,127,130],{"key":19,"name":20,"count":11},"accessibility","Accessibility",{"key":22,"name":23,"count":11},"angular-change-detection","Angular Change Detection",{"key":25,"name":26,"count":11},"angular-components-lifecycle","Angular Components Lifecycle",{"key":28,"name":29,"count":11},"angular-dependency-injection","Angular Dependency Injection",{"key":31,"name":32,"count":11},"angular-directives-pipes","Angular Directives Pipes",{"key":34,"name":35,"count":11},"angular-router-forms","Angular Router Forms",{"key":37,"name":38,"count":11},"angular-testing-performance","Angular Testing Performance",{"key":40,"name":41,"count":11},"css-layout","Css Layout",{"key":43,"name":44,"count":11},"dom-browser-apis","Dom Browser Apis",{"key":46,"name":47,"count":11},"javascript-async-concurrency","Javascript Async Concurrency",{"key":49,"name":50,"count":11},"javascript-language","Javascript Language",{"key":52,"name":53,"count":11},"javascript-memory-performance","Javascript Memory Performance",{"key":55,"name":56,"count":11},"javascript-modules-bundling","Javascript Modules Bundling",{"key":58,"name":59,"count":11},"javascript-prototypes-oop","Javascript Prototypes Oop",{"key":61,"name":62,"count":11},"javascript-runtime-apis","Javascript Runtime Apis",{"key":64,"name":65,"count":11},"javascript-testing-tooling","Javascript Testing Tooling",{"key":67,"name":68,"count":11},"performance","Performance",{"key":8,"name":9,"count":11},{"key":71,"name":72,"count":11},"react-context-state","React Context State",{"key":74,"name":75,"count":11},"react-effects-lifecycle","React Effects Lifecycle",{"key":77,"name":78,"count":11},"react-forms-suspense","React Forms Suspense",{"key":80,"name":81,"count":11},"react-hooks-state","React Hooks State",{"key":83,"name":84,"count":11},"react-rendering-performance","React Rendering Performance",{"key":86,"name":87,"count":11},"rendering-reactivity","Rendering Reactivity",{"key":89,"name":90,"count":11},"state-management","State Management",{"key":92,"name":93,"count":11},"testing","Testing",{"key":95,"name":96,"count":11},"typescript-advanced-types","Typescript Advanced Types",{"key":98,"name":99,"count":11},"typescript-generics","Typescript Generics",{"key":101,"name":102,"count":11},"typescript-modules-declarations","Typescript Modules Declarations",{"key":104,"name":105,"count":11},"typescript-narrowing-control-flow","Typescript Narrowing Control Flow",{"key":107,"name":108,"count":11},"typescript-tooling-config","Typescript Tooling Config",{"key":110,"name":111,"count":11},"typescript-type-fundamentals","Typescript Type Fundamentals",{"key":113,"name":114,"count":11},"vue-components-props","Vue Components Props",{"key":116,"name":117,"count":11},"vue-composition-api","Vue Composition Api",{"key":119,"name":120,"count":11},"vue-directives-templates","Vue Directives Templates",{"key":122,"name":123,"count":11},"vue-performance-testing","Vue Performance Testing",{"key":125,"name":126,"count":11},"vue-reactivity-system","Vue Reactivity System",{"key":128,"name":129,"count":11},"vue-router-state-management","Vue Router State Management",{"key":131,"name":132,"count":11},"web-security","Web Security",[134,138,141,144,147],{"key":135,"name":136,"count":137},"angular","Angular",450,{"key":139,"name":140,"count":137},"javascript","JavaScript",{"key":142,"name":143,"count":137},"react","React",{"key":145,"name":146,"count":137},"typescript","TypeScript",{"key":148,"name":149,"count":137},"vue","Vue",[151,169,182,196,209,222],{"id":152,"topic":9,"difficulty":153,"body":154,"options":155,"correct_key":157,"explanation":168},"019f5be4-0a63-7892-9842-1305f768ab63",1,"React'te JSX, derleme (build) zamanında aslında neye dönüşür?",[156,159,162,165],{"key":157,"text":158},"a","Düz bir JS nesne ağacı kuran `React.createElement(type, props, ...children)` çağrılarına",{"key":160,"text":161},"b","Sayfa yüklenirken tarayıcı tarafından parse edilen bir template string'ine",{"key":163,"text":164},"c","Derleme sırasında çalıştırılan bir grup `document.createElement` DOM çağrısına",{"key":166,"text":167},"d","Component ağacını tarif eden bir JSON konfigürasyon dosyasına","JSX bir syntactic sugar'dır; bir derleme aracı (JSX transform) `\u003Ch1 className=\"title\">Hi\u003C\u002Fh1>` 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.",{"id":170,"topic":9,"difficulty":153,"body":171,"options":172,"correct_key":160,"explanation":181},"019f5be4-0a6a-7815-9528-595e47a4810b","Bir JSX elementine CSS class uygulamak için hangi attribute kullanılır?",[173,175,177,179],{"key":157,"text":174},"Düz HTML markup'undaki gibi birebir `class`",{"key":160,"text":176},"`className`, çünkü `class` ayrılmış bir JavaScript kelimesidir",{"key":163,"text":178},"Yalnızca JSX component'lerine özgü olan `cssClass`",{"key":166,"text":180},"Inline `style` prop'uyla eşleşen `styleName`","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.",{"id":183,"topic":9,"difficulty":184,"body":185,"options":186,"correct_key":163,"explanation":195},"019f5be4-0a6b-7ea5-90f2-8f88fb55e082",2,"Bu component ile ne olur?\n```jsx\nfunction Banner({show}) {\n  return (\n    \u003Cdiv>\n      {if (show) { 'Visible' }}\n    \u003C\u002Fdiv>\n  );\n}\n```",[187,189,191,193],{"key":157,"text":188},"`show` true olduğunda \"Visible\" render eder, false olduğunda hiçbir şey render etmez",{"key":160,"text":190},"`show` ne olursa olsun boş bir `\u003Cdiv>` render eder",{"key":163,"text":192},"Hiç derlenmez, çünkü `if` bir ifade değil bir deyimdir",{"key":166,"text":194},"\"if (show) { 'Visible' }\" metnini olduğu gibi render eder","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.",{"id":197,"topic":9,"difficulty":184,"body":198,"options":199,"correct_key":166,"explanation":208},"019f5be4-0a6d-74f2-bd94-f9ea17f46722","Bir arkadaşın component'i şöyle tanımlıyor ve `\u003CuserCard name=\"Ada\" \u002F>` ile kullanıyor:\n```jsx\nfunction userCard({name}) {\n  return \u003Cdiv>{name}\u003C\u002Fdiv>;\n}\n```\nGerçekte ne olur?",[200,202,204,206],{"key":157,"text":201},"React `userCard`'ı çağırır ve \"Ada\"yı bir `\u003Cdiv>` içinde render eder",{"key":160,"text":203},"React küçük harfli isim yüzünden derleme zamanı hatası fırlatır",{"key":163,"text":205},"React doğru render eder ama küçük harf ismi için bir uyarı loglar",{"key":166,"text":207},"React `userCard`'ı bilinmeyen bir host tag ismi olarak ele alır","JSX, küçük harfle başlayan bir tag'i host (DOM) elementi sayar; `\u003CuserCard \u002F>` literal bir `\u003Cusercard>` tag'i olarak çıkar ve fonksiyon HİÇ çağrılmaz — component sessizce hiçbir şey render etmez. React dev modunda bir uyarı basar (\"\u003CuserCard \u002F> 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.",{"id":210,"topic":9,"difficulty":153,"body":211,"options":212,"correct_key":157,"explanation":221},"019f5be4-0a6f-7a28-a79b-08452e5b707d","Bir junior geliştirici şunu yazıyor:\n```jsx\nfunction Toolbar() {\n  return (\n    \u003Cbutton>Save\u003C\u002Fbutton>\n    \u003Cbutton>Cancel\u003C\u002Fbutton>\n  );\n}\n```\nBu dosya derlendiğinde ne olur?",[213,215,217,219],{"key":157,"text":214},"Hiç derlenmez, çünkü bir component'in tek bir kök JSX node'una ihtiyacı vardır",{"key":160,"text":216},"İki buton da örtük bir `\u003Cdiv>` sarmalayıcısı içinde render edilir",{"key":163,"text":218},"Yalnızca ilk `\u003Cbutton>` render edilir; ikincisi düşürülür",{"key":166,"text":220},"İkisi de sorunsuz render edilir, ama React eksik-key uyarısı loglar","`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 (`\u003C>...\u003C\u002F>`) sarmaktır; bunun ekstra bir DOM node eklemeden her iki child'ı da render ettiği doğrulandı.",{"id":223,"topic":9,"difficulty":224,"body":225,"options":226,"correct_key":160,"explanation":235},"019f5be4-0a71-7e74-bf14-0016b2e27748",3,"Bir `TodoList` component'i `props.todos` üzerinden bir array alıyor ve render mantığının içinde doğrudan şunu yapıyor:\n```jsx\nfunction TodoList({todos}) {\n  todos.push({id: Date.now(), text: 'new'});\n  return \u003Cul>{todos.map(t => \u003Cli key={t.id}>{t.text}\u003C\u002Fli>)}\u003C\u002Ful>;\n}\n```\nBu kodun, stil tercihinin ötesinde asıl sorunu nedir?",[227,229,231,233],{"key":157,"text":228},"`.push`, modern JavaScript'te deprecated bir array metodudur",{"key":160,"text":230},"Sahibi child değil parent olan array verisini mutate eder",{"key":163,"text":232},"`key={t.id}` geçersizdir çünkü `id` string değil bir sayıdır",{"key":166,"text":234},"Props olarak geçilen array'ler donduğu için component çöker","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).",{"fields":237,"seniorities":410,"interview_shapes":411,"locales":416,"oauth":418,"question_count":421,"coach_enabled":422,"jd_match_enabled":422},[238,263,271,287,311,324,343,362,384,391,397,404],{"key":239,"name_tr":240,"name_en":240,"sort":153,"specializations":241},"backend","Backend",[242,245,248,251,254,257,260],{"key":243,"name":244,"field":239},"general","Genel",{"key":246,"name":247,"field":239},"go","Go",{"key":249,"name":250,"field":239},"python","Python",{"key":252,"name":253,"field":239},"java","Java",{"key":255,"name":256,"field":239},"csharp","C#\u002F.NET",{"key":258,"name":259,"field":239},"nodejs","Node.js",{"key":261,"name":262,"field":239},"php","PHP",{"key":5,"name_tr":6,"name_en":6,"sort":184,"specializations":264},[265,266,267,268,269,270],{"key":243,"name":244,"field":5},{"key":139,"name":140,"field":5},{"key":145,"name":146,"field":5},{"key":142,"name":143,"field":5},{"key":148,"name":149,"field":5},{"key":135,"name":136,"field":5},{"key":272,"name_tr":273,"name_en":273,"sort":224,"specializations":274},"fullstack","Fullstack",[275,276,277,278,279,280,281,282,283,284,285,286],{"key":243,"name":244,"field":272},{"key":246,"name":247,"field":239},{"key":249,"name":250,"field":239},{"key":252,"name":253,"field":239},{"key":255,"name":256,"field":239},{"key":258,"name":259,"field":239},{"key":261,"name":262,"field":239},{"key":139,"name":140,"field":5},{"key":145,"name":146,"field":5},{"key":142,"name":143,"field":5},{"key":148,"name":149,"field":5},{"key":135,"name":136,"field":5},{"key":288,"name_tr":289,"name_en":289,"sort":290,"specializations":291},"devops-cloud","DevOps \u002F Cloud",4,[292,293,296,299,302,305,308],{"key":243,"name":244,"field":288},{"key":294,"name":295,"field":288},"aws","AWS",{"key":297,"name":298,"field":288},"gcp","GCP",{"key":300,"name":301,"field":288},"azure","Azure",{"key":303,"name":304,"field":288},"kubernetes","Kubernetes",{"key":306,"name":307,"field":288},"terraform","Terraform",{"key":309,"name":310,"field":288},"linux","Linux",{"key":312,"name_tr":313,"name_en":313,"sort":314,"specializations":315},"ai-engineer","AI Engineer",5,[316,317,318,321],{"key":243,"name":244,"field":312},{"key":249,"name":250,"field":312},{"key":319,"name":320,"field":312},"llm-rag","LLM\u002FRAG",{"key":322,"name":323,"field":312},"mlops","MLOps",{"key":325,"name_tr":326,"name_en":327,"sort":328,"specializations":329},"database","Veritabanı","Database",6,[330,331,334,337,340],{"key":243,"name":244,"field":325},{"key":332,"name":333,"field":325},"postgresql","PostgreSQL",{"key":335,"name":336,"field":325},"mysql","MySQL",{"key":338,"name":339,"field":325},"mongodb","MongoDB",{"key":341,"name":342,"field":325},"redis","Redis",{"key":344,"name_tr":345,"name_en":346,"sort":347,"specializations":348},"mobile","Mobil","Mobile",7,[349,350,353,356,359],{"key":243,"name":244,"field":344},{"key":351,"name":352,"field":344},"ios-swift","iOS (Swift)",{"key":354,"name":355,"field":344},"android-kotlin","Android (Kotlin)",{"key":357,"name":358,"field":344},"flutter","Flutter",{"key":360,"name":361,"field":344},"react-native","React Native",{"key":363,"name_tr":364,"name_en":365,"sort":366,"specializations":367},"security","Güvenlik","Security",8,[368,369,372,375,378,381],{"key":243,"name":244,"field":363},{"key":370,"name":371,"field":363},"appsec","AppSec",{"key":373,"name":374,"field":363},"offensive-pentest","Offensive \u002F Pentest",{"key":376,"name":377,"field":363},"cloud-security","Cloud Security",{"key":379,"name":380,"field":363},"devsecops","DevSecOps",{"key":382,"name":383,"field":363},"blue-team-incident","Blue Team \u002F Incident",{"key":385,"name_tr":386,"name_en":387,"sort":388,"specializations":389},"qa-test-automation","QA \u002F Test Otomasyonu","QA \u002F Test Automation",9,[390],{"key":243,"name":244,"field":385},{"key":392,"name_tr":393,"name_en":393,"sort":394,"specializations":395},"data-engineer","Data Engineer",10,[396],{"key":243,"name":244,"field":392},{"key":398,"name_tr":399,"name_en":400,"sort":401,"specializations":402},"game-dev","Oyun Geliştirme","Game Development",11,[403],{"key":243,"name":244,"field":398},{"key":405,"name_tr":406,"name_en":406,"sort":407,"specializations":408},"ml-engineer","ML Engineer",12,[409],{"key":243,"name":244,"field":405},[14,15,16],{"junior":412,"mid":414,"senior":415},{"questions":413,"median_sec":3},20,{"questions":413,"median_sec":3},{"questions":413,"median_sec":3},[10,417],"en",[419,420],"google","github",21750,true]