[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"me":3,"catalog:en: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","en",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,"In React, what does JSX actually compile down to at build time?",[156,159,162,165],{"key":157,"text":158},"a","Calls to `React.createElement(type, props, ...children)` building a plain JS object tree",{"key":160,"text":161},"b","A template string parsed by the browser at page-load time",{"key":163,"text":164},"c","A set of `document.createElement` DOM calls executed during compilation",{"key":166,"text":167},"d","A JSON configuration file describing the component tree","JSX is syntactic sugar; a build tool (the JSX transform) turns `\u003Ch1 className=\"title\">Hi\u003C\u002Fh1>` into `React.createElement('h1', {className: 'title'}, 'Hi')`, a plain JS call that builds an object tree describing the UI. Option (b) confuses it with a runtime template engine, (c) confuses build-time createElement calls with actual DOM manipulation, and (d) isn't a JSON artifact at all — it's JavaScript.",{"id":170,"topic":9,"difficulty":153,"body":171,"options":172,"correct_key":160,"explanation":181},"019f5be4-0a6a-7815-9528-595e47a4810b","Which attribute is used to apply a CSS class to a JSX element?",[173,175,177,179],{"key":157,"text":174},"`class`, exactly like in plain HTML markup",{"key":160,"text":176},"`className`, since `class` is a reserved JavaScript word",{"key":163,"text":178},"`cssClass`, a name unique to JSX components",{"key":166,"text":180},"`styleName`, matching the inline `style` prop","JSX attributes ultimately become JavaScript object properties, and `class` is a reserved keyword in JS, so React uses `className` instead (which is applied to the DOM's actual `class` attribute under the hood). Using `class` directly doesn't apply the styling as expected and triggers a console warning; (c) and (d) aren't the prop names React actually defines.",{"id":183,"topic":9,"difficulty":184,"body":185,"options":186,"correct_key":163,"explanation":195},"019f5be4-0a6b-7ea5-90f2-8f88fb55e082",2,"What happens with this component?\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},"It renders \"Visible\" whenever `show` is true, and nothing when it's false",{"key":160,"text":190},"It renders an empty `\u003Cdiv>`, no matter what `show` is",{"key":163,"text":192},"It never compiles at all, since `if` is a statement, not an expression",{"key":166,"text":194},"It renders the literal text \"if (show) { 'Visible' }\"","JSX curly braces `{}` only accept an expression that evaluates to a value (a string, number, element, etc.); `if` is a statement, not an expression, so this code is a syntax error and never actually runs. To conditionally render, the usual approach is a ternary (`show ? 'Visible' : null`) or `&&`.",{"id":197,"topic":9,"difficulty":184,"body":198,"options":199,"correct_key":166,"explanation":208},"019f5be4-0a6d-74f2-bd94-f9ea17f46722","A teammate defines a component this way and renders it with `\u003CuserCard name=\"Ada\" \u002F>`:\n```jsx\nfunction userCard({name}) {\n  return \u003Cdiv>{name}\u003C\u002Fdiv>;\n}\n```\nWhat actually happens?",[200,202,204,206],{"key":157,"text":201},"React calls `userCard` and renders \"Ada\" inside a `\u003Cdiv>`",{"key":160,"text":203},"React throws a compile-time error over the lowercase name",{"key":163,"text":205},"React renders correctly but logs a lowercase-naming warning",{"key":166,"text":207},"React treats `userCard` as an unknown host tag name","JSX treats a lowercase tag as a host (DOM) element, so `\u003CuserCard \u002F>` is emitted as a literal `\u003Cusercard>` tag and the function is never called — the component silently renders nothing. React does log a dev warning here (\"\u003CuserCard \u002F> is using incorrect casing…\"), but a warning is not the failure: the failure is that the component never runs. Components must start with a capital letter.",{"id":210,"topic":9,"difficulty":153,"body":211,"options":212,"correct_key":157,"explanation":221},"019f5be4-0a6f-7a28-a79b-08452e5b707d","A junior dev writes:\n```jsx\nfunction Toolbar() {\n  return (\n    \u003Cbutton>Save\u003C\u002Fbutton>\n    \u003Cbutton>Cancel\u003C\u002Fbutton>\n  );\n}\n```\nWhat happens when this file is compiled?",[213,215,217,219],{"key":157,"text":214},"It never compiles, since a component needs a single root JSX node",{"key":160,"text":216},"Both buttons render inside an implicit wrapper `\u003Cdiv>`",{"key":163,"text":218},"Only the first `\u003Cbutton>` renders; the second is dropped",{"key":166,"text":220},"Both render fine, but React logs a missing-key warning","`return` can only be followed by one expression, and JSX with two adjacent top-level elements isn't valid syntax — there's no implicit array or wrapper created for it. The fix is to wrap them in one parent element or a Fragment (`\u003C>...\u003C\u002F>`), which was confirmed to render both children without adding an extra DOM node.",{"id":223,"topic":9,"difficulty":224,"body":225,"options":226,"correct_key":160,"explanation":235},"019f5be4-0a71-7e74-bf14-0016b2e27748",3,"A `TodoList` component receives an array through `props.todos` and, directly inside its render logic, does:\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```\nWhat's the real problem with this code, beyond style preference?",[227,229,231,233],{"key":157,"text":228},"`.push` is a deprecated array method in modern JavaScript",{"key":160,"text":230},"It mutates array data that is owned by the parent, not the child",{"key":163,"text":232},"`key={t.id}` is invalid since `id` is a number, not a string",{"key":166,"text":234},"Arrays passed as props are frozen, so the component crashes","React's contract is that a component must never write to its own props — props flow one-way, from parent to child, and the underlying data belongs to the parent. `todos.push(...)` mutates the very array the parent is holding (same reference), so the parent's own data gets changed from the outside in an untracked way, a classic source of hard-to-debug bugs. Arrays aren't frozen by React (ruling out d) and `.push` isn't deprecated (ruling out a); a numeric `id` used as a `key` is perfectly fine, React coerces it (ruling out c).",{"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},[417,10],"tr",[419,420],"google","github",21750,true]