[{"data":1,"prerenderedAt":1454},["ShallowReactive",2],{"blog-\u002Fblog\u002Freact-jsx-rendering-guide":3},{"id":4,"title":5,"body":6,"description":1438,"difficulty":1439,"extension":1440,"framework":1441,"frameworkSlug":1442,"meta":1443,"navigation":91,"order":40,"path":1445,"qaPath":1446,"seo":1447,"stem":1448,"subtopic":1449,"topic":1450,"topicSlug":1451,"updated":1452,"__hash__":1453},"blog\u002Fblog\u002Freact-jsx-rendering-guide.md","React JSX — A Complete Guide with Examples",{"type":7,"value":8,"toc":1426},"minimark",[9,14,18,26,153,160,164,167,279,294,298,313,445,454,460,547,551,554,559,659,664,750,764,768,783,848,859,863,869,949,969,973,979,1125,1128,1132,1138,1201,1211,1215,1218,1284,1291,1360,1381,1385,1388,1420,1423],[10,11,13],"h2",{"id":12},"what-jsx-really-is","What JSX really is",[15,16,17],"p",{},"Every React developer writes JSX, but many treat it as magic. Interviewers know\nthis and will ask questions designed to reveal whether you understand it as\nsyntax sugar or as a black box.",[15,19,20,21,25],{},"JSX is a ",[22,23,24],"strong",{},"syntax extension to JavaScript"," that looks like HTML but compiles\nto plain JavaScript. A build tool — Babel, SWC, or the TypeScript compiler —\ntransforms every JSX expression into a function call before the browser ever\nsees it:",[27,28,33],"pre",{"className":29,"code":30,"language":31,"meta":32,"style":32},"language-jsx shiki shiki-themes github-light github-dark","\u002F\u002F What you write\nconst button = \u003Cbutton className=\"primary\">Save\u003C\u002Fbutton>\n\n\u002F\u002F What the compiler produces (React 17+ JSX transform)\nimport { jsx as _jsx } from 'react\u002Fjsx-runtime'\nconst button = _jsx('button', { className: 'primary', children: 'Save' })\n","jsx","",[34,35,36,45,86,93,99,120],"code",{"__ignoreMap":32},[37,38,41],"span",{"class":39,"line":40},"line",1,[37,42,44],{"class":43},"sJ8bj","\u002F\u002F What you write\n",[37,46,48,52,56,59,63,67,71,74,78,81,83],{"class":39,"line":47},2,[37,49,51],{"class":50},"szBVR","const",[37,53,55],{"class":54},"sj4cs"," button",[37,57,58],{"class":50}," =",[37,60,62],{"class":61},"sVt8B"," \u003C",[37,64,66],{"class":65},"s9eBZ","button",[37,68,70],{"class":69},"sScJk"," className",[37,72,73],{"class":50},"=",[37,75,77],{"class":76},"sZZnC","\"primary\"",[37,79,80],{"class":61},">Save\u003C\u002F",[37,82,66],{"class":65},[37,84,85],{"class":61},">\n",[37,87,89],{"class":39,"line":88},3,[37,90,92],{"emptyLinePlaceholder":91},true,"\n",[37,94,96],{"class":39,"line":95},4,[37,97,98],{"class":43},"\u002F\u002F What the compiler produces (React 17+ JSX transform)\n",[37,100,102,105,108,111,114,117],{"class":39,"line":101},5,[37,103,104],{"class":50},"import",[37,106,107],{"class":61}," { jsx ",[37,109,110],{"class":50},"as",[37,112,113],{"class":61}," _jsx } ",[37,115,116],{"class":50},"from",[37,118,119],{"class":76}," 'react\u002Fjsx-runtime'\n",[37,121,123,125,127,129,132,135,138,141,144,147,150],{"class":39,"line":122},6,[37,124,51],{"class":50},[37,126,55],{"class":54},[37,128,58],{"class":50},[37,130,131],{"class":69}," _jsx",[37,133,134],{"class":61},"(",[37,136,137],{"class":76},"'button'",[37,139,140],{"class":61},", { className: ",[37,142,143],{"class":76},"'primary'",[37,145,146],{"class":61},", children: ",[37,148,149],{"class":76},"'Save'",[37,151,152],{"class":61}," })\n",[15,154,155,156,159],{},"The result is a plain JavaScript object called a ",[22,157,158],{},"React element"," — a\nlightweight description of what should appear on screen. React's renderer later\nturns it into actual DOM nodes. Nothing magic, just objects.",[10,161,163],{"id":162},"why-jsx-requires-a-single-root","Why JSX requires a single root",[15,165,166],{},"Because JSX compiles to a single function call that returns one value. You\ncan't return two values from one expression in JavaScript.",[27,168,170],{"className":29,"code":169,"language":31,"meta":32,"style":32},"\u002F\u002F ❌ Two adjacent top-level elements\nreturn (\n  \u003Ch1>Title\u003C\u002Fh1>\n  \u003Cp>Body\u003C\u002Fp>\n)\n\n\u002F\u002F ✅ Fragment — groups siblings without adding a DOM node\nreturn (\n  \u003C>\n    \u003Ch1>Title\u003C\u002Fh1>\n    \u003Cp>Body\u003C\u002Fp>\n  \u003C\u002F>\n)\n",[34,171,172,177,185,200,213,218,222,228,235,241,255,268,274],{"__ignoreMap":32},[37,173,174],{"class":39,"line":40},[37,175,176],{"class":43},"\u002F\u002F ❌ Two adjacent top-level elements\n",[37,178,179,182],{"class":39,"line":47},[37,180,181],{"class":50},"return",[37,183,184],{"class":61}," (\n",[37,186,187,190,193,196,198],{"class":39,"line":88},[37,188,189],{"class":61},"  \u003C",[37,191,192],{"class":65},"h1",[37,194,195],{"class":61},">Title\u003C\u002F",[37,197,192],{"class":65},[37,199,85],{"class":61},[37,201,202,204,206,209,211],{"class":39,"line":95},[37,203,189],{"class":61},[37,205,15],{"class":65},[37,207,208],{"class":61},">Body\u003C\u002F",[37,210,15],{"class":65},[37,212,85],{"class":61},[37,214,215],{"class":39,"line":101},[37,216,217],{"class":61},")\n",[37,219,220],{"class":39,"line":122},[37,221,92],{"emptyLinePlaceholder":91},[37,223,225],{"class":39,"line":224},7,[37,226,227],{"class":43},"\u002F\u002F ✅ Fragment — groups siblings without adding a DOM node\n",[37,229,231,233],{"class":39,"line":230},8,[37,232,181],{"class":50},[37,234,184],{"class":61},[37,236,238],{"class":39,"line":237},9,[37,239,240],{"class":61},"  \u003C>\n",[37,242,244,247,249,251,253],{"class":39,"line":243},10,[37,245,246],{"class":61},"    \u003C",[37,248,192],{"class":65},[37,250,195],{"class":61},[37,252,192],{"class":65},[37,254,85],{"class":61},[37,256,258,260,262,264,266],{"class":39,"line":257},11,[37,259,246],{"class":61},[37,261,15],{"class":65},[37,263,208],{"class":61},[37,265,15],{"class":65},[37,267,85],{"class":61},[37,269,271],{"class":39,"line":270},12,[37,272,273],{"class":61},"  \u003C\u002F>\n",[37,275,277],{"class":39,"line":276},13,[37,278,217],{"class":61},[15,280,281,282,285,286,289,290,293],{},"The short syntax ",[34,283,284],{},"\u003C>…\u003C\u002F>"," is the most common form. Use ",[34,287,288],{},"\u003CReact.Fragment key={id}>…\u003C\u002FReact.Fragment>","\nonly when you need to attach a ",[34,291,292],{},"key"," prop (for example in a list).",[10,295,297],{"id":296},"embedding-javascript-expressions","Embedding JavaScript expressions",[15,299,300,301,304,305,308,309,312],{},"Anything that produces a value goes inside ",[34,302,303],{},"{}",". Strings, numbers, function\ncalls, ternaries, template literals — all valid. Statements (",[34,306,307],{},"if",", ",[34,310,311],{},"for",",\nvariable declarations) are not, because they don't produce values.",[27,314,316],{"className":29,"code":315,"language":31,"meta":32,"style":32},"const name = 'Alice'\nconst isAdmin = true\n\nreturn (\n  \u003Cdiv>\n    \u003Cp>Hello, {name.toUpperCase()}\u003C\u002Fp>\n    \u003Cp>Role: {isAdmin ? 'Admin' : 'User'}\u003C\u002Fp>\n    \u003Cp>2 + 2 = {2 + 2}\u003C\u002Fp>\n  \u003C\u002Fdiv>\n)\n",[34,317,318,330,342,346,352,361,380,408,432,441],{"__ignoreMap":32},[37,319,320,322,325,327],{"class":39,"line":40},[37,321,51],{"class":50},[37,323,324],{"class":54}," name",[37,326,58],{"class":50},[37,328,329],{"class":76}," 'Alice'\n",[37,331,332,334,337,339],{"class":39,"line":47},[37,333,51],{"class":50},[37,335,336],{"class":54}," isAdmin",[37,338,58],{"class":50},[37,340,341],{"class":54}," true\n",[37,343,344],{"class":39,"line":88},[37,345,92],{"emptyLinePlaceholder":91},[37,347,348,350],{"class":39,"line":95},[37,349,181],{"class":50},[37,351,184],{"class":61},[37,353,354,356,359],{"class":39,"line":101},[37,355,189],{"class":61},[37,357,358],{"class":65},"div",[37,360,85],{"class":61},[37,362,363,365,367,370,373,376,378],{"class":39,"line":122},[37,364,246],{"class":61},[37,366,15],{"class":65},[37,368,369],{"class":61},">Hello, {name.",[37,371,372],{"class":69},"toUpperCase",[37,374,375],{"class":61},"()}\u003C\u002F",[37,377,15],{"class":65},[37,379,85],{"class":61},[37,381,382,384,386,389,392,395,398,401,404,406],{"class":39,"line":224},[37,383,246],{"class":61},[37,385,15],{"class":65},[37,387,388],{"class":61},">Role: {isAdmin ",[37,390,391],{"class":50},"?",[37,393,394],{"class":76}," 'Admin'",[37,396,397],{"class":50}," :",[37,399,400],{"class":76}," 'User'",[37,402,403],{"class":61},"}\u003C\u002F",[37,405,15],{"class":65},[37,407,85],{"class":61},[37,409,410,412,414,417,420,423,426,428,430],{"class":39,"line":230},[37,411,246],{"class":61},[37,413,15],{"class":65},[37,415,416],{"class":61},">2 + 2 = {",[37,418,419],{"class":54},"2",[37,421,422],{"class":50}," +",[37,424,425],{"class":54}," 2",[37,427,403],{"class":61},[37,429,15],{"class":65},[37,431,85],{"class":61},[37,433,434,437,439],{"class":39,"line":237},[37,435,436],{"class":61},"  \u003C\u002F",[37,438,358],{"class":65},[37,440,85],{"class":61},[37,442,443],{"class":39,"line":243},[37,444,217],{"class":61},[15,446,447,448,450,451,453],{},"The mental shortcut: if it can go on the right-hand side of ",[34,449,73],{},", it can go\ninside ",[34,452,303],{},".",[15,455,456,457,459],{},"For conditional logic that's too complex for a ternary, compute the value above\nthe ",[34,458,181],{}," statement and render a variable:",[27,461,463],{"className":29,"code":462,"language":31,"meta":32,"style":32},"let label\nif (score >= 90) label = 'A'\nelse if (score >= 80) label = 'B'\nelse label = 'C'\n\nreturn \u003Cp>Grade: {label}\u003C\u002Fp>\n",[34,464,465,473,494,516,528,532],{"__ignoreMap":32},[37,466,467,470],{"class":39,"line":40},[37,468,469],{"class":50},"let",[37,471,472],{"class":61}," label\n",[37,474,475,477,480,483,486,489,491],{"class":39,"line":47},[37,476,307],{"class":50},[37,478,479],{"class":61}," (score ",[37,481,482],{"class":50},">=",[37,484,485],{"class":54}," 90",[37,487,488],{"class":61},") label ",[37,490,73],{"class":50},[37,492,493],{"class":76}," 'A'\n",[37,495,496,499,502,504,506,509,511,513],{"class":39,"line":88},[37,497,498],{"class":50},"else",[37,500,501],{"class":50}," if",[37,503,479],{"class":61},[37,505,482],{"class":50},[37,507,508],{"class":54}," 80",[37,510,488],{"class":61},[37,512,73],{"class":50},[37,514,515],{"class":76}," 'B'\n",[37,517,518,520,523,525],{"class":39,"line":95},[37,519,498],{"class":50},[37,521,522],{"class":61}," label ",[37,524,73],{"class":50},[37,526,527],{"class":76}," 'C'\n",[37,529,530],{"class":39,"line":101},[37,531,92],{"emptyLinePlaceholder":91},[37,533,534,536,538,540,543,545],{"class":39,"line":122},[37,535,181],{"class":50},[37,537,62],{"class":61},[37,539,15],{"class":65},[37,541,542],{"class":61},">Grade: {label}\u003C\u002F",[37,544,15],{"class":65},[37,546,85],{"class":61},[10,548,550],{"id":549},"jsx-is-not-html-key-differences","JSX is not HTML — key differences",[15,552,553],{},"Interviewers will probe these differences because they catch developers off\nguard in code reviews.",[15,555,556],{},[22,557,558],{},"Attribute name changes:",[560,561,562,578],"table",{},[563,564,565],"thead",{},[566,567,568,572,575],"tr",{},[569,570,571],"th",{},"HTML",[569,573,574],{},"JSX",[569,576,577],{},"Why",[579,580,581,599,614,629,644],"tbody",{},[566,582,583,589,594],{},[584,585,586],"td",{},[34,587,588],{},"class",[584,590,591],{},[34,592,593],{},"className",[584,595,596,598],{},[34,597,588],{}," is a JS reserved word",[566,600,601,605,610],{},[584,602,603],{},[34,604,311],{},[584,606,607],{},[34,608,609],{},"htmlFor",[584,611,612,598],{},[34,613,311],{},[566,615,616,621,626],{},[584,617,618],{},[34,619,620],{},"onclick",[584,622,623],{},[34,624,625],{},"onClick",[584,627,628],{},"Events use camelCase",[566,630,631,636,641],{},[584,632,633],{},[34,634,635],{},"tabindex",[584,637,638],{},[34,639,640],{},"tabIndex",[584,642,643],{},"Multi-word attributes use camelCase",[566,645,646,651,656],{},[584,647,648],{},[34,649,650],{},"style=\"color:red\"",[584,652,653],{},[34,654,655],{},"style={{ color: 'red' }}",[584,657,658],{},"Style takes a JS object",[15,660,661],{},[22,662,663],{},"All tags must close:",[27,665,667],{"className":29,"code":666,"language":31,"meta":32,"style":32},"\u002F\u002F ✅ Self-close when no children\n\u003Cinput type=\"email\" \u002F>\n\u003Cimg src=\"logo.png\" alt=\"Logo\" \u002F>\n\u003Cbr \u002F>\n\n\u002F\u002F ❌ Unclosed tags — parse error in JSX\n\u003Cinput type=\"email\">\n",[34,668,669,674,693,718,727,731,736],{"__ignoreMap":32},[37,670,671],{"class":39,"line":40},[37,672,673],{"class":43},"\u002F\u002F ✅ Self-close when no children\n",[37,675,676,679,682,685,687,690],{"class":39,"line":47},[37,677,678],{"class":61},"\u003C",[37,680,681],{"class":65},"input",[37,683,684],{"class":69}," type",[37,686,73],{"class":50},[37,688,689],{"class":76},"\"email\"",[37,691,692],{"class":61}," \u002F>\n",[37,694,695,697,700,703,705,708,711,713,716],{"class":39,"line":88},[37,696,678],{"class":61},[37,698,699],{"class":65},"img",[37,701,702],{"class":69}," src",[37,704,73],{"class":50},[37,706,707],{"class":76},"\"logo.png\"",[37,709,710],{"class":69}," alt",[37,712,73],{"class":50},[37,714,715],{"class":76},"\"Logo\"",[37,717,692],{"class":61},[37,719,720,722,725],{"class":39,"line":95},[37,721,678],{"class":61},[37,723,724],{"class":65},"br",[37,726,692],{"class":61},[37,728,729],{"class":39,"line":101},[37,730,92],{"emptyLinePlaceholder":91},[37,732,733],{"class":39,"line":122},[37,734,735],{"class":43},"\u002F\u002F ❌ Unclosed tags — parse error in JSX\n",[37,737,738,740,742,744,746,748],{"class":39,"line":224},[37,739,678],{"class":61},[37,741,681],{"class":65},[37,743,684],{"class":69},[37,745,73],{"class":50},[37,747,689],{"class":76},[37,749,85],{"class":61},[15,751,752,755,756,759,760,763],{},[22,753,754],{},"Case sensitivity:"," ",[34,757,758],{},"\u003Cdiv>"," is a DOM element; ",[34,761,762],{},"\u003CDiv>"," would be looked up\nas a JavaScript variable (a component). Always capitalize custom component\nnames.",[10,765,767],{"id":766},"boolean-attributes","Boolean attributes",[15,769,770,771,774,775,778,779,782],{},"In HTML, writing ",[34,772,773],{},"disabled"," as a bare attribute is equivalent to\n",[34,776,777],{},"disabled=\"disabled\"",". JSX follows the same convention — omitting the value\nsets it to ",[34,780,781],{},"true",":",[27,784,786],{"className":29,"code":785,"language":31,"meta":32,"style":32},"\u002F\u002F These are equivalent\n\u003Cinput disabled={true} \u002F>\n\u003Cinput disabled \u002F>\n\n\u002F\u002F Explicitly false — attribute is omitted from the DOM entirely\n\u003Cinput disabled={false} \u002F>\n",[34,787,788,793,812,822,826,831],{"__ignoreMap":32},[37,789,790],{"class":39,"line":40},[37,791,792],{"class":43},"\u002F\u002F These are equivalent\n",[37,794,795,797,799,802,804,807,809],{"class":39,"line":47},[37,796,678],{"class":61},[37,798,681],{"class":65},[37,800,801],{"class":69}," disabled",[37,803,73],{"class":50},[37,805,806],{"class":61},"{",[37,808,781],{"class":54},[37,810,811],{"class":61},"} \u002F>\n",[37,813,814,816,818,820],{"class":39,"line":88},[37,815,678],{"class":61},[37,817,681],{"class":65},[37,819,801],{"class":69},[37,821,692],{"class":61},[37,823,824],{"class":39,"line":95},[37,825,92],{"emptyLinePlaceholder":91},[37,827,828],{"class":39,"line":101},[37,829,830],{"class":43},"\u002F\u002F Explicitly false — attribute is omitted from the DOM entirely\n",[37,832,833,835,837,839,841,843,846],{"class":39,"line":122},[37,834,678],{"class":61},[37,836,681],{"class":65},[37,838,801],{"class":69},[37,840,73],{"class":50},[37,842,806],{"class":61},[37,844,845],{"class":54},"false",[37,847,811],{"class":61},[15,849,850,851,854,855,858],{},"The common mistake is ",[34,852,853],{},"disabled=\"false\""," — HTML treats any non-empty string\nas truthy, so the input is still disabled. Always use ",[34,856,857],{},"{false}"," in JSX.",[10,860,862],{"id":861},"inline-styles","Inline styles",[15,864,865,868],{},[34,866,867],{},"style"," takes a JavaScript object with camelCase property names, not a CSS\nstring:",[27,870,872],{"className":29,"code":871,"language":31,"meta":32,"style":32},"\u002F\u002F ❌ HTML string form\n\u003Cdiv style=\"color: red; font-size: 16px\">…\u003C\u002Fdiv>\n\n\u002F\u002F ✅ JSX object form\n\u003Cdiv style={{ color: 'red', fontSize: '16px', marginTop: 8 }}>…\u003C\u002Fdiv>\n\u002F\u002F          ^outer: JSX expression  ^inner: object literal\n",[34,873,874,879,900,904,909,944],{"__ignoreMap":32},[37,875,876],{"class":39,"line":40},[37,877,878],{"class":43},"\u002F\u002F ❌ HTML string form\n",[37,880,881,883,885,888,890,893,896,898],{"class":39,"line":47},[37,882,678],{"class":61},[37,884,358],{"class":65},[37,886,887],{"class":69}," style",[37,889,73],{"class":50},[37,891,892],{"class":76},"\"color: red; font-size: 16px\"",[37,894,895],{"class":61},">…\u003C\u002F",[37,897,358],{"class":65},[37,899,85],{"class":61},[37,901,902],{"class":39,"line":88},[37,903,92],{"emptyLinePlaceholder":91},[37,905,906],{"class":39,"line":95},[37,907,908],{"class":43},"\u002F\u002F ✅ JSX object form\n",[37,910,911,913,915,917,919,922,925,928,931,934,937,940,942],{"class":39,"line":101},[37,912,678],{"class":61},[37,914,358],{"class":65},[37,916,887],{"class":69},[37,918,73],{"class":50},[37,920,921],{"class":61},"{{ color: ",[37,923,924],{"class":76},"'red'",[37,926,927],{"class":61},", fontSize: ",[37,929,930],{"class":76},"'16px'",[37,932,933],{"class":61},", marginTop: ",[37,935,936],{"class":54},"8",[37,938,939],{"class":61}," }}>…\u003C\u002F",[37,941,358],{"class":65},[37,943,85],{"class":61},[37,945,946],{"class":39,"line":122},[37,947,948],{"class":43},"\u002F\u002F          ^outer: JSX expression  ^inner: object literal\n",[15,950,951,952,955,956,959,960,963,964,966,967,453],{},"Numbers for pixel-valued properties (",[34,953,954],{},"marginTop: 8",") are converted to ",[34,957,958],{},"8px","\nautomatically. The double-brace ",[34,961,962],{},"{{}}"," is not special syntax — it's an\nexpression slot ",[34,965,303],{}," containing an object literal ",[34,968,303],{},[10,970,972],{"id":971},"spreading-props","Spreading props",[15,974,975,976,782],{},"Pass a batch of props with ",[34,977,978],{},"{...obj}",[27,980,982],{"className":29,"code":981,"language":31,"meta":32,"style":32},"function Button({ size, variant, ...rest }) {\n  \u002F\u002F size and variant consumed here; everything else forwarded\n  return (\n    \u003Cbutton\n      className={`btn btn-${size} btn-${variant}`}\n      {...rest}\n    \u002F>\n  )\n}\n\n\u003CButton size=\"large\" variant=\"primary\" aria-label=\"Save\" onClick={save} \u002F>\n",[34,983,984,1015,1020,1027,1034,1059,1069,1074,1079,1083,1087],{"__ignoreMap":32},[37,985,986,989,992,995,999,1001,1004,1006,1009,1012],{"class":39,"line":40},[37,987,988],{"class":50},"function",[37,990,991],{"class":69}," Button",[37,993,994],{"class":61},"({ ",[37,996,998],{"class":997},"s4XuR","size",[37,1000,308],{"class":61},[37,1002,1003],{"class":997},"variant",[37,1005,308],{"class":61},[37,1007,1008],{"class":50},"...",[37,1010,1011],{"class":997},"rest",[37,1013,1014],{"class":61}," }) {\n",[37,1016,1017],{"class":39,"line":47},[37,1018,1019],{"class":43},"  \u002F\u002F size and variant consumed here; everything else forwarded\n",[37,1021,1022,1025],{"class":39,"line":88},[37,1023,1024],{"class":50},"  return",[37,1026,184],{"class":61},[37,1028,1029,1031],{"class":39,"line":95},[37,1030,246],{"class":61},[37,1032,1033],{"class":65},"button\n",[37,1035,1036,1039,1041,1043,1046,1048,1051,1053,1056],{"class":39,"line":101},[37,1037,1038],{"class":69},"      className",[37,1040,73],{"class":50},[37,1042,806],{"class":61},[37,1044,1045],{"class":76},"`btn btn-${",[37,1047,998],{"class":61},[37,1049,1050],{"class":76},"} btn-${",[37,1052,1003],{"class":61},[37,1054,1055],{"class":76},"}`",[37,1057,1058],{"class":61},"}\n",[37,1060,1061,1064,1066],{"class":39,"line":122},[37,1062,1063],{"class":61},"      {",[37,1065,1008],{"class":50},[37,1067,1068],{"class":61},"rest}\n",[37,1070,1071],{"class":39,"line":224},[37,1072,1073],{"class":61},"    \u002F>\n",[37,1075,1076],{"class":39,"line":230},[37,1077,1078],{"class":61},"  )\n",[37,1080,1081],{"class":39,"line":237},[37,1082,1058],{"class":61},[37,1084,1085],{"class":39,"line":243},[37,1086,92],{"emptyLinePlaceholder":91},[37,1088,1089,1091,1094,1097,1099,1102,1105,1107,1109,1112,1114,1117,1120,1122],{"class":39,"line":257},[37,1090,678],{"class":61},[37,1092,1093],{"class":54},"Button",[37,1095,1096],{"class":69}," size",[37,1098,73],{"class":50},[37,1100,1101],{"class":76},"\"large\"",[37,1103,1104],{"class":69}," variant",[37,1106,73],{"class":50},[37,1108,77],{"class":76},[37,1110,1111],{"class":69}," aria-label",[37,1113,73],{"class":50},[37,1115,1116],{"class":76},"\"Save\"",[37,1118,1119],{"class":69}," onClick",[37,1121,73],{"class":50},[37,1123,1124],{"class":61},"{save} \u002F>\n",[15,1126,1127],{},"The pattern lets wrapper components be transparent to arbitrary native\nattributes without listing them explicitly. Destructure known props first\nand spread the remainder to avoid forwarding internal props to DOM elements.",[10,1129,1131],{"id":1130},"comments-in-jsx","Comments in JSX",[15,1133,1134,1135,1137],{},"Inside JSX, comments must be wrapped in ",[34,1136,303],{}," and use block-comment syntax:",[27,1139,1141],{"className":29,"code":1140,"language":31,"meta":32,"style":32},"return (\n  \u003Cdiv>\n    {\u002F* This is a JSX comment *\u002F}\n    \u003Cp>Content\u003C\u002Fp>\n    {\u002F* \u003Cp>Commented-out element\u003C\u002Fp> *\u002F}\n  \u003C\u002Fdiv>\n)\n",[34,1142,1143,1149,1157,1167,1180,1189,1197],{"__ignoreMap":32},[37,1144,1145,1147],{"class":39,"line":40},[37,1146,181],{"class":50},[37,1148,184],{"class":61},[37,1150,1151,1153,1155],{"class":39,"line":47},[37,1152,189],{"class":61},[37,1154,358],{"class":65},[37,1156,85],{"class":61},[37,1158,1159,1162,1165],{"class":39,"line":88},[37,1160,1161],{"class":61},"    {",[37,1163,1164],{"class":43},"\u002F* This is a JSX comment *\u002F",[37,1166,1058],{"class":61},[37,1168,1169,1171,1173,1176,1178],{"class":39,"line":95},[37,1170,246],{"class":61},[37,1172,15],{"class":65},[37,1174,1175],{"class":61},">Content\u003C\u002F",[37,1177,15],{"class":65},[37,1179,85],{"class":61},[37,1181,1182,1184,1187],{"class":39,"line":101},[37,1183,1161],{"class":61},[37,1185,1186],{"class":43},"\u002F* \u003Cp>Commented-out element\u003C\u002Fp> *\u002F",[37,1188,1058],{"class":61},[37,1190,1191,1193,1195],{"class":39,"line":122},[37,1192,436],{"class":61},[37,1194,358],{"class":65},[37,1196,85],{"class":61},[37,1198,1199],{"class":39,"line":224},[37,1200,217],{"class":61},[15,1202,1203,1204,1207,1208,1210],{},"Standard ",[34,1205,1206],{},"\u002F\u002F"," comments work fine above the ",[34,1209,181],{}," in regular JavaScript scope.",[10,1212,1214],{"id":1213},"rendering-arrays-and-null","Rendering arrays and null",[15,1216,1217],{},"React renders arrays of elements as children:",[27,1219,1221],{"className":29,"code":1220,"language":31,"meta":32,"style":32},"return (\n  \u003Cul>\n    {items.map(item => \u003Cli key={item.id}>{item.name}\u003C\u002Fli>)}\n  \u003C\u002Ful>\n)\n",[34,1222,1223,1229,1238,1272,1280],{"__ignoreMap":32},[37,1224,1225,1227],{"class":39,"line":40},[37,1226,181],{"class":50},[37,1228,184],{"class":61},[37,1230,1231,1233,1236],{"class":39,"line":47},[37,1232,189],{"class":61},[37,1234,1235],{"class":65},"ul",[37,1237,85],{"class":61},[37,1239,1240,1243,1246,1248,1251,1254,1256,1259,1262,1264,1267,1269],{"class":39,"line":88},[37,1241,1242],{"class":61},"    {items.",[37,1244,1245],{"class":69},"map",[37,1247,134],{"class":61},[37,1249,1250],{"class":997},"item",[37,1252,1253],{"class":50}," =>",[37,1255,62],{"class":61},[37,1257,1258],{"class":65},"li",[37,1260,1261],{"class":69}," key",[37,1263,73],{"class":50},[37,1265,1266],{"class":61},"{item.id}>{item.name}\u003C\u002F",[37,1268,1258],{"class":65},[37,1270,1271],{"class":61},">)}\n",[37,1273,1274,1276,1278],{"class":39,"line":95},[37,1275,436],{"class":61},[37,1277,1235],{"class":65},[37,1279,85],{"class":61},[37,1281,1282],{"class":39,"line":101},[37,1283,217],{"class":61},[15,1285,1286,1287,1290],{},"Returning ",[34,1288,1289],{},"null"," renders nothing while keeping the component mounted (effects\nand refs still fire):",[27,1292,1294],{"className":29,"code":1293,"language":31,"meta":32,"style":32},"function Banner({ show, message }) {\n  if (!show) return null\n  return \u003Cdiv className=\"banner\">{message}\u003C\u002Fdiv>\n}\n",[34,1295,1296,1315,1334,1356],{"__ignoreMap":32},[37,1297,1298,1300,1303,1305,1308,1310,1313],{"class":39,"line":40},[37,1299,988],{"class":50},[37,1301,1302],{"class":69}," Banner",[37,1304,994],{"class":61},[37,1306,1307],{"class":997},"show",[37,1309,308],{"class":61},[37,1311,1312],{"class":997},"message",[37,1314,1014],{"class":61},[37,1316,1317,1320,1323,1326,1329,1331],{"class":39,"line":47},[37,1318,1319],{"class":50},"  if",[37,1321,1322],{"class":61}," (",[37,1324,1325],{"class":50},"!",[37,1327,1328],{"class":61},"show) ",[37,1330,181],{"class":50},[37,1332,1333],{"class":54}," null\n",[37,1335,1336,1338,1340,1342,1344,1346,1349,1352,1354],{"class":39,"line":88},[37,1337,1024],{"class":50},[37,1339,62],{"class":61},[37,1341,358],{"class":65},[37,1343,70],{"class":69},[37,1345,73],{"class":50},[37,1347,1348],{"class":76},"\"banner\"",[37,1350,1351],{"class":61},">{message}\u003C\u002F",[37,1353,358],{"class":65},[37,1355,85],{"class":61},[37,1357,1358],{"class":39,"line":95},[37,1359,1058],{"class":61},[15,1361,1362,1363,1365,1366,1369,1370,1373,1374,1376,1377,1380],{},"Differences worth knowing: ",[34,1364,845],{}," and ",[34,1367,1368],{},"undefined"," render nothing; ",[34,1371,1372],{},"0"," renders\nthe digit ",[34,1375,1372],{}," (the classic falsy-zero bug from ",[34,1378,1379],{},"{count && \u003CBadge \u002F>}",").",[10,1382,1384],{"id":1383},"what-the-interview-is-really-testing","What the interview is really testing",[15,1386,1387],{},"JSX questions are checking whether you know:",[1389,1390,1391,1402,1405,1410,1413],"ol",{},[1258,1392,1393,1394,1397,1398,1401],{},"JSX compiles to ",[34,1395,1396],{},"React.createElement"," (or ",[34,1399,1400],{},"_jsx"," with the new transform).",[1258,1403,1404],{},"Why attribute names differ from HTML (reserved words, camelCase convention).",[1258,1406,1407,1408,453],{},"How expressions vs statements work inside ",[34,1409,303],{},[1258,1411,1412],{},"Fragment semantics — why they exist and when to use the long form.",[1258,1414,1415,1416,1419],{},"Practical pitfalls: boolean attributes as strings, zero in ",[34,1417,1418],{},"&&",", double-brace\nstyle objects, self-closing requirements.",[15,1421,1422],{},"Know these and you'll answer JSX questions with confidence rather than guessing.",[867,1424,1425],{},"html pre.shiki code .sJ8bj, html code.shiki .sJ8bj{--shiki-default:#6A737D;--shiki-dark:#6A737D}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .sZZnC, html code.shiki .sZZnC{--shiki-default:#032F62;--shiki-dark:#9ECBFF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .s4XuR, html code.shiki .s4XuR{--shiki-default:#E36209;--shiki-dark:#FFAB70}",{"title":32,"searchDepth":47,"depth":47,"links":1427},[1428,1429,1430,1431,1432,1433,1434,1435,1436,1437],{"id":12,"depth":47,"text":13},{"id":162,"depth":47,"text":163},{"id":296,"depth":47,"text":297},{"id":549,"depth":47,"text":550},{"id":766,"depth":47,"text":767},{"id":861,"depth":47,"text":862},{"id":971,"depth":47,"text":972},{"id":1130,"depth":47,"text":1131},{"id":1213,"depth":47,"text":1214},{"id":1383,"depth":47,"text":1384},"React JSX interview questions — JSX syntax, transpilation, fragments, expressions, boolean attributes, and the differences between JSX and HTML.","easy","md","React","react",{"subtopicSlug":1444},"jsx-rendering","\u002Fblog\u002Freact-jsx-rendering-guide","\u002Freact\u002Fcomponents\u002Fjsx-rendering",{"title":5,"description":1438},"blog\u002Freact-jsx-rendering-guide","JSX and Rendering","Components","components","2026-06-23","j_IlkVIiVdJkYAYic90X2nNgheZd2d2jblQKR_Z8CaE",1782244083338]