[{"data":1,"prerenderedAt":311},["ShallowReactive",2],{"term-j\u002Fjsx":3,"related-j\u002Fjsx":298},{"id":4,"title":5,"acronym":5,"body":6,"category":279,"description":280,"difficulty":281,"extension":282,"letter":283,"meta":284,"navigation":168,"path":285,"related":286,"seo":291,"sitemap":292,"stem":295,"subcategory":296,"__hash__":297},"terms\u002Fterms\u002Fj\u002Fjsx.md","JSX",{"type":7,"value":8,"toc":273},"minimark",[9,14,18,22,25,29,262,266,269],[10,11,13],"h2",{"id":12},"eli5-the-vibe-check","ELI5 — The Vibe Check",[15,16,17],"p",{},"JSX is a JavaScript syntax extension that lets you write HTML-like code directly inside your JavaScript. React uses it to describe what the UI should look like. Your browser can't read it — a compiler (like Babel or esbuild) transforms it into plain function calls. It looks wild at first but you'll miss it when it's gone.",[10,19,21],{"id":20},"real-talk","Real Talk",[15,23,24],{},"JSX (JavaScript XML) is a syntax extension for JavaScript, popularized by React, that allows writing HTML-like syntax in JS files. JSX transpiles to React.createElement() calls (or the newer JSX transform's _jsx). It requires a build step (Babel, esbuild, SWC). JSX is not HTML — notable differences include className instead of class, camelCase event handlers, and self-closing required tags.",[10,26,28],{"id":27},"show-me-the-code","Show Me The Code",[30,31,36],"pre",{"className":32,"code":33,"language":34,"meta":35,"style":35},"language-jsx shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","\u002F\u002F JSX\nconst Button = ({ label, onClick }) => (\n  \u003Cbutton\n    className=\"btn btn-primary\"\n    onClick={onClick}\n  >\n    {label}\n  \u003C\u002Fbutton>\n)\n\n\u002F\u002F What it compiles to (old transform)\nconst Button = ({ label, onClick }) =>\n  React.createElement('button',\n    { className: 'btn btn-primary', onClick },\n    label\n  )\n","jsx","",[37,38,39,48,85,95,113,128,134,145,157,163,170,176,198,224,250,256],"code",{"__ignoreMap":35},[40,41,44],"span",{"class":42,"line":43},"line",1,[40,45,47],{"class":46},"sHwdD","\u002F\u002F JSX\n",[40,49,51,55,59,63,66,70,73,76,79,82],{"class":42,"line":50},2,[40,52,54],{"class":53},"spNyl","const",[40,56,58],{"class":57},"sTEyZ"," Button ",[40,60,62],{"class":61},"sMK4o","=",[40,64,65],{"class":61}," ({",[40,67,69],{"class":68},"sHdIc"," label",[40,71,72],{"class":61},",",[40,74,75],{"class":68}," onClick",[40,77,78],{"class":61}," })",[40,80,81],{"class":53}," =>",[40,83,84],{"class":57}," (\n",[40,86,88,91],{"class":42,"line":87},3,[40,89,90],{"class":61},"  \u003C",[40,92,94],{"class":93},"swJcz","button\n",[40,96,98,101,103,106,110],{"class":42,"line":97},4,[40,99,100],{"class":53},"    className",[40,102,62],{"class":61},[40,104,105],{"class":61},"\"",[40,107,109],{"class":108},"sfazB","btn btn-primary",[40,111,112],{"class":61},"\"\n",[40,114,116,119,122,125],{"class":42,"line":115},5,[40,117,118],{"class":53},"    onClick",[40,120,121],{"class":61},"={",[40,123,124],{"class":57},"onClick",[40,126,127],{"class":61},"}\n",[40,129,131],{"class":42,"line":130},6,[40,132,133],{"class":61},"  >\n",[40,135,137,140,143],{"class":42,"line":136},7,[40,138,139],{"class":61},"    {",[40,141,142],{"class":57},"label",[40,144,127],{"class":61},[40,146,148,151,154],{"class":42,"line":147},8,[40,149,150],{"class":61},"  \u003C\u002F",[40,152,153],{"class":93},"button",[40,155,156],{"class":61},">\n",[40,158,160],{"class":42,"line":159},9,[40,161,162],{"class":57},")\n",[40,164,166],{"class":42,"line":165},10,[40,167,169],{"emptyLinePlaceholder":168},true,"\n",[40,171,173],{"class":42,"line":172},11,[40,174,175],{"class":46},"\u002F\u002F What it compiles to (old transform)\n",[40,177,179,181,183,185,187,189,191,193,195],{"class":42,"line":178},12,[40,180,54],{"class":53},[40,182,58],{"class":57},[40,184,62],{"class":61},[40,186,65],{"class":61},[40,188,69],{"class":68},[40,190,72],{"class":61},[40,192,75],{"class":68},[40,194,78],{"class":61},[40,196,197],{"class":53}," =>\n",[40,199,201,204,207,211,214,217,219,221],{"class":42,"line":200},13,[40,202,203],{"class":57},"  React",[40,205,206],{"class":61},".",[40,208,210],{"class":209},"s2Zo4","createElement",[40,212,213],{"class":57},"(",[40,215,216],{"class":61},"'",[40,218,153],{"class":108},[40,220,216],{"class":61},[40,222,223],{"class":61},",\n",[40,225,227,229,232,235,238,240,242,244,247],{"class":42,"line":226},14,[40,228,139],{"class":61},[40,230,231],{"class":93}," className",[40,233,234],{"class":61},":",[40,236,237],{"class":61}," '",[40,239,109],{"class":108},[40,241,216],{"class":61},[40,243,72],{"class":61},[40,245,246],{"class":57}," onClick ",[40,248,249],{"class":61},"},\n",[40,251,253],{"class":42,"line":252},15,[40,254,255],{"class":57},"    label\n",[40,257,259],{"class":42,"line":258},16,[40,260,261],{"class":57},"  )\n",[10,263,265],{"id":264},"when-youll-hear-this","When You'll Hear This",[15,267,268],{},"JSX uses className, not class — it's a JavaScript keyword.,Curly braces {} in JSX let you inject any JavaScript expression.,JSX must return a single root element (use fragments \u003C> \u003C\u002F> to avoid extra divs).",[270,271,272],"style",{},"html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}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);}",{"title":35,"searchDepth":50,"depth":50,"links":274},[275,276,277,278],{"id":12,"depth":50,"text":13},{"id":20,"depth":50,"text":21},{"id":27,"depth":50,"text":28},{"id":264,"depth":50,"text":265},"frontend","JSX is a JavaScript syntax extension that lets you write HTML-like code directly inside your JavaScript.","beginner","md","j",{},"\u002Fterms\u002Fj\u002Fjsx",[287,288,289,290],"Bundle","Bundler","Vite","Arrow Function",{"title":5,"description":280},{"changefreq":293,"priority":294},"weekly",0.7,"terms\u002Fj\u002Fjsx",null,"i6PqXJq5W00ocdlgtfm_ufNPNofBHew9Dak3mqwN6II",[299,302,305,308],{"title":290,"path":300,"acronym":296,"category":279,"difficulty":281,"description":301},"\u002Fterms\u002Fa\u002Farrow-function","Arrow functions are a shorter way to write functions in JavaScript. Instead of writing 'function(x) { return x * 2 }' you write '(x) => x * 2'.",{"title":287,"path":303,"acronym":296,"category":279,"difficulty":281,"description":304},"\u002Fterms\u002Fb\u002Fbundle","Imagine your code is a pile of LEGO instructions split across 50 tiny papers.",{"title":288,"path":306,"acronym":296,"category":279,"difficulty":281,"description":307},"\u002Fterms\u002Fb\u002Fbundler","A bundler is the robot that smashes all your separate JavaScript files, CSS, images, and random imports into one (or a few) neat packages that the browser...",{"title":289,"path":309,"acronym":296,"category":279,"difficulty":281,"description":310},"\u002Fterms\u002Fv\u002Fvite","Vite is what happens when someone got sick of waiting 30 seconds for Webpack to start.",1776518289792]