{"id":253,"date":"2026-10-30T02:32:26","date_gmt":"2026-10-30T02:32:26","guid":{"rendered":"https:\/\/devdojo.co.in\/?p=253"},"modified":"2026-10-30T02:32:27","modified_gmt":"2026-10-30T02:32:27","slug":"react-series-part-2-jsx-explained","status":"publish","type":"post","link":"https:\/\/devdojo.co.in\/index.php\/2026\/10\/30\/react-series-part-2-jsx-explained\/","title":{"rendered":"React Part 2: JSX Explained: Writing HTML-Like Code in JavaScript"},"content":{"rendered":"\n<div class=\"dd-post\">\n<style>\n.single article:has(.dd-hero) .entry-media{display:none}\n.dd-post{--navy:#0b1020;--blue:#3178c6;--violet:#7c5cff;--ink:#1f2433;--muted:#5b6275;--line:#e3e6ef;font-size:17px;line-height:1.75;color:var(--ink)}\n.dd-post h2{margin:2.2em 0 .6em;font-size:1.6em;line-height:1.3;scroll-margin-top:90px}\n.dd-post h3{margin:1.6em 0 .5em;font-size:1.22em;scroll-margin-top:90px}\n.dd-post a{color:var(--blue);text-decoration:underline;text-underline-offset:3px}\n.dd-post pre{background:#0f1430;color:#e6e9f5;padding:18px 20px;border-radius:12px;overflow-x:auto;line-height:1.6;border:1px solid #232a52;margin:1.2em 0;font-size:14.5px !important}\n.dd-post pre code{font-size:1em !important;background:none;color:inherit;padding:0;font-family:\"JetBrains Mono\",\"Fira Code\",Consolas,Menlo,monospace;white-space:pre}\n.dd-post :not(pre)>code{background:#eef1fb;color:#2b3a8f;padding:2px 6px;border-radius:5px;font-size:.9em}\n.dd-post .dd-file{display:inline-block;background:#151b3b;color:#c9d1ff;font:600 13px\/1 \"JetBrains Mono\",Consolas,monospace;padding:7px 12px;border-radius:8px 8px 0 0;margin:1em 0 -1.2em;position:relative}\n.dd-post .dd-hero{margin:0 0 1.6em;border-radius:16px;overflow:hidden;box-shadow:0 10px 30px rgba(11,16,32,.25)}\n.dd-post .dd-hero svg{display:block;width:100%;height:auto}\n.dd-post .dd-hero .node{transition:transform .25s,filter .25s;transform-box:fill-box;transform-origin:center;cursor:pointer}\n.dd-post .dd-hero .node:hover{transform:scale(1.08);filter:drop-shadow(0 0 10px #7c5cff)}\n.dd-post .dd-series{display:inline-flex;align-items:center;gap:8px;background:#151b3b;color:#dfe3ff;border-radius:999px;padding:6px 14px;font-size:.88em;font-weight:600;margin:0 0 .8em}\n.dd-post .dd-series span{background:var(--violet);color:#fff;border-radius:999px;padding:2px 10px}\n.dd-post .dd-prereq{font-size:.96em;color:var(--muted);border-left:3px solid var(--line);padding-left:12px;margin:.6em 0 1.2em}\n.dd-post .dd-summary{background:linear-gradient(135deg,#eef3ff,#f4efff);border:1px solid #d6dcf5;border-left:5px solid var(--violet);border-radius:12px;padding:18px 22px;margin:1.4em 0}\n.dd-post .dd-summary strong.lbl{display:block;font-size:1.05em;margin-bottom:6px;color:#3a2fa0}\n.dd-post .dd-summary ul{margin:.3em 0 0 1.1em}\n.dd-post .dd-toc{background:#f8f9fc;border:1px solid var(--line);border-radius:12px;padding:16px 22px;margin:1.4em 0}\n.dd-post .dd-toc ol{margin:.4em 0 0 1.2em;columns:2;column-gap:28px}\n.dd-post .dd-toc li{break-inside:avoid;margin:.15em 0}\n@media(max-width:640px){.dd-post .dd-toc ol{columns:1}}\n.dd-post .dd-tip,.dd-post .dd-note,.dd-post .dd-warn{border-radius:10px;padding:14px 18px;margin:1.3em 0}\n.dd-post .dd-tip{background:#ecfbf3;border-left:4px solid #1f9d61}\n.dd-post .dd-note{background:#eef4ff;border-left:4px solid var(--blue)}\n.dd-post .dd-warn{background:#fff6e8;border-left:4px solid #e08a00}\n.dd-post .dd-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin:1.3em 0}\n.dd-post .dd-card{border:1px solid var(--line);border-radius:12px;padding:14px 16px;background:#fff;box-shadow:0 2px 8px rgba(20,30,70,.05)}\n.dd-post .dd-card b{display:block;color:#3a2fa0;margin-bottom:4px}\n.dd-post table{width:100%;border-collapse:collapse;margin:1.3em 0;font-size:.95em}\n.dd-post th,.dd-post td{border:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top}\n.dd-post th{background:#151b3b;color:#fff}\n.dd-post tr:nth-child(even) td{background:#f8f9fc}\n.dd-post .dd-tablewrap{overflow-x:auto}\n.dd-post figure{margin:1.6em 0;text-align:center}\n.dd-post figure svg{width:100%;height:auto;border-radius:12px}\n.dd-post figcaption{font-size:.9em;color:var(--muted);margin-top:8px}\n.dd-post details{border:1px solid var(--line);border-radius:10px;padding:12px 16px;margin:.7em 0;background:#fff}\n.dd-post details summary{cursor:pointer;font-weight:600}\n.dd-post details[open] summary{margin-bottom:8px;color:#3a2fa0}\n.dd-post .dd-roadmap{border:2px solid #d6dcf5;background:#fbfbff}\n.dd-post .dd-roadmap h4{margin:1em 0 .3em;color:#151b3b;font-size:1em;text-transform:uppercase;letter-spacing:.04em}\n.dd-post .dd-roadmap ol{margin:.2em 0 .6em 1.4em;padding:0}\n.dd-post .dd-roadmap li{margin:.2em 0}\n.dd-post .dd-roadmap .here{background:var(--violet);color:#fff;border-radius:999px;padding:1px 9px;font-size:.8em;font-weight:700;margin-left:6px}\n.dd-post .dd-roadmap .soon{color:#8a90a6;font-size:.82em;margin-left:6px}\n.dd-post .dd-tabs{border:1px solid var(--line);border-radius:12px;padding:6px 16px 16px;margin:1.4em 0;background:#fbfbfe}\n.dd-post .dd-tabs>input{position:absolute;opacity:0;pointer-events:none}\n.dd-post .dd-tabs .labels label{display:inline-block;padding:8px 16px;margin:10px 6px 0 0;border-radius:999px;border:1px solid #cfd5ea;cursor:pointer;font-weight:600;font-size:.95em;background:#fff;transition:background .2s}\n.dd-post .dd-tabs .labels label:hover{border-color:var(--violet)}\n.dd-post .dd-tabs .panel{display:none;margin-top:12px}\n.dd-post .dd-tabs #ti1:checked~.labels label[for=ti1],.dd-post .dd-tabs #ti2:checked~.labels label[for=ti2],.dd-post .dd-tabs #ti3:checked~.labels label[for=ti3],.dd-post .dd-tabs #ti4:checked~.labels label[for=ti4]{background:var(--violet);color:#fff;border-color:var(--violet)}\n.dd-post .dd-tabs #ti1:checked~.p1,.dd-post .dd-tabs #ti2:checked~.p2,.dd-post .dd-tabs #ti3:checked~.p3,.dd-post .dd-tabs #ti4:checked~.p4{display:block}\n.dd-post .dd-tabs #ti1:focus-visible~.labels label[for=ti1],.dd-post .dd-tabs #ti2:focus-visible~.labels label[for=ti2],.dd-post .dd-tabs #ti3:focus-visible~.labels label[for=ti3],.dd-post .dd-tabs #ti4:focus-visible~.labels label[for=ti4]{outline:2px solid var(--blue);outline-offset:2px}\n.dd-post .dd-cta{background:linear-gradient(135deg,#0b1020,#151b3b);color:#e8ebff;border-radius:16px;padding:24px 26px;margin:2em 0;text-align:center}\n.dd-post .dd-cta h3{color:#fff;margin-top:0}\n.dd-post .dd-cta a{color:#a99bff}\n.dd-post .dd-vsc{position:relative;margin:1.5em 0;border-radius:12px;overflow:hidden;background:#1e1e1e;border:1px solid #2b2b2b;box-shadow:0 14px 34px rgba(0,0,0,.28);font-family:\"Segoe UI\",system-ui,sans-serif}\n.dd-post .dd-vsc>input{position:absolute;opacity:0;pointer-events:none}\n.dd-post .dd-vsc-bar{display:flex;align-items:center;gap:12px;background:#323233;color:#cccccc;font-size:12.5px;padding:8px 12px}\n.dd-post .dd-dots{display:inline-flex;gap:7px}.dd-post .dd-dots i{width:12px;height:12px;border-radius:50%;background:#ff5f57;display:block}.dd-post .dd-dots i:nth-child(2){background:#febc2e}.dd-post .dd-dots i:nth-child(3){background:#28c840}\n.dd-post .dd-vsc-title{flex:1;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding-right:50px;opacity:.85}\n.dd-post .dd-vsc-tabs{display:flex;align-items:stretch;background:#252526;border-bottom:1px solid #1e1e1e;overflow-x:auto}\n.dd-post .dd-vsc-tabs label{display:flex;align-items:center;gap:7px;padding:9px 16px;color:#969696;font-size:13px;cursor:pointer;background:#2d2d2d;border-right:1px solid #252526;border-top:1px solid transparent;white-space:nowrap;margin:0;transition:color .15s}\n.dd-post .dd-vsc-tabs label:hover{color:#e0e0e0}\n.dd-post .dd-vsc-tabs .ic{font:700 9.5px\/1 Consolas,monospace;padding:3px 4px;border-radius:3px;color:#1e1e1e}\n.dd-post .ic.py{background:#ffd43b}.dd-post .ic.js{background:#f1e05a}.dd-post .ic.sh{background:#89e051}\n.dd-post .dd-vsc-tabs label.run{margin-left:auto;background:transparent;border:0;color:#89d185;font-weight:600;display:none}\n.dd-post .dd-vsc-tabs label.run:hover{color:#b5f0b0;background:#2a2d2e}\n.dd-post .dd-vsc-pane{display:none}\n.dd-post .dd-vsc>.f1:checked~.dd-vsc-tabs .t1,.dd-post .dd-vsc>.f2:checked~.dd-vsc-tabs .t2,.dd-post .dd-vsc>.f3:checked~.dd-vsc-tabs .t3{background:#1e1e1e;color:#ffffff;border-top-color:#3178c6}\n.dd-post .dd-vsc>.f1:checked~.p1,.dd-post .dd-vsc>.f2:checked~.p2,.dd-post .dd-vsc>.f3:checked~.p3{display:block}\n.dd-post .dd-vsc>.f1:checked~.dd-vsc-tabs .run1,.dd-post .dd-vsc>.f2:checked~.dd-vsc-tabs .run2,.dd-post .dd-vsc>.f3:checked~.dd-vsc-tabs .run3{display:flex}\n.dd-post .dd-vsc>.f1:focus-visible~.dd-vsc-tabs .t1,.dd-post .dd-vsc>.f2:focus-visible~.dd-vsc-tabs .t2,.dd-post .dd-vsc>.f3:focus-visible~.dd-vsc-tabs .t3,.dd-post .dd-vsc>input[type=checkbox]:focus-visible~.dd-vsc-tabs .run{outline:2px solid #3178c6;outline-offset:-2px}\n.dd-post .dd-vsc-crumbs{background:#1e1e1e;color:#a9a9a9;font-size:12px;padding:5px 16px 2px}\n.dd-post .dd-vsc pre.dd-vsc-code{background:#1e1e1e;color:#d4d4d4;border:0;border-radius:0;margin:0;padding:8px 0 14px;counter-reset:ln;line-height:1.62;overflow-x:auto}\n.dd-post .dd-vsc pre code{font-family:Consolas,\"JetBrains Mono\",\"Fira Code\",Menlo,monospace;color:inherit;background:none;white-space:pre}\n.dd-post .dd-vsc .l{display:inline-block;min-width:100%;padding-right:18px;box-sizing:border-box}\n.dd-post .dd-vsc .l::before{counter-increment:ln;content:counter(ln);display:inline-block;width:3.2em;padding-right:1.4em;text-align:right;color:#6e7681;user-select:none;-webkit-user-select:none}\n.dd-post .dd-vsc .l:hover{background:#2a2d2e}.dd-post .dd-vsc .l:hover::before{color:#c6c6c6}\n.dd-post .dd-vsc .k,.dd-post .dd-vsc .kn{color:#c586c0}.dd-post .dd-vsc .kc{color:#569cd6}.dd-post .dd-vsc .s{color:#ce9178}.dd-post .dd-vsc .c{color:#6a9955}.dd-post .dd-vsc .m{color:#b5cea8}.dd-post .dd-vsc .nf{color:#dcdcaa}.dd-post .dd-vsc .nc{color:#4ec9b0}.dd-post .dd-vsc .nb{color:#4ec9b0}.dd-post .dd-vsc .nd{color:#dcdcaa}.dd-post .dd-vsc .n{color:#9cdcfe}.dd-post .dd-vsc .o{color:#d4d4d4}.dd-post .dd-vsc .gp{color:#89d185;user-select:none;-webkit-user-select:none}\n.dd-post .dd-vsc-term{display:none;border-top:1px solid #3c3c3c;background:#181818}\n.dd-post .dd-vsc>.r1:checked~.p1 .dd-vsc-term,.dd-post .dd-vsc>.r2:checked~.p2 .dd-vsc-term,.dd-post .dd-vsc>.r3:checked~.p3 .dd-vsc-term{display:block;animation:ddterm .35s ease-out}\n@keyframes ddterm{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}\n.dd-post .dd-term-head{display:flex;gap:18px;align-items:center;font-size:11px;letter-spacing:.06em;color:#8b8b8b;padding:7px 16px 0}\n.dd-post .dd-term-head span:first-child{color:#e7e7e7;border-bottom:1px solid #e7e7e7;padding-bottom:4px}\n.dd-post .dd-term-head .dd-term-note{margin-left:auto;letter-spacing:0;text-transform:none;color:#d7ba7d;border:0;font-size:11.5px}\n.dd-post .dd-vsc-term pre{background:#181818;color:#cccccc;border:0;margin:0;padding:10px 16px 14px;border-radius:0}\n.dd-post .dd-vsc-status{display:flex;flex-wrap:wrap;gap:4px 14px;background:#007acc;color:#fff;font-size:11.5px;padding:4px 12px}\n.dd-post .dd-vsc-status .sp{flex:1}\n.dd-post .dd-vsc-termonly pre.dd-vsc-code{background:#181818;padding:12px 16px}\n@media(max-width:640px){.dd-post .dd-vsc-title{padding-right:0;text-align:left}.dd-post .dd-vsc-status span:nth-child(n+4){display:none}.dd-post .dd-vsc .l::before{width:2.2em;padding-right:1em}}\n.dd-post .dd-vsc-hint{font-size:.93em;color:var(--muted);margin-top:-.6em}\n.dd-post .dd-next{border:1px dashed var(--violet);border-radius:12px;padding:16px 20px;margin:1.6em 0;background:#f7f4ff}\n.dd-post .ic.yml{background:#cb3837;color:#fff}\n.dd-post .ic.jsx{background:#61dafb}.dd-post .ic.html{background:#e44d26;color:#fff}.dd-post .ic.css{background:#563d7c;color:#fff}\n.dd-post .dd-steps{counter-reset:st;list-style:none;margin:1.2em 0;padding:0}\n.dd-post .dd-steps>li{position:relative;padding:0 0 0 46px;margin:0 0 14px}\n.dd-post .dd-steps>li::before{counter-increment:st;content:counter(st);position:absolute;left:0;top:2px;width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#3178c6,#7c5cff);color:#fff;font-weight:700;text-align:center;line-height:32px}\n<\/style>\n\n<div class=\"dd-hero\">\n<svg viewBox=\"0 0 1200 520\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" role=\"img\" aria-label=\"React series Part 2 banner: a line of JSX code flows into a JavaScript function call and then into a real heading on the page\">\n<defs>\n<linearGradient id=\"ddbg\" x1=\"0\" y1=\"0\" x2=\"1\" y2=\"1\"><stop offset=\"0\" stop-color=\"#0b1020\"\/><stop offset=\"1\" stop-color=\"#151b3b\"\/><\/linearGradient>\n<linearGradient id=\"ddac\" x1=\"0\" y1=\"0\" x2=\"1\" y2=\"0\"><stop offset=\"0\" stop-color=\"#3178c6\"\/><stop offset=\"1\" stop-color=\"#7c5cff\"\/><\/linearGradient>\n<radialGradient id=\"ddglow\" cx=\".5\" cy=\".5\" r=\".5\"><stop offset=\"0\" stop-color=\"#7c5cff\" stop-opacity=\".45\"\/><stop offset=\"1\" stop-color=\"#7c5cff\" stop-opacity=\"0\"\/><\/radialGradient>\n<\/defs>\n<rect x=\"0\" y=\"-60\" width=\"1200\" height=\"640\" fill=\"url(#ddbg)\"\/>\n<circle cx=\"900\" cy=\"270\" r=\"280\" fill=\"url(#ddglow)\"\/>\n<g opacity=\".12\" stroke=\"#9fb2ff\"><path d=\"M0 100H1200M0 200H1200M0 300H1200M0 400H1200M200 0V520M400 0V520M600 0V520M800 0V520M1000 0V520\"\/><\/g>\n<rect x=\"60\" y=\"46\" width=\"128\" height=\"38\" rx=\"19\" fill=\"url(#ddac)\"\/>\n<text x=\"124\" y=\"71\" text-anchor=\"middle\" font-family=\"Segoe UI,Arial,sans-serif\" font-size=\"18\" font-weight=\"700\" fill=\"#fff\">PART 2<\/text>\n<text x=\"204\" y=\"71\" font-family=\"Segoe UI,Arial,sans-serif\" font-size=\"18\" fill=\"#aab4e8\">React Series \u00b7 DevDojo<\/text>\n<text x=\"60\" y=\"150\" font-family=\"Segoe UI,Arial,sans-serif\" font-size=\"56\" font-weight=\"800\" fill=\"#ffffff\">JSX Explained<\/text>\n<text x=\"60\" y=\"208\" font-family=\"Segoe UI,Arial,sans-serif\" font-size=\"40\" font-weight=\"800\" fill=\"#c9d1ff\">HTML-Like Code in JavaScript<\/text>\n<text x=\"60\" y=\"252\" font-family=\"Segoe UI,Arial,sans-serif\" font-size=\"23\" fill=\"#aab4e8\">Curly braces, className, fragments and the rules beginners miss<\/text>\n<path id=\"ddflow\" d=\"M330 370 H470 M690 370 H840\" fill=\"none\" stroke=\"url(#ddac)\" stroke-width=\"3\" stroke-dasharray=\"8 8\" opacity=\".8\"\/>\n<g class=\"node\"><rect x=\"60\" y=\"320\" width=\"270\" height=\"100\" rx=\"14\" fill=\"#1e1e1e\" stroke=\"#61dafb\" stroke-width=\"2\"\/><circle cx=\"82\" cy=\"340\" r=\"5\" fill=\"#ff5f57\"\/><circle cx=\"98\" cy=\"340\" r=\"5\" fill=\"#febc2e\"\/><circle cx=\"114\" cy=\"340\" r=\"5\" fill=\"#28c840\"\/><text x=\"80\" y=\"376\" font-family=\"Consolas,DejaVu Sans Mono,monospace\" font-size=\"17\" fill=\"#569cd6\">&lt;h1&gt;<tspan fill=\"#d4d4d4\">Hi, <\/tspan><tspan fill=\"#9cdcfe\">{name}<\/tspan>&lt;\/h1&gt;<\/text><text x=\"80\" y=\"404\" font-family=\"Segoe UI,Arial,sans-serif\" font-size=\"14\" fill=\"#7f89b5\">You write JSX<\/text><\/g>\n<g class=\"node\"><rect x=\"470\" y=\"320\" width=\"220\" height=\"100\" rx=\"14\" fill=\"#0b1020\" stroke=\"#7c5cff\" stroke-width=\"2\"\/><text x=\"490\" y=\"366\" font-family=\"Consolas,DejaVu Sans Mono,monospace\" font-size=\"17\" fill=\"#dcdcaa\">jsx(<tspan fill=\"#ce9178\">&#8220;h1&#8221;<\/tspan>, {\u2026})<\/text><text x=\"490\" y=\"398\" font-family=\"Segoe UI,Arial,sans-serif\" font-size=\"14\" fill=\"#7f89b5\">Build tool turns it into JS<\/text><\/g>\n<g class=\"node\"><rect x=\"840\" y=\"320\" width=\"300\" height=\"100\" rx=\"14\" fill=\"#ffffff\" stroke=\"#3178c6\" stroke-width=\"2\"\/><text x=\"862\" y=\"368\" font-family=\"Segoe UI,Arial,sans-serif\" font-size=\"30\" font-weight=\"800\" fill=\"#151b3b\">Hi, Asha<\/text><text x=\"862\" y=\"400\" font-family=\"Segoe UI,Arial,sans-serif\" font-size=\"14\" fill=\"#5b6275\">React shows it on the page<\/text><\/g>\n<circle r=\"7\" fill=\"#61dafb\"><animateMotion dur=\"3s\" repeatCount=\"indefinite\" path=\"M330 370 H470\"\/><\/circle>\n<circle r=\"7\" fill=\"#7c5cff\"><animateMotion dur=\"3s\" begin=\"1.5s\" repeatCount=\"indefinite\" path=\"M690 370 H840\"\/><\/circle>\n<text x=\"60\" y=\"490\" font-family=\"Segoe UI,Arial,sans-serif\" font-size=\"16\" fill=\"#7f89b5\">devdojo.co.in \u00b7 Beginner friendly \u00b7 React 19 + Vite 8<\/text>\n<\/svg>\n<\/div>\n\n<div class=\"dd-series\">Series: React <span>Part 2 of 30<\/span><\/div>\n<p class=\"dd-prereq\"><strong>What you should know first:<\/strong> read <a href=\"https:\/\/devdojo.co.in\/index.php\/2026\/10\/22\/react-series-part-1-what-is-react\/\">React Part 1: What Is React and How to Build Your First React App<\/a>. You should have Node.js installed and know how to start a Vite project with <code>npm run dev<\/code>.<\/p>\n\n<p>When you open any React component, the first thing you notice is code that looks like HTML sitting right inside JavaScript. That is <strong>JSX in React<\/strong>, and it is the syntax you will write every single day as a React developer. In this second part of the React series you will learn what JSX really is, how a build tool turns it into plain JavaScript, how to put values inside it with curly braces, and the small rules (like <code>className<\/code> and closing every tag) that confuse almost every beginner. Every example below is real code that we ran, with the real output.<\/p>\n\n<div class=\"dd-summary\">\n<strong class=\"lbl\">Quick Summary<\/strong>\n<ul>\n<li><strong>JSX<\/strong> is a syntax extension for JavaScript that lets you describe UI with HTML-like tags. Browsers cannot read it directly.<\/li>\n<li>Your build tool (Vite, Next.js) changes every JSX tag into a function call such as <code>jsx(\"h1\", {...})<\/code>, which creates a plain JavaScript object called a React element.<\/li>\n<li>Use <code>{ }<\/code> to put any JavaScript <em>expression<\/em> inside JSX: variables, maths, function calls, ternaries, <code>map()<\/code>.<\/li>\n<li>Main rules: return one parent element (or a fragment <code>&lt;&gt;...&lt;\/&gt;<\/code>), close every tag, use camelCase attributes, write <code>className<\/code> and <code>htmlFor<\/code>, and pass <code>style<\/code> as an object.<\/li>\n<li>JSX escapes values automatically, which protects your app from many script injection (XSS) attacks.<\/li>\n<\/ul>\n<\/div>\n\n<div class=\"dd-toc\">\n<strong>Table of contents<\/strong>\n<ol>\n<li><a href=\"#what-is-jsx\">What is JSX in React?<\/a><\/li>\n<li><a href=\"#how-jsx-works\">How JSX becomes JavaScript<\/a><\/li>\n<li><a href=\"#setup\">Set up a JSX playground<\/a><\/li>\n<li><a href=\"#curly-braces\">Curly braces: JavaScript inside JSX<\/a><\/li>\n<li><a href=\"#jsx-rules\">The rules of JSX<\/a><\/li>\n<li><a href=\"#attributes\">HTML vs JSX attributes<\/a><\/li>\n<li><a href=\"#full-example\">A complete JSX example<\/a><\/li>\n<li><a href=\"#errors\">Common errors and fixes<\/a><\/li>\n<li><a href=\"#best-practices\">Best practices<\/a><\/li>\n<li><a href=\"#practice\">Practice task<\/a><\/li>\n<li><a href=\"#faq\">FAQ<\/a><\/li>\n<li><a href=\"#conclusion\">Conclusion<\/a><\/li>\n<\/ol>\n<\/div>\n\n<details class=\"dd-roadmap\">\n<summary>Full React roadmap (30 parts)<\/summary>\n<h4>Beginner<\/h4>\n<ol start=\"1\">\n<li><a href=\"https:\/\/devdojo.co.in\/index.php\/2026\/10\/22\/react-series-part-1-what-is-react\/\">What Is React and How to Build Your First React App<\/a><\/li>\n<li>JSX Explained: Writing HTML-Like Code in JavaScript <span class=\"here\">You are here<\/span><\/li>\n<li>Components and Props: Building Reusable UI <span class=\"soon\">Coming soon<\/span><\/li>\n<li>State with useState: Making Components Interactive <span class=\"soon\">Coming soon<\/span><\/li>\n<li>Handling Events and Forms in React <span class=\"soon\">Coming soon<\/span><\/li>\n<li>Conditional Rendering and Lists with Keys <span class=\"soon\">Coming soon<\/span><\/li>\n<li>Styling React Apps: Plain CSS, CSS Modules and Tailwind <span class=\"soon\">Coming soon<\/span><\/li>\n<li>useEffect: Side Effects, Data Fetching and Cleanup <span class=\"soon\">Coming soon<\/span><\/li>\n<li>Lifting State Up: Sharing Data Between Components <span class=\"soon\">Coming soon<\/span><\/li>\n<li>Mini Project: Build a To-Do App with React <span class=\"soon\">Coming soon<\/span><\/li>\n<\/ol>\n<h4>Intermediate<\/h4>\n<ol start=\"11\">\n<li>useRef: Working with the DOM and Keeping Values <span class=\"soon\">Coming soon<\/span><\/li>\n<li>useContext: Sharing Data Without Prop Drilling <span class=\"soon\">Coming soon<\/span><\/li>\n<li>useReducer: Managing Complex State <span class=\"soon\">Coming soon<\/span><\/li>\n<li>Custom Hooks: Reusing Logic Across Components <span class=\"soon\">Coming soon<\/span><\/li>\n<li>React Router: Pages, Links and Dynamic Routes <span class=\"soon\">Coming soon<\/span><\/li>\n<li>Fetching Server Data with TanStack Query <span class=\"soon\">Coming soon<\/span><\/li>\n<li>Forms the Modern Way: Actions, useActionState and Validation <span class=\"soon\">Coming soon<\/span><\/li>\n<li>React with TypeScript: Typing Props, State and Events <span class=\"soon\">Coming soon<\/span><\/li>\n<li>Global State: Context vs Zustand vs Redux Toolkit <span class=\"soon\">Coming soon<\/span><\/li>\n<li>Testing React Apps with Vitest and React Testing Library <span class=\"soon\">Coming soon<\/span><\/li>\n<\/ol>\n<h4>Advanced<\/h4>\n<ol start=\"21\">\n<li>How Rendering Works: Re-renders, Reconciliation and Keys <span class=\"soon\">Coming soon<\/span><\/li>\n<li>Performance: memo, useMemo, useCallback and the React Compiler <span class=\"soon\">Coming soon<\/span><\/li>\n<li>Code Splitting with lazy() and Suspense <span class=\"soon\">Coming soon<\/span><\/li>\n<li>Concurrent React: useTransition and useDeferredValue <span class=\"soon\">Coming soon<\/span><\/li>\n<li>Error Boundaries and Handling Errors Gracefully <span class=\"soon\">Coming soon<\/span><\/li>\n<li>The use() API and Optimistic UI with useOptimistic <span class=\"soon\">Coming soon<\/span><\/li>\n<li>React Server Components and Server Functions <span class=\"soon\">Coming soon<\/span><\/li>\n<li>Accessibility in React Apps <span class=\"soon\">Coming soon<\/span><\/li>\n<li>React Patterns for Large Apps: Folder Structure and Composition <span class=\"soon\">Coming soon<\/span><\/li>\n<li>Final Project: Build and Deploy a Complete React App <span class=\"soon\">Coming soon<\/span><\/li>\n<\/ol>\n<\/details>\n<\/div>\n\n\n\n<div class=\"dd-post\">\n<h2 id=\"what-is-jsx\">What is JSX in React?<\/h2>\n<p><strong>JSX<\/strong> stands for <em>JavaScript XML<\/em>. It is a syntax extension for JavaScript that lets you write markup that looks like HTML inside your JavaScript files. React made it popular, and today it is the standard way to describe what a React component should show on the screen.<\/p>\n<p>Here is the smallest possible piece of JSX:<\/p>\n<p><code>const heading = &lt;h1&gt;Hello, DevDojo!&lt;\/h1&gt;;<\/code><\/p>\n<p>This is not a string (there are no quotes) and it is not real HTML either. It is a JavaScript <em>expression<\/em>. You can store it in a variable, return it from a function, put it inside an array or pass it to another component, exactly like a number or an object.<\/p>\n<div class=\"dd-cards\">\n<div class=\"dd-card\"><b>Looks like HTML<\/b>Tags, attributes and nesting feel familiar, so you can read a component and picture the page.<\/div>\n<div class=\"dd-card\"><b>Works like JavaScript<\/b>Inside <code>{ }<\/code> you can use variables, functions and logic. No separate template language to learn.<\/div>\n<div class=\"dd-card\"><b>Keeps UI and logic together<\/b>The markup and the code that controls it live in the same component file, which makes it easier to change.<\/div>\n<\/div>\n<div class=\"dd-note\"><strong>Is JSX required?<\/strong> No. React works without JSX, but writing UI with raw function calls is long and hard to read. Almost every React project, tutorial and job uses JSX, so learning it well is worth it.<\/div>\n\n<h2 id=\"how-jsx-works\">How JSX becomes JavaScript<\/h2>\n<p>Browsers only understand plain JavaScript. So before your code reaches the browser, a build tool (Vite uses a fast compiler for this, Next.js uses SWC, older setups use Babel) <strong>transforms<\/strong> every JSX tag into a normal function call. With React 19 the modern &#8220;automatic&#8221; JSX runtime is used, so the call is <code>jsx()<\/code> or <code>jsxs()<\/code> imported from <code>react\/jsx-runtime<\/code>. You never import it yourself; the tool adds it for you.<\/p>\n\n<figure>\n<svg viewBox=\"0 0 1000 300\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" role=\"img\" aria-label=\"Diagram: JSX source code is compiled by a build tool into a jsx function call, which returns a React element object, which React DOM turns into a real HTML element in the browser\">\n<rect width=\"1000\" height=\"300\" rx=\"14\" fill=\"#0b1020\"\/>\n<g font-family=\"Segoe UI,Arial,sans-serif\">\n<rect x=\"20\" y=\"70\" width=\"210\" height=\"130\" rx=\"12\" fill=\"#1e1e1e\" stroke=\"#61dafb\" stroke-width=\"2\"\/>\n<text x=\"125\" y=\"102\" text-anchor=\"middle\" fill=\"#61dafb\" font-size=\"17\" font-weight=\"700\">1. JSX you write<\/text>\n<text x=\"125\" y=\"140\" text-anchor=\"middle\" fill=\"#d4d4d4\" font-size=\"15\" font-family=\"Consolas,DejaVu Sans Mono,monospace\">&lt;h1 className=<\/text>\n<text x=\"125\" y=\"164\" text-anchor=\"middle\" fill=\"#d4d4d4\" font-size=\"15\" font-family=\"Consolas,DejaVu Sans Mono,monospace\">&#8220;title&#8221;&gt;Hi&lt;\/h1&gt;<\/text>\n<rect x=\"265\" y=\"70\" width=\"210\" height=\"130\" rx=\"12\" fill=\"#151b3b\" stroke=\"#7c5cff\" stroke-width=\"2\"\/>\n<text x=\"370\" y=\"102\" text-anchor=\"middle\" fill=\"#b9a8ff\" font-size=\"17\" font-weight=\"700\">2. Build tool<\/text>\n<text x=\"370\" y=\"140\" text-anchor=\"middle\" fill=\"#dcdcaa\" font-size=\"15\" font-family=\"Consolas,DejaVu Sans Mono,monospace\">jsx(&#8220;h1&#8221;, {<\/text>\n<text x=\"370\" y=\"164\" text-anchor=\"middle\" fill=\"#dcdcaa\" font-size=\"15\" font-family=\"Consolas,DejaVu Sans Mono,monospace\">className, children})<\/text>\n<rect x=\"510\" y=\"70\" width=\"210\" height=\"130\" rx=\"12\" fill=\"#151b3b\" stroke=\"#3178c6\" stroke-width=\"2\"\/>\n<text x=\"615\" y=\"102\" text-anchor=\"middle\" fill=\"#8fbfff\" font-size=\"17\" font-weight=\"700\">3. React element<\/text>\n<text x=\"615\" y=\"140\" text-anchor=\"middle\" fill=\"#9cdcfe\" font-size=\"15\" font-family=\"Consolas,DejaVu Sans Mono,monospace\">{ type: &#8220;h1&#8221;,<\/text>\n<text x=\"615\" y=\"164\" text-anchor=\"middle\" fill=\"#9cdcfe\" font-size=\"15\" font-family=\"Consolas,DejaVu Sans Mono,monospace\">props: {&#8230;} }<\/text>\n<rect x=\"755\" y=\"70\" width=\"225\" height=\"130\" rx=\"12\" fill=\"#ffffff\" stroke=\"#3178c6\" stroke-width=\"2\"\/>\n<text x=\"867\" y=\"102\" text-anchor=\"middle\" fill=\"#151b3b\" font-size=\"17\" font-weight=\"700\">4. Real DOM<\/text>\n<text x=\"867\" y=\"152\" text-anchor=\"middle\" fill=\"#151b3b\" font-size=\"30\" font-weight=\"800\">Hi<\/text>\n<text x=\"867\" y=\"182\" text-anchor=\"middle\" fill=\"#5b6275\" font-size=\"13\">&lt;h1 class=&#8221;title&#8221;&gt;<\/text>\n<path d=\"M232 135h28M477 135h28M722 135h28\" stroke=\"#7c5cff\" stroke-width=\"3\" fill=\"none\"\/>\n<path d=\"M254 128l8 7-8 7M499 128l8 7-8 7M744 128l8 7-8 7\" stroke=\"#7c5cff\" stroke-width=\"3\" fill=\"none\"\/>\n<text x=\"500\" y=\"250\" text-anchor=\"middle\" fill=\"#aab4e8\" font-size=\"16\">Steps 1-2 happen when you build. Steps 3-4 happen in the browser when React runs.<\/text>\n<\/g>\n<\/svg>\n<figcaption>From JSX to the screen: JSX is compiled to <code>jsx()<\/code> calls, which create React elements that React DOM turns into real HTML.<\/figcaption>\n<\/figure>\n\n<p>Let us prove it. We wrote one line of JSX, asked <strong>esbuild<\/strong> (a JSX compiler) to transform it, and then ran it with Node.js to print the React element it creates. Click <strong>\u25b6 Run<\/strong> to see the real output.<\/p>\n<div class=\"dd-vsc\" role=\"group\" aria-label=\"Code editor: hello.jsx\">\n<input type=\"radio\" name=\"v1\" id=\"v1f1\" class=\"f1\" checked>\n<input type=\"checkbox\" id=\"v1r1\" class=\"r1\">\n<div class=\"dd-vsc-bar\"><span class=\"dd-dots\"><i><\/i><i><\/i><i><\/i><\/span><span class=\"dd-vsc-title\">hello.jsx \u2014 jsx-playground \u2014 Visual Studio Code<\/span><\/div>\n<div class=\"dd-vsc-tabs\">\n<label for=\"v1f1\" class=\"t1\"><b class=\"ic jsx\">JSX<\/b>hello.jsx<\/label>\n<label for=\"v1r1\" class=\"run run1\">\u25b6 Run<\/label>\n<\/div>\n<div class=\"dd-vsc-pane p1\">\n<div class=\"dd-vsc-crumbs\">jsx-playground \u203a src \u203a hello.jsx<\/div>\n<pre class=\"dd-vsc-code\"><code><span class=\"l\"><span class=\"k\">const<\/span> <span class=\"n\">name<\/span> = <span class=\"s\">\"Asha\"<\/span>;<\/span>\n<span class=\"l\"><span class=\"k\">const<\/span> <span class=\"n\">element<\/span> = &lt;<span class=\"kc\">h1<\/span> <span class=\"n\">className<\/span>=<span class=\"s\">\"title\"<\/span>&gt;Hello, {<span class=\"n\">name<\/span>}!&lt;\/<span class=\"kc\">h1<\/span>&gt;;<\/span>\n<span class=\"l\"><span class=\"nb\">console<\/span>.<span class=\"nf\">log<\/span>(<span class=\"n\">element<\/span>);<\/span><\/code><\/pre>\n<div class=\"dd-vsc-term\"><div class=\"dd-term-head\"><span>TERMINAL<\/span><span>OUTPUT<\/span><span>PROBLEMS<\/span><span class=\"dd-term-note\">Real output (esbuild 0.28, React 19.3, Node.js 22)<\/span><\/div><pre><code><span class=\"gp\">$<\/span> npx esbuild src\/hello.jsx --jsx=automatic\nimport { jsxs } from \"react\/jsx-runtime\";\nconst name = \"Asha\";\nconst element = \/* @__PURE__ *\/ jsxs(\"h1\", { className: \"title\", children: [\n  \"Hello, \",\n  name,\n  \"!\"\n] });\nconsole.log(element);\n\n$ npx esbuild src\/hello.jsx --jsx=automatic --bundle --platform=node --outfile=out.js &amp;&amp; node out.js\n{\n  '$$typeof': Symbol(react.transitional.element),\n  type: 'h1',\n  key: null,\n  props: { className: 'title', children: [ 'Hello, ', 'Asha', '!' ] },\n  _owner: null,\n  _store: {}\n}<\/code><\/pre><\/div>\n<div class=\"dd-vsc-status\"><span>\u2387 main<\/span><span>Ln 3, Col 1<\/span><span class=\"sp\"><\/span><span>Spaces: 2<\/span><span>UTF-8<\/span><span>LF<\/span><span>JavaScript JSX<\/span><\/div>\n<\/div>\n<\/div>\n<p class=\"dd-vsc-hint\">Click \u25b6 Run to see the compiled JavaScript and the React element object it creates.<\/p>\n<p>Look at the output carefully. The tag name became <code>type: 'h1'<\/code>, the attribute became <code>className<\/code> inside <code>props<\/code>, and the text plus the <code>{name}<\/code> value became the <code>children<\/code> array. A React element is just a small, plain object that <em>describes<\/em> what you want. React reads these objects and updates the real page for you, as you saw in Part 1.<\/p>\n<\/div>\n\n\n\n<div class=\"dd-post\">\n<h2 id=\"setup\">Set up a JSX playground<\/h2>\n<p>You can try every example in this post inside a fresh Vite + React project. If you followed Part 1 you can reuse that project instead.<\/p>\n<div class=\"dd-vsc dd-vsc-termonly\" role=\"group\" aria-label=\"Terminal: jsx-playground \u2014 bash\">\n<div class=\"dd-vsc-bar\"><span class=\"dd-dots\"><i><\/i><i><\/i><i><\/i><\/span><span class=\"dd-vsc-title\">jsx-playground \u2014 bash<\/span><\/div>\n<pre class=\"dd-vsc-code\"><code><span class=\"l\"><span class=\"c\"># 1. Create a new React project with Vite (Node.js 20.19+ or 22.12+)<\/span><\/span>\n<span class=\"l\"><span class=\"gp\">$<\/span> npm create vite@latest jsx-playground -- --template react<\/span>\n<span class=\"l\"><span class=\"c\"># 2. Install the packages and start the dev server<\/span><\/span>\n<span class=\"l\"><span class=\"gp\">$<\/span> cd jsx-playground<\/span>\n<span class=\"l\"><span class=\"gp\">$<\/span> npm install<\/span>\n<span class=\"l\"><span class=\"gp\">$<\/span> npm run dev<\/span>\n<span class=\"l\"><span class=\"c\"># 3. Open http:\/\/localhost:5173\/ in your browser<\/span><\/span><\/code><\/pre>\n<\/div>\n<p>Open <code>src\/App.jsx<\/code>, delete the starter code, and paste the examples below. Save the file and the browser at <code>http:\/\/localhost:5173\/<\/code> updates instantly.<\/p>\n\n<h2 id=\"curly-braces\">Curly braces: JavaScript inside JSX<\/h2>\n<p>Curly braces <code>{ }<\/code> are the doorway from JSX back into JavaScript. Anything inside them is evaluated and the result is shown. The one rule: you can put an <strong>expression<\/strong> (something that produces a value) inside, but not a <strong>statement<\/strong> such as <code>if<\/code>, <code>for<\/code> or <code>const<\/code>.<\/p>\n\n<figure>\n<svg viewBox=\"0 0 1000 330\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" role=\"img\" aria-label=\"Diagram: what works inside JSX curly braces. Allowed: variables, maths, function calls, ternary, logical AND, array map. Not allowed: if statements, for loops, variable declarations, plain objects as text\">\n<rect width=\"1000\" height=\"330\" rx=\"14\" fill=\"#0b1020\"\/>\n<g font-family=\"Segoe UI,Arial,sans-serif\">\n<rect x=\"30\" y=\"30\" width=\"455\" height=\"270\" rx=\"12\" fill=\"#10261c\" stroke=\"#1f9d61\" stroke-width=\"2\"\/>\n<text x=\"257\" y=\"68\" text-anchor=\"middle\" fill=\"#6ee7a8\" font-size=\"21\" font-weight=\"800\">Works inside { } (expressions)<\/text>\n<g font-family=\"Consolas,DejaVu Sans Mono,monospace\" font-size=\"17\" fill=\"#e6e9f5\">\n<text x=\"60\" y=\"110\">{name}<\/text><text x=\"270\" y=\"110\" fill=\"#9fb2c8\" font-family=\"Segoe UI,Arial,sans-serif\" font-size=\"15\">a variable<\/text>\n<text x=\"60\" y=\"145\">{price * 2}<\/text><text x=\"270\" y=\"145\" fill=\"#9fb2c8\" font-family=\"Segoe UI,Arial,sans-serif\" font-size=\"15\">maths<\/text>\n<text x=\"60\" y=\"180\">{formatDate(d)}<\/text><text x=\"270\" y=\"180\" fill=\"#9fb2c8\" font-family=\"Segoe UI,Arial,sans-serif\" font-size=\"15\">a function call<\/text>\n<text x=\"60\" y=\"215\">{ok ? &#8220;Yes&#8221; : &#8220;No&#8221;}<\/text><text x=\"270\" y=\"215\" fill=\"#9fb2c8\" font-family=\"Segoe UI,Arial,sans-serif\" font-size=\"15\">a ternary<\/text>\n<text x=\"60\" y=\"250\">{isNew &amp;&amp; &lt;Badge\/&gt;}<\/text><text x=\"270\" y=\"250\" fill=\"#9fb2c8\" font-family=\"Segoe UI,Arial,sans-serif\" font-size=\"15\">logical AND<\/text>\n<text x=\"60\" y=\"285\">{items.map(&#8230;)}<\/text><text x=\"270\" y=\"285\" fill=\"#9fb2c8\" font-family=\"Segoe UI,Arial,sans-serif\" font-size=\"15\">a list<\/text>\n<\/g>\n<rect x=\"515\" y=\"30\" width=\"455\" height=\"270\" rx=\"12\" fill=\"#2a1414\" stroke=\"#e5484d\" stroke-width=\"2\"\/>\n<text x=\"742\" y=\"68\" text-anchor=\"middle\" fill=\"#ff8a8f\" font-size=\"21\" font-weight=\"800\">Does not work (statements)<\/text>\n<g font-family=\"Consolas,DejaVu Sans Mono,monospace\" font-size=\"17\" fill=\"#e6e9f5\">\n<text x=\"545\" y=\"110\">{if (ok) {&#8230;}}<\/text><text x=\"770\" y=\"110\" fill=\"#c8a0a0\" font-family=\"Segoe UI,Arial,sans-serif\" font-size=\"15\">use a ternary<\/text>\n<text x=\"545\" y=\"145\">{for (&#8230;) {&#8230;}}<\/text><text x=\"770\" y=\"145\" fill=\"#c8a0a0\" font-family=\"Segoe UI,Arial,sans-serif\" font-size=\"15\">use map()<\/text>\n<text x=\"545\" y=\"180\">{const x = 5}<\/text><text x=\"770\" y=\"180\" fill=\"#c8a0a0\" font-family=\"Segoe UI,Arial,sans-serif\" font-size=\"15\">declare above return<\/text>\n<text x=\"545\" y=\"215\">{user}<\/text><text x=\"770\" y=\"215\" fill=\"#c8a0a0\" font-family=\"Segoe UI,Arial,sans-serif\" font-size=\"15\">objects can&#8217;t be text<\/text>\n<text x=\"545\" y=\"270\" fill=\"#9fb2c8\" font-family=\"Segoe UI,Arial,sans-serif\" font-size=\"15\">Tip: do the logic above the return,<\/text>\n<text x=\"545\" y=\"292\" fill=\"#9fb2c8\" font-family=\"Segoe UI,Arial,sans-serif\" font-size=\"15\">then show the result with { }.<\/text>\n<\/g>\n<\/g>\n<\/svg>\n<figcaption>Curly braces accept expressions that produce a value. Statements like <code>if<\/code> and <code>for<\/code> must go outside the JSX or be replaced by a ternary and <code>map()<\/code>.<\/figcaption>\n<\/figure>\n\n<p>You can use curly braces in two places: as <strong>text content<\/strong> between tags (<code>&lt;p&gt;{count}&lt;\/p&gt;<\/code>) and as an <strong>attribute value<\/strong> (<code>&lt;img src={user.avatarUrl} \/&gt;<\/code>). When the attribute is a fixed string, use quotes instead: <code>alt=\"Profile photo\"<\/code>. Never wrap curly braces in quotes: <code>src=\"{url}\"<\/code> gives you the literal text <code>{url}<\/code>.<\/p>\n<p>Some values are special when you show them as text: <code>true<\/code>, <code>false<\/code>, <code>null<\/code> and <code>undefined<\/code> render nothing at all. That is why <code>{isLoggedIn &amp;&amp; &lt;p&gt;Welcome&lt;\/p&gt;}<\/code> works for &#8220;show this only if&#8221;. But the number <code>0<\/code> <em>is<\/em> rendered, which leads to a famous bug we cover in the errors table.<\/p>\n<div class=\"dd-tip\"><strong>Double curly braces?<\/strong> In <code>style={{ color: \"red\" }}<\/code> the outer braces mean &#8220;JavaScript starts here&#8221; and the inner braces are a normal JavaScript object. It is not a special syntax.<\/div>\n<\/div>\n\n\n\n<div class=\"dd-post\">\n<h2 id=\"jsx-rules\">The rules of JSX<\/h2>\n<p>JSX is stricter than HTML. A browser forgives a missing closing tag; a JSX compiler does not. Click through the four tabs below to learn the rules that cover almost every beginner mistake.<\/p>\n<div class=\"dd-tabs\">\n<input type=\"radio\" name=\"ddrules\" id=\"ti1\" checked>\n<input type=\"radio\" name=\"ddrules\" id=\"ti2\">\n<input type=\"radio\" name=\"ddrules\" id=\"ti3\">\n<input type=\"radio\" name=\"ddrules\" id=\"ti4\">\n<div class=\"labels\"><label for=\"ti1\">1. One parent<\/label><label for=\"ti2\">2. Close every tag<\/label><label for=\"ti3\">3. camelCase attributes<\/label><label for=\"ti4\">4. Style and comments<\/label><\/div>\n<div class=\"panel p1\"><p><strong>Return a single root element.<\/strong> A component can return only one thing, because JSX becomes one function call and a function returns one value. If you need several elements side by side, wrap them in a <code>&lt;div&gt;<\/code> or, better, a <strong>fragment<\/strong>: <code>&lt;&gt; ... &lt;\/&gt;<\/code>. A fragment groups elements without adding an extra tag to the HTML. Inside a list you use the long form <code>&lt;Fragment key={id}&gt;<\/code> when you need a key.<\/p><\/div>\n<div class=\"panel p2\"><p><strong>Close every tag.<\/strong> Tags with content need a closing tag (<code>&lt;li&gt;...&lt;\/li&gt;<\/code>). Tags without content must be self-closed with <code>\/&gt;<\/code>: write <code>&lt;img \/&gt;<\/code>, <code>&lt;input \/&gt;<\/code> and <code>&lt;br \/&gt;<\/code>, never just <code>&lt;br&gt;<\/code>. Your own components can self-close too: <code>&lt;Greeting name=\"Asha\" \/&gt;<\/code>.<\/p><\/div>\n<div class=\"panel p3\"><p><strong>Use camelCase for attributes.<\/strong> JSX attributes become JavaScript object keys, so they follow JavaScript naming: <code>onClick<\/code>, <code>tabIndex<\/code>, <code>maxLength<\/code>, <code>strokeWidth<\/code>. Two words are reserved in JavaScript, so they change name: <code>class<\/code> becomes <code>className<\/code> and <code>for<\/code> becomes <code>htmlFor<\/code>. The exceptions are <code>aria-*<\/code> and <code>data-*<\/code> attributes, which keep their dashes.<\/p><\/div>\n<div class=\"panel p4\"><p><strong>Style is an object, comments use braces.<\/strong> Inline styles take a JavaScript object with camelCase keys: <code>style={{ backgroundColor: \"navy\", fontSize: 18 }}<\/code>. A plain number like <code>18<\/code> means pixels. HTML comments (<code>&lt;!-- --&gt;<\/code>) do not work in JSX; write <code>{\/* comment *\/}<\/code> instead.<\/p><\/div>\n<\/div>\n\n<h2 id=\"attributes\">HTML vs JSX attributes<\/h2>\n<p>Keep this table close while you convert HTML snippets (for example from a template or a design) into JSX.<\/p>\n<div class=\"dd-tablewrap\"><table>\n<thead><tr><th>In HTML<\/th><th>In JSX<\/th><th>Why<\/th><\/tr><\/thead>\n<tbody>\n<tr><td><code>class=\"card\"<\/code><\/td><td><code>className=\"card\"<\/code><\/td><td><code>class<\/code> is a JavaScript keyword<\/td><\/tr>\n<tr><td><code>for=\"email\"<\/code><\/td><td><code>htmlFor=\"email\"<\/code><\/td><td><code>for<\/code> is a JavaScript keyword<\/td><\/tr>\n<tr><td><code>onclick=\"go()\"<\/code><\/td><td><code>onClick={go}<\/code><\/td><td>camelCase, and you pass a function, not a string<\/td><\/tr>\n<tr><td><code>tabindex=\"0\"<\/code><\/td><td><code>tabIndex={0}<\/code><\/td><td>camelCase attribute names<\/td><\/tr>\n<tr><td><code>style=\"color: red\"<\/code><\/td><td><code>style={{ color: \"red\" }}<\/code><\/td><td>style takes an object<\/td><\/tr>\n<tr><td><code>&lt;br&gt;<\/code>, <code>&lt;img src=\"a.png\"&gt;<\/code><\/td><td><code>&lt;br \/&gt;<\/code>, <code>&lt;img src=\"a.png\" \/&gt;<\/code><\/td><td>every tag must be closed<\/td><\/tr>\n<tr><td><code>&lt;!-- note --&gt;<\/code><\/td><td><code>{\/* note *\/}<\/code><\/td><td>comments are JavaScript comments<\/td><\/tr>\n<tr><td><code>disabled<\/code><\/td><td><code>disabled<\/code> or <code>disabled={true}<\/code><\/td><td>an attribute with no value means <code>true<\/code><\/td><\/tr>\n<\/tbody>\n<\/table><\/div>\n<p>The official React guide <a href=\"https:\/\/react.dev\/learn\/writing-markup-with-jsx\" rel=\"noopener\" target=\"_blank\">Writing Markup with JSX<\/a> also links to an online HTML-to-JSX converter, which is handy for big snippets.<\/p>\n\n<h2 id=\"full-example\">A complete JSX example<\/h2>\n<p>Now let us combine everything: a fragment, a JSX comment, <code>className<\/code>, a style object, <code>htmlFor<\/code>, a self-closed <code>&lt;input \/&gt;<\/code>, expressions, a ternary, <code>map()<\/code> with keys and <code>&amp;&amp;<\/code>. To show you the exact HTML React produces, we render each component to a string with <code>renderToStaticMarkup<\/code> from <code>react-dom\/server<\/code> and print it. In your Vite app you would just use <code>&lt;ProfileCard \/&gt;<\/code> inside <code>App.jsx<\/code>.<\/p>\n<div class=\"dd-vsc\" role=\"group\" aria-label=\"Code editor: ProfileCard.jsx, SkillList.jsx\">\n<input type=\"radio\" name=\"v2\" id=\"v2f1\" class=\"f1\" checked>\n<input type=\"radio\" name=\"v2\" id=\"v2f2\" class=\"f2\">\n<input type=\"checkbox\" id=\"v2r1\" class=\"r1\">\n<input type=\"checkbox\" id=\"v2r2\" class=\"r2\">\n<div class=\"dd-vsc-bar\"><span class=\"dd-dots\"><i><\/i><i><\/i><i><\/i><\/span><span class=\"dd-vsc-title\">2 files \u2014 jsx-playground \u2014 Visual Studio Code<\/span><\/div>\n<div class=\"dd-vsc-tabs\">\n<label for=\"v2f1\" class=\"t1\"><b class=\"ic jsx\">JSX<\/b>ProfileCard.jsx<\/label>\n<label for=\"v2f2\" class=\"t2\"><b class=\"ic jsx\">JSX<\/b>SkillList.jsx<\/label>\n<label for=\"v2r1\" class=\"run run1\">\u25b6 Run<\/label>\n<label for=\"v2r2\" class=\"run run2\">\u25b6 Run<\/label>\n<\/div>\n<div class=\"dd-vsc-pane p1\">\n<div class=\"dd-vsc-crumbs\">jsx-playground \u203a src \u203a ProfileCard.jsx<\/div>\n<pre class=\"dd-vsc-code\"><code><span class=\"l\"><span class=\"k\">import<\/span> { <span class=\"n\">renderToStaticMarkup<\/span> } <span class=\"k\">from<\/span> <span class=\"s\">\"react-dom\/server\"<\/span>;<\/span>\n<span class=\"l\"><\/span>\n<span class=\"l\"><span class=\"k\">const<\/span> <span class=\"n\">user<\/span> = {<\/span>\n<span class=\"l\">  <span class=\"n\">name<\/span>: <span class=\"s\">\"Rahul Sharma\"<\/span>,<\/span>\n<span class=\"l\">  <span class=\"n\">role<\/span>: <span class=\"s\">\"Frontend Developer\"<\/span>,<\/span>\n<span class=\"l\">  <span class=\"n\">skills<\/span>: [<span class=\"s\">\"React\"<\/span>, <span class=\"s\">\"JSX\"<\/span>, <span class=\"s\">\"CSS\"<\/span>],<\/span>\n<span class=\"l\">  <span class=\"n\">isOnline<\/span>: <span class=\"kc\">true<\/span>,<\/span>\n<span class=\"l\">};<\/span>\n<span class=\"l\"><\/span>\n<span class=\"l\"><span class=\"k\">function<\/span> <span class=\"nf\">ProfileCard<\/span>() {<\/span>\n<span class=\"l\">  <span class=\"k\">const<\/span> <span class=\"n\">cardStyle<\/span> = { <span class=\"n\">padding<\/span>: <span class=\"m\">16<\/span>, <span class=\"n\">borderRadius<\/span>: <span class=\"m\">12<\/span>, <span class=\"n\">border<\/span>: <span class=\"s\">\"1px solid #ddd\"<\/span> };<\/span>\n<span class=\"l\"><\/span>\n<span class=\"l\">  <span class=\"k\">return<\/span> (<\/span>\n<span class=\"l\">    &lt;&gt;<\/span>\n<span class=\"l\">      {<span class=\"c\">\/* A JSX comment: it does not appear in the HTML *\/<\/span>}<\/span>\n<span class=\"l\">      &lt;<span class=\"kc\">section<\/span> <span class=\"n\">className<\/span>=<span class=\"s\">\"card\"<\/span> <span class=\"n\">style<\/span>={<span class=\"n\">cardStyle<\/span>}&gt;<\/span>\n<span class=\"l\">        &lt;<span class=\"kc\">h2<\/span>&gt;{<span class=\"n\">user<\/span>.<span class=\"n\">name<\/span>.<span class=\"nf\">toUpperCase<\/span>()}&lt;\/<span class=\"kc\">h2<\/span>&gt;<\/span>\n<span class=\"l\">        &lt;<span class=\"kc\">p<\/span>&gt;{<span class=\"n\">user<\/span>.<span class=\"n\">role<\/span>} \u00b7 {<span class=\"n\">user<\/span>.<span class=\"n\">skills<\/span>.<span class=\"n\">length<\/span>} skills&lt;\/<span class=\"kc\">p<\/span>&gt;<\/span>\n<span class=\"l\">        &lt;<span class=\"kc\">label<\/span> <span class=\"n\">htmlFor<\/span>=<span class=\"s\">\"msg\"<\/span>&gt;Message&lt;\/<span class=\"kc\">label<\/span>&gt;<\/span>\n<span class=\"l\">        &lt;<span class=\"kc\">input<\/span> <span class=\"n\">id<\/span>=<span class=\"s\">\"msg\"<\/span> <span class=\"n\">type<\/span>=<span class=\"s\">\"text\"<\/span> <span class=\"n\">placeholder<\/span>=<span class=\"s\">\"Say hi\"<\/span> \/&gt;<\/span>\n<span class=\"l\">        &lt;<span class=\"kc\">span<\/span>&gt;{<span class=\"n\">user<\/span>.<span class=\"n\">isOnline<\/span> ? <span class=\"s\">\"Online\"<\/span> : <span class=\"s\">\"Offline\"<\/span>}&lt;\/<span class=\"kc\">span<\/span>&gt;<\/span>\n<span class=\"l\">      &lt;\/<span class=\"kc\">section<\/span>&gt;<\/span>\n<span class=\"l\">    &lt;\/&gt;<\/span>\n<span class=\"l\">  );<\/span>\n<span class=\"l\">}<\/span>\n<span class=\"l\"><\/span>\n<span class=\"l\"><span class=\"nb\">console<\/span>.<span class=\"nf\">log<\/span>(<span class=\"nf\">renderToStaticMarkup<\/span>(&lt;<span class=\"nc\">ProfileCard<\/span> \/&gt;));<\/span><\/code><\/pre>\n<div class=\"dd-vsc-term\"><div class=\"dd-term-head\"><span>TERMINAL<\/span><span>OUTPUT<\/span><span>PROBLEMS<\/span><span class=\"dd-term-note\">Real output (React 19.3, Node.js 22)<\/span><\/div><pre><code><span class=\"gp\">$<\/span> npx esbuild src\/ProfileCard.jsx --jsx=automatic --bundle --platform=node --outfile=pc.js &amp;&amp; node pc.js\n&lt;section class=\"card\" style=\"padding:16px;border-radius:12px;border:1px solid #ddd\"&gt;&lt;h2&gt;RAHUL SHARMA&lt;\/h2&gt;&lt;p&gt;Frontend Developer \u00b7 3 skills&lt;\/p&gt;&lt;label for=\"msg\"&gt;Message&lt;\/label&gt;&lt;input id=\"msg\" type=\"text\" placeholder=\"Say hi\"\/&gt;&lt;span&gt;Online&lt;\/span&gt;&lt;\/section&gt;<\/code><\/pre><\/div>\n<div class=\"dd-vsc-status\"><span>\u2387 main<\/span><span>Ln 27, Col 1<\/span><span class=\"sp\"><\/span><span>Spaces: 2<\/span><span>UTF-8<\/span><span>LF<\/span><span>JavaScript JSX<\/span><\/div>\n<\/div>\n<div class=\"dd-vsc-pane p2\">\n<div class=\"dd-vsc-crumbs\">jsx-playground \u203a src \u203a SkillList.jsx<\/div>\n<pre class=\"dd-vsc-code\"><code><span class=\"l\"><span class=\"k\">import<\/span> { <span class=\"n\">renderToStaticMarkup<\/span> } <span class=\"k\">from<\/span> <span class=\"s\">\"react-dom\/server\"<\/span>;<\/span>\n<span class=\"l\"><\/span>\n<span class=\"l\"><span class=\"k\">const<\/span> <span class=\"n\">skills<\/span> = [<span class=\"s\">\"HTML\"<\/span>, <span class=\"s\">\"CSS\"<\/span>, <span class=\"s\">\"JavaScript\"<\/span>, <span class=\"s\">\"React\"<\/span>];<\/span>\n<span class=\"l\"><\/span>\n<span class=\"l\"><span class=\"k\">function<\/span> <span class=\"nf\">SkillList<\/span>({ <span class=\"n\">title<\/span> }) {<\/span>\n<span class=\"l\">  <span class=\"k\">return<\/span> (<\/span>\n<span class=\"l\">    &lt;<span class=\"kc\">div<\/span>&gt;<\/span>\n<span class=\"l\">      &lt;<span class=\"kc\">h3<\/span>&gt;{<span class=\"n\">title<\/span>}&lt;\/<span class=\"kc\">h3<\/span>&gt;<\/span>\n<span class=\"l\">      &lt;<span class=\"kc\">ul<\/span>&gt;<\/span>\n<span class=\"l\">        {<span class=\"n\">skills<\/span>.<span class=\"nf\">map<\/span>((<span class=\"n\">skill<\/span>, <span class=\"n\">index<\/span>) =&gt; (<\/span>\n<span class=\"l\">          &lt;<span class=\"kc\">li<\/span> <span class=\"n\">key<\/span>={<span class=\"n\">skill<\/span>}&gt;<\/span>\n<span class=\"l\">            {<span class=\"n\">index<\/span> + <span class=\"m\">1<\/span>}. {<span class=\"n\">skill<\/span>}<\/span>\n<span class=\"l\">          &lt;\/<span class=\"kc\">li<\/span>&gt;<\/span>\n<span class=\"l\">        ))}<\/span>\n<span class=\"l\">      &lt;\/<span class=\"kc\">ul<\/span>&gt;<\/span>\n<span class=\"l\">      {<span class=\"n\">skills<\/span>.<span class=\"n\">length<\/span> &gt; <span class=\"m\">3<\/span> &amp;&amp; &lt;<span class=\"kc\">p<\/span>&gt;Great progress!&lt;\/<span class=\"kc\">p<\/span>&gt;}<\/span>\n<span class=\"l\">    &lt;\/<span class=\"kc\">div<\/span>&gt;<\/span>\n<span class=\"l\">  );<\/span>\n<span class=\"l\">}<\/span>\n<span class=\"l\"><\/span>\n<span class=\"l\"><span class=\"nb\">console<\/span>.<span class=\"nf\">log<\/span>(<span class=\"nf\">renderToStaticMarkup<\/span>(&lt;<span class=\"nc\">SkillList<\/span> <span class=\"n\">title<\/span>=<span class=\"s\">\"My skills\"<\/span> \/&gt;));<\/span><\/code><\/pre>\n<div class=\"dd-vsc-term\"><div class=\"dd-term-head\"><span>TERMINAL<\/span><span>OUTPUT<\/span><span>PROBLEMS<\/span><span class=\"dd-term-note\">Real output (React 19.3, Node.js 22)<\/span><\/div><pre><code><span class=\"gp\">$<\/span> npx esbuild src\/SkillList.jsx --jsx=automatic --bundle --platform=node --outfile=sl.js &amp;&amp; node sl.js\n&lt;div&gt;&lt;h3&gt;My skills&lt;\/h3&gt;&lt;ul&gt;&lt;li&gt;1. HTML&lt;\/li&gt;&lt;li&gt;2. CSS&lt;\/li&gt;&lt;li&gt;3. JavaScript&lt;\/li&gt;&lt;li&gt;4. React&lt;\/li&gt;&lt;\/ul&gt;&lt;p&gt;Great progress!&lt;\/p&gt;&lt;\/div&gt;<\/code><\/pre><\/div>\n<div class=\"dd-vsc-status\"><span>\u2387 main<\/span><span>Ln 21, Col 1<\/span><span class=\"sp\"><\/span><span>Spaces: 2<\/span><span>UTF-8<\/span><span>LF<\/span><span>JavaScript JSX<\/span><\/div>\n<\/div>\n<\/div>\n<p class=\"dd-vsc-hint\">Click the two tabs, then \u25b6 Run each one to see the exact HTML that React creates.<\/p>\n<p>Notice in the output how <code>className<\/code> became <code>class<\/code>, <code>htmlFor<\/code> became <code>for<\/code>, the style object became a CSS string with <code>16px<\/code>, the comment and the fragment disappeared completely, and the input was written as <code>&lt;input ...\/&gt;<\/code>. In the second tab, <code>map()<\/code> turned an array of strings into four <code>&lt;li&gt;<\/code> elements. Each item has a <code>key<\/code> so React can track it; you will learn lists and keys in depth in Part 6.<\/p>\n<\/div>\n\n\n\n<div class=\"dd-post\">\n<h2 id=\"errors\">Common errors and fixes<\/h2>\n<p>Here is the error you will see most often as a beginner. We compiled the broken file with Babel (the same message appears in many editors and tools). Click both tabs and \u25b6 Run.<\/p>\n<div class=\"dd-vsc\" role=\"group\" aria-label=\"Code editor: Broken.jsx, Fixed.jsx\">\n<input type=\"radio\" name=\"v3\" id=\"v3f1\" class=\"f1\" checked>\n<input type=\"radio\" name=\"v3\" id=\"v3f2\" class=\"f2\">\n<input type=\"checkbox\" id=\"v3r1\" class=\"r1\">\n<input type=\"checkbox\" id=\"v3r2\" class=\"r2\">\n<div class=\"dd-vsc-bar\"><span class=\"dd-dots\"><i><\/i><i><\/i><i><\/i><\/span><span class=\"dd-vsc-title\">2 files \u2014 jsx-playground \u2014 Visual Studio Code<\/span><\/div>\n<div class=\"dd-vsc-tabs\">\n<label for=\"v3f1\" class=\"t1\"><b class=\"ic jsx\">JSX<\/b>Broken.jsx<\/label>\n<label for=\"v3f2\" class=\"t2\"><b class=\"ic jsx\">JSX<\/b>Fixed.jsx<\/label>\n<label for=\"v3r1\" class=\"run run1\">\u25b6 Run<\/label>\n<label for=\"v3r2\" class=\"run run2\">\u25b6 Run<\/label>\n<\/div>\n<div class=\"dd-vsc-pane p1\">\n<div class=\"dd-vsc-crumbs\">jsx-playground \u203a src \u203a Broken.jsx<\/div>\n<pre class=\"dd-vsc-code\"><code><span class=\"l\"><span class=\"k\">export<\/span> <span class=\"k\">default<\/span> <span class=\"k\">function<\/span> <span class=\"nf\">Broken<\/span>() {<\/span>\n<span class=\"l\">  <span class=\"k\">return<\/span> (<\/span>\n<span class=\"l\">    &lt;<span class=\"kc\">h1<\/span>&gt;Hello&lt;\/<span class=\"kc\">h1<\/span>&gt;<\/span>\n<span class=\"l\">    &lt;<span class=\"kc\">p<\/span>&gt;Welcome to DevDojo&lt;\/<span class=\"kc\">p<\/span>&gt;<\/span>\n<span class=\"l\">  );<\/span>\n<span class=\"l\">}<\/span><\/code><\/pre>\n<div class=\"dd-vsc-term\"><div class=\"dd-term-head\"><span>TERMINAL<\/span><span>OUTPUT<\/span><span>PROBLEMS<\/span><span class=\"dd-term-note\">Real output (Babel 8)<\/span><\/div><pre><code><span class=\"gp\">$<\/span> npx babel src\/Broken.jsx --presets @babel\/preset-react\nSyntaxError: src\/Broken.jsx: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment &lt;&gt;...&lt;\/&gt;? (4:4)\n\n  2 |   return (\n  3 |     &lt;h1&gt;Hello&lt;\/h1&gt;\n&gt; 4 |     &lt;p&gt;Welcome to DevDojo&lt;\/p&gt;\n    |     ^\n  5 |   );\n  6 | }\n  7 |<\/code><\/pre><\/div>\n<div class=\"dd-vsc-status\"><span>\u2387 main<\/span><span>Ln 6, Col 1<\/span><span class=\"sp\"><\/span><span>Spaces: 2<\/span><span>UTF-8<\/span><span>LF<\/span><span>JavaScript JSX<\/span><\/div>\n<\/div>\n<div class=\"dd-vsc-pane p2\">\n<div class=\"dd-vsc-crumbs\">jsx-playground \u203a src \u203a Fixed.jsx<\/div>\n<pre class=\"dd-vsc-code\"><code><span class=\"l\"><span class=\"k\">import<\/span> { <span class=\"n\">renderToStaticMarkup<\/span> } <span class=\"k\">from<\/span> <span class=\"s\">\"react-dom\/server\"<\/span>;<\/span>\n<span class=\"l\"><\/span>\n<span class=\"l\"><span class=\"k\">function<\/span> <span class=\"nf\">Fixed<\/span>() {<\/span>\n<span class=\"l\">  <span class=\"k\">return<\/span> (<\/span>\n<span class=\"l\">    &lt;&gt;<\/span>\n<span class=\"l\">      &lt;<span class=\"kc\">h1<\/span>&gt;Hello&lt;\/<span class=\"kc\">h1<\/span>&gt;<\/span>\n<span class=\"l\">      &lt;<span class=\"kc\">p<\/span>&gt;Welcome to DevDojo&lt;\/<span class=\"kc\">p<\/span>&gt;<\/span>\n<span class=\"l\">    &lt;\/&gt;<\/span>\n<span class=\"l\">  );<\/span>\n<span class=\"l\">}<\/span>\n<span class=\"l\"><\/span>\n<span class=\"l\"><span class=\"nb\">console<\/span>.<span class=\"nf\">log<\/span>(<span class=\"nf\">renderToStaticMarkup<\/span>(&lt;<span class=\"nc\">Fixed<\/span> \/&gt;));<\/span><\/code><\/pre>\n<div class=\"dd-vsc-term\"><div class=\"dd-term-head\"><span>TERMINAL<\/span><span>OUTPUT<\/span><span>PROBLEMS<\/span><span class=\"dd-term-note\">Real output (React 19.3, Node.js 22)<\/span><\/div><pre><code><span class=\"gp\">$<\/span> npx esbuild src\/Fixed.jsx --jsx=automatic --bundle --platform=node --outfile=fx.js &amp;&amp; node fx.js\n&lt;h1&gt;Hello&lt;\/h1&gt;&lt;p&gt;Welcome to DevDojo&lt;\/p&gt;<\/code><\/pre><\/div>\n<div class=\"dd-vsc-status\"><span>\u2387 main<\/span><span>Ln 12, Col 1<\/span><span class=\"sp\"><\/span><span>Spaces: 2<\/span><span>UTF-8<\/span><span>LF<\/span><span>JavaScript JSX<\/span><\/div>\n<\/div>\n<\/div>\n<p class=\"dd-vsc-hint\">Run Broken.jsx to see the error, then switch to Fixed.jsx: a fragment solves it without adding an extra tag.<\/p>\n<div class=\"dd-tablewrap\"><table>\n<thead><tr><th>Error or symptom<\/th><th>Cause<\/th><th>Fix<\/th><\/tr><\/thead>\n<tbody>\n<tr><td>Adjacent JSX elements must be wrapped in an enclosing tag<\/td><td>Returning two elements side by side<\/td><td>Wrap them in <code>&lt;&gt;...&lt;\/&gt;<\/code> or a <code>&lt;div&gt;<\/code><\/td><\/tr>\n<tr><td>Expected corresponding JSX closing tag for &lt;br&gt;<\/td><td>An empty tag that is not closed<\/td><td>Self-close it: <code>&lt;br \/&gt;<\/code>, <code>&lt;img \/&gt;<\/code><\/td><\/tr>\n<tr><td>Invalid DOM property <code>class<\/code>. Did you mean <code>className<\/code>?<\/td><td>HTML attribute names copied into JSX<\/td><td>Use <code>className<\/code>, <code>htmlFor<\/code>, camelCase events<\/td><\/tr>\n<tr><td>Objects are not valid as a React child<\/td><td>Showing a whole object like <code>{user}<\/code><\/td><td>Show a field: <code>{user.name}<\/code>, or use <code>JSON.stringify<\/code> while debugging<\/td><\/tr>\n<tr><td>The style prop expects a mapping from style properties to values, not a string<\/td><td><code>style=\"color: red\"<\/code><\/td><td><code>style={{ color: \"red\" }}<\/code><\/td><\/tr>\n<tr><td>A stray <strong>0<\/strong> appears on the page<\/td><td><code>{items.length &amp;&amp; &lt;List \/&gt;}<\/code> when the length is 0<\/td><td>Use a real boolean: <code>{items.length &gt; 0 &amp;&amp; &lt;List \/&gt;}<\/code><\/td><\/tr>\n<tr><td>The page shows <code>{name}<\/code> as text<\/td><td>Curly braces inside quotes: <code>title=\"{name}\"<\/code><\/td><td>Remove the quotes: <code>title={name}<\/code><\/td><\/tr>\n<tr><td>Unexpected token when using <code>if<\/code> in JSX<\/td><td>Statements inside <code>{ }<\/code><\/td><td>Use a ternary, or compute the value above <code>return<\/code><\/td><\/tr>\n<\/tbody>\n<\/table><\/div>\n\n<h2 id=\"best-practices\">Best practices for writing JSX<\/h2>\n<ul>\n<li><strong>Wrap multi-line JSX in parentheses<\/strong> after <code>return<\/code>. Without them, JavaScript&#8217;s automatic semicolon insertion can make the function return <code>undefined<\/code>.<\/li>\n<li><strong>Keep logic out of the markup.<\/strong> Calculate values (filtered lists, formatted prices) in variables above <code>return<\/code>, then just show them with <code>{ }<\/code>.<\/li>\n<li><strong>Prefer fragments over extra divs<\/strong> when you only need grouping. Fewer wrapper divs means cleaner HTML and easier CSS.<\/li>\n<li><strong>Name components with a capital letter.<\/strong> <code>&lt;profileCard \/&gt;<\/code> is treated as an HTML tag; <code>&lt;ProfileCard \/&gt;<\/code> is your component.<\/li>\n<li><strong>Use the <code>.jsx<\/code> extension<\/strong> for files that contain JSX (or <code>.tsx<\/code> with TypeScript). Vite expects it.<\/li>\n<li><strong>Trust automatic escaping.<\/strong> Text you put in <code>{ }<\/code> is escaped, so a user typing <code>&lt;script&gt;<\/code> shows as text. Only use <code>dangerouslySetInnerHTML<\/code> with HTML you have cleaned and trust.<\/li>\n<li><strong>Let a formatter handle layout.<\/strong> Install Prettier in VS Code so your JSX indentation is always consistent.<\/li>\n<\/ul>\n<p>Want to go deeper on the rules for curly braces? Read the React docs page <a href=\"https:\/\/react.dev\/learn\/javascript-in-jsx-with-curly-braces\" rel=\"noopener\" target=\"_blank\">JavaScript in JSX with Curly Braces<\/a>.<\/p>\n\n<h2 id=\"practice\">Practice task<\/h2>\n<p>Convert this HTML into a React component called <code>ProductCard<\/code> inside your Vite project:<\/p>\n<p><code>&lt;div class=\"product\"&gt;&lt;img src=\"phone.png\"&gt;&lt;h3&gt;Phone X&lt;\/h3&gt;&lt;p style=\"color: green\"&gt;In stock&lt;\/p&gt;&lt;label for=\"qty\"&gt;Qty&lt;\/label&gt;&lt;input id=\"qty\" type=\"number\"&gt;&lt;\/div&gt;<\/code><\/p>\n<ol class=\"dd-steps\">\n<li>Fix every attribute and close every empty tag so it compiles.<\/li>\n<li>Store the product in an object: <code>{ name, price, inStock }<\/code>, and show the name and price with curly braces (format the price as <code>\u20b9<\/code> using <code>toLocaleString(\"en-IN\")<\/code>).<\/li>\n<li>Show &#8220;In stock&#8221; in green or &#8220;Out of stock&#8221; in red using a ternary inside the <code>style<\/code> object.<\/li>\n<li>Add an array of three features and render them as a list with <code>map()<\/code> and a <code>key<\/code>.<\/li>\n<li>Bonus: add a <code>{\/* comment *\/}<\/code> and check in DevTools that it does not appear in the HTML.<\/li>\n<\/ol>\n\n<h2 id=\"faq\">FAQ<\/h2>\n<details><summary>Is JSX the same as HTML?<\/summary><p>No. JSX only looks like HTML. It is compiled into JavaScript function calls, it is stricter (every tag must close) and it uses JavaScript names such as <code>className<\/code> and <code>onClick<\/code>.<\/p><\/details>\n<details><summary>Can I use JSX without React?<\/summary><p>Yes. JSX is just syntax, and other libraries such as Preact and Solid also use it with their own runtime. But it was created for React and is mostly used with it.<\/p><\/details>\n<details><summary>Do I need to import React to use JSX?<\/summary><p>Not any more. Since React 17 the automatic JSX runtime adds the needed import for you, so <code>import React from \"react\"<\/code> is no longer required just for JSX.<\/p><\/details>\n<details><summary>What is the difference between .js and .jsx files?<\/summary><p>Both are JavaScript. The <code>.jsx<\/code> extension tells your editor and build tool that the file contains JSX. Vite expects JSX in <code>.jsx<\/code> or <code>.tsx<\/code> files.<\/p><\/details>\n<details><summary>Why does React use className instead of class?<\/summary><p>JSX attributes become keys of a JavaScript object, and <code>class<\/code> is a reserved word in JavaScript. React uses the DOM property name <code>className<\/code> instead.<\/p><\/details>\n<details><summary>Is JSX safe from XSS attacks?<\/summary><p>Mostly yes. React escapes every value you put inside curly braces before it reaches the page. The risk returns only if you use <code>dangerouslySetInnerHTML<\/code> with untrusted HTML or put user input into URLs like <code>href<\/code> without checking it.<\/p><\/details>\n\n<h2 id=\"conclusion\">Conclusion<\/h2>\n<p>You now understand <strong>JSX in React<\/strong> from the inside: it is HTML-like syntax that a build tool turns into <code>jsx()<\/code> calls, which create plain React element objects. You learned how curly braces bring JavaScript expressions into your markup, the four rules that prevent most errors (one parent, close every tag, camelCase attributes, style objects and brace comments), how HTML attributes map to JSX, and how to read and fix the most common JSX error messages.<\/p>\n<p>Missed the setup? Go back to <a href=\"https:\/\/devdojo.co.in\/index.php\/2026\/10\/22\/react-series-part-1-what-is-react\/\">React Part 1: What Is React and How to Build Your First React App<\/a>. Curious about how React handles modern hooks? Our <a href=\"https:\/\/devdojo.co.in\/index.php\/2024\/04\/02\/useeffect-the-most-powerful-react-hook\/\">useEffect guide<\/a> is a good preview of what is coming later in the series.<\/p>\n\n<div class=\"dd-next\"><strong>Next part \u2013 React Part 3: Components and Props: Building Reusable UI.<\/strong> We will split a page into small components, pass data into them with props, use the special <code>children<\/code> prop and learn how to think in components.<\/div>\n\n<div class=\"dd-cta\">\n<h3>New posts every day on DevDojo<\/h3>\n<p>Follow the full <strong>React series<\/strong> \u2013 30 parts from \u201cwhat is React\u201d to building and deploying a complete app. Bookmark <a href=\"https:\/\/devdojo.co.in\/\">devdojo.co.in<\/a> and share your Practice task solution in the comments.<\/p>\n<\/div>\n<\/div>\n\n","protected":false},"excerpt":{"rendered":"<p>Learn JSX in React with simple examples: curly braces, className, fragments, style objects and the common JSX errors beginners make, with runnable code.<\/p>\n","protected":false},"author":1,"featured_media":252,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3,4],"tags":[96,83,141,77,125,124],"class_list":["post-253","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-frontend","category-reactjs","tag-frontend-tutorial","tag-javascript","tag-jsx","tag-react","tag-react-for-beginners","tag-series-react"],"aioseo_notices":[],"aioseo_head":"\n\t\t<!-- All in One SEO 5.0.4 - aioseo.com -->\n\t<meta name=\"description\" content=\"Learn JSX in React with simple examples: curly braces, className, fragments, style objects and the common JSX errors beginners make, with runnable code.\" \/>\n\t<meta name=\"robots\" content=\"max-image-preview:large\" \/>\n\t<meta name=\"author\" content=\"Lokendra\"\/>\n\t<link rel=\"canonical\" href=\"https:\/\/devdojo.co.in\/index.php\/2026\/10\/30\/react-series-part-2-jsx-explained\/\" \/>\n\t\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 5.0.4\" \/>\n\t\t<meta property=\"og:locale\" content=\"en_US\" \/>\n\t\t<meta property=\"og:site_name\" content=\"DevDojo - Empowering Developers\" \/>\n\t\t<meta property=\"og:type\" content=\"article\" \/>\n\t\t<meta property=\"og:title\" content=\"JSX in React Explained: Rules, Examples and Mistakes\" \/>\n\t\t<meta property=\"og:description\" content=\"Learn JSX in React with simple examples: curly braces, className, fragments, style objects and the common JSX errors beginners make, with runnable code.\" \/>\n\t\t<meta property=\"og:url\" content=\"https:\/\/devdojo.co.in\/index.php\/2026\/10\/30\/react-series-part-2-jsx-explained\/\" \/>\n\t\t<meta property=\"article:published_time\" content=\"2026-10-30T02:32:26+00:00\" \/>\n\t\t<meta property=\"article:modified_time\" content=\"2026-10-30T02:32:27+00:00\" \/>\n\t\t<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n\t\t<meta name=\"twitter:title\" content=\"JSX in React Explained: Rules, Examples and Mistakes\" \/>\n\t\t<meta name=\"twitter:description\" content=\"Learn JSX in React with simple examples: curly braces, className, fragments, style objects and the common JSX errors beginners make, with runnable code.\" \/>\n\t\t<script type=\"application\/ld+json\" class=\"aioseo-schema\">\n\t\t\t{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"BlogPosting\",\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/2026\\\/10\\\/30\\\/react-series-part-2-jsx-explained\\\/#blogposting\",\"name\":\"JSX in React Explained: Rules, Examples and Mistakes\",\"headline\":\"React Part 2: JSX Explained: Writing HTML-Like Code in JavaScript\",\"author\":{\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/author\\\/lokendra\\\/#author\"},\"publisher\":{\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/#organization\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/devdojo.co.in\\\/wp-content\\\/uploads\\\/2026\\\/10\\\/react-series-part-2-jsx-explained.jpg\",\"width\":1200,\"height\":630,\"caption\":\"React Part 2 banner: JSX code turning into a jsx() call and then a heading on the page\"},\"datePublished\":\"2026-10-30T02:32:26+00:00\",\"dateModified\":\"2026-10-30T02:32:27+00:00\",\"inLanguage\":\"en-US\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/2026\\\/10\\\/30\\\/react-series-part-2-jsx-explained\\\/#webpage\"},\"isPartOf\":{\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/2026\\\/10\\\/30\\\/react-series-part-2-jsx-explained\\\/#webpage\"},\"articleSection\":\"Frontend, ReactJS, Frontend Tutorial, JavaScript, JSX, React, React for Beginners, Series: React\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/2026\\\/10\\\/30\\\/react-series-part-2-jsx-explained\\\/#breadcrumblist\",\"itemListElement\":[{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/#listItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/devdojo.co.in\\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/category\\\/frontend\\\/#listItem\",\"name\":\"Frontend\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/category\\\/frontend\\\/#listItem\",\"position\":2,\"name\":\"Frontend\",\"item\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/category\\\/frontend\\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/category\\\/frontend\\\/reactjs\\\/#listItem\",\"name\":\"ReactJS\"},\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/#listItem\",\"name\":\"Home\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/category\\\/frontend\\\/reactjs\\\/#listItem\",\"position\":3,\"name\":\"ReactJS\",\"item\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/category\\\/frontend\\\/reactjs\\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/2026\\\/10\\\/30\\\/react-series-part-2-jsx-explained\\\/#listItem\",\"name\":\"React Part 2: JSX Explained: Writing HTML-Like Code in JavaScript\"},\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/category\\\/frontend\\\/#listItem\",\"name\":\"Frontend\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/2026\\\/10\\\/30\\\/react-series-part-2-jsx-explained\\\/#listItem\",\"position\":4,\"name\":\"React Part 2: JSX Explained: Writing HTML-Like Code in JavaScript\",\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/category\\\/frontend\\\/reactjs\\\/#listItem\",\"name\":\"ReactJS\"}}]},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/#organization\",\"name\":\"DevDojo\",\"description\":\"Empowering Developers\",\"url\":\"https:\\\/\\\/devdojo.co.in\\\/\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/author\\\/lokendra\\\/#author\",\"url\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/author\\\/lokendra\\\/\",\"name\":\"Lokendra\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/2026\\\/10\\\/30\\\/react-series-part-2-jsx-explained\\\/#authorImage\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/99f102f0cc9080237ce54b91304fd1b3b6fa29925cbaeba93cd796872e58b45c?s=96&d=mm&r=g\",\"width\":96,\"height\":96,\"caption\":\"Lokendra\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/2026\\\/10\\\/30\\\/react-series-part-2-jsx-explained\\\/#webpage\",\"url\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/2026\\\/10\\\/30\\\/react-series-part-2-jsx-explained\\\/\",\"name\":\"JSX in React Explained: Rules, Examples and Mistakes\",\"description\":\"Learn JSX in React with simple examples: curly braces, className, fragments, style objects and the common JSX errors beginners make, with runnable code.\",\"inLanguage\":\"en-US\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/#website\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/2026\\\/10\\\/30\\\/react-series-part-2-jsx-explained\\\/#breadcrumblist\"},\"author\":{\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/author\\\/lokendra\\\/#author\"},\"creator\":{\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/author\\\/lokendra\\\/#author\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/devdojo.co.in\\\/wp-content\\\/uploads\\\/2026\\\/10\\\/react-series-part-2-jsx-explained.jpg\",\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/2026\\\/10\\\/30\\\/react-series-part-2-jsx-explained\\\/#mainImage\",\"width\":1200,\"height\":630,\"caption\":\"React Part 2 banner: JSX code turning into a jsx() call and then a heading on the page\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/index.php\\\/2026\\\/10\\\/30\\\/react-series-part-2-jsx-explained\\\/#mainImage\"},\"datePublished\":\"2026-10-30T02:32:26+00:00\",\"dateModified\":\"2026-10-30T02:32:27+00:00\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/#website\",\"url\":\"https:\\\/\\\/devdojo.co.in\\\/\",\"name\":\"DevDojo\",\"description\":\"Empowering Developers\",\"inLanguage\":\"en-US\",\"publisher\":{\"@id\":\"https:\\\/\\\/devdojo.co.in\\\/#organization\"}}]}\n\t\t<\/script>\n\t\t<!-- All in One SEO -->\n\n","aioseo_head_json":{"title":"JSX in React Explained: Rules, Examples and Mistakes","description":"Learn JSX in React with simple examples: curly braces, className, fragments, style objects and the common JSX errors beginners make, with runnable code.","canonical_url":"https:\/\/devdojo.co.in\/index.php\/2026\/10\/30\/react-series-part-2-jsx-explained\/","robots":"max-image-preview:large","keywords":"","webmasterTools":{"miscellaneous":""},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"BlogPosting","@id":"https:\/\/devdojo.co.in\/index.php\/2026\/10\/30\/react-series-part-2-jsx-explained\/#blogposting","name":"JSX in React Explained: Rules, Examples and Mistakes","headline":"React Part 2: JSX Explained: Writing HTML-Like Code in JavaScript","author":{"@id":"https:\/\/devdojo.co.in\/index.php\/author\/lokendra\/#author"},"publisher":{"@id":"https:\/\/devdojo.co.in\/#organization"},"image":{"@type":"ImageObject","url":"https:\/\/devdojo.co.in\/wp-content\/uploads\/2026\/10\/react-series-part-2-jsx-explained.jpg","width":1200,"height":630,"caption":"React Part 2 banner: JSX code turning into a jsx() call and then a heading on the page"},"datePublished":"2026-10-30T02:32:26+00:00","dateModified":"2026-10-30T02:32:27+00:00","inLanguage":"en-US","mainEntityOfPage":{"@id":"https:\/\/devdojo.co.in\/index.php\/2026\/10\/30\/react-series-part-2-jsx-explained\/#webpage"},"isPartOf":{"@id":"https:\/\/devdojo.co.in\/index.php\/2026\/10\/30\/react-series-part-2-jsx-explained\/#webpage"},"articleSection":"Frontend, ReactJS, Frontend Tutorial, JavaScript, JSX, React, React for Beginners, Series: React"},{"@type":"BreadcrumbList","@id":"https:\/\/devdojo.co.in\/index.php\/2026\/10\/30\/react-series-part-2-jsx-explained\/#breadcrumblist","itemListElement":[{"@type":"ListItem","@id":"https:\/\/devdojo.co.in\/#listItem","position":1,"name":"Home","item":"https:\/\/devdojo.co.in\/","nextItem":{"@type":"ListItem","@id":"https:\/\/devdojo.co.in\/index.php\/category\/frontend\/#listItem","name":"Frontend"}},{"@type":"ListItem","@id":"https:\/\/devdojo.co.in\/index.php\/category\/frontend\/#listItem","position":2,"name":"Frontend","item":"https:\/\/devdojo.co.in\/index.php\/category\/frontend\/","nextItem":{"@type":"ListItem","@id":"https:\/\/devdojo.co.in\/index.php\/category\/frontend\/reactjs\/#listItem","name":"ReactJS"},"previousItem":{"@type":"ListItem","@id":"https:\/\/devdojo.co.in\/#listItem","name":"Home"}},{"@type":"ListItem","@id":"https:\/\/devdojo.co.in\/index.php\/category\/frontend\/reactjs\/#listItem","position":3,"name":"ReactJS","item":"https:\/\/devdojo.co.in\/index.php\/category\/frontend\/reactjs\/","nextItem":{"@type":"ListItem","@id":"https:\/\/devdojo.co.in\/index.php\/2026\/10\/30\/react-series-part-2-jsx-explained\/#listItem","name":"React Part 2: JSX Explained: Writing HTML-Like Code in JavaScript"},"previousItem":{"@type":"ListItem","@id":"https:\/\/devdojo.co.in\/index.php\/category\/frontend\/#listItem","name":"Frontend"}},{"@type":"ListItem","@id":"https:\/\/devdojo.co.in\/index.php\/2026\/10\/30\/react-series-part-2-jsx-explained\/#listItem","position":4,"name":"React Part 2: JSX Explained: Writing HTML-Like Code in JavaScript","previousItem":{"@type":"ListItem","@id":"https:\/\/devdojo.co.in\/index.php\/category\/frontend\/reactjs\/#listItem","name":"ReactJS"}}]},{"@type":"Organization","@id":"https:\/\/devdojo.co.in\/#organization","name":"DevDojo","description":"Empowering Developers","url":"https:\/\/devdojo.co.in\/"},{"@type":"Person","@id":"https:\/\/devdojo.co.in\/index.php\/author\/lokendra\/#author","url":"https:\/\/devdojo.co.in\/index.php\/author\/lokendra\/","name":"Lokendra","image":{"@type":"ImageObject","@id":"https:\/\/devdojo.co.in\/index.php\/2026\/10\/30\/react-series-part-2-jsx-explained\/#authorImage","url":"https:\/\/secure.gravatar.com\/avatar\/99f102f0cc9080237ce54b91304fd1b3b6fa29925cbaeba93cd796872e58b45c?s=96&d=mm&r=g","width":96,"height":96,"caption":"Lokendra"}},{"@type":"WebPage","@id":"https:\/\/devdojo.co.in\/index.php\/2026\/10\/30\/react-series-part-2-jsx-explained\/#webpage","url":"https:\/\/devdojo.co.in\/index.php\/2026\/10\/30\/react-series-part-2-jsx-explained\/","name":"JSX in React Explained: Rules, Examples and Mistakes","description":"Learn JSX in React with simple examples: curly braces, className, fragments, style objects and the common JSX errors beginners make, with runnable code.","inLanguage":"en-US","isPartOf":{"@id":"https:\/\/devdojo.co.in\/#website"},"breadcrumb":{"@id":"https:\/\/devdojo.co.in\/index.php\/2026\/10\/30\/react-series-part-2-jsx-explained\/#breadcrumblist"},"author":{"@id":"https:\/\/devdojo.co.in\/index.php\/author\/lokendra\/#author"},"creator":{"@id":"https:\/\/devdojo.co.in\/index.php\/author\/lokendra\/#author"},"image":{"@type":"ImageObject","url":"https:\/\/devdojo.co.in\/wp-content\/uploads\/2026\/10\/react-series-part-2-jsx-explained.jpg","@id":"https:\/\/devdojo.co.in\/index.php\/2026\/10\/30\/react-series-part-2-jsx-explained\/#mainImage","width":1200,"height":630,"caption":"React Part 2 banner: JSX code turning into a jsx() call and then a heading on the page"},"primaryImageOfPage":{"@id":"https:\/\/devdojo.co.in\/index.php\/2026\/10\/30\/react-series-part-2-jsx-explained\/#mainImage"},"datePublished":"2026-10-30T02:32:26+00:00","dateModified":"2026-10-30T02:32:27+00:00"},{"@type":"WebSite","@id":"https:\/\/devdojo.co.in\/#website","url":"https:\/\/devdojo.co.in\/","name":"DevDojo","description":"Empowering Developers","inLanguage":"en-US","publisher":{"@id":"https:\/\/devdojo.co.in\/#organization"}}]},"og:locale":"en_US","og:site_name":"DevDojo - Empowering Developers","og:type":"article","og:title":"JSX in React Explained: Rules, Examples and Mistakes","og:description":"Learn JSX in React with simple examples: curly braces, className, fragments, style objects and the common JSX errors beginners make, with runnable code.","og:url":"https:\/\/devdojo.co.in\/index.php\/2026\/10\/30\/react-series-part-2-jsx-explained\/","article:published_time":"2026-10-30T02:32:26+00:00","article:modified_time":"2026-10-30T02:32:27+00:00","twitter:card":"summary_large_image","twitter:title":"JSX in React Explained: Rules, Examples and Mistakes","twitter:description":"Learn JSX in React with simple examples: curly braces, className, fragments, style objects and the common JSX errors beginners make, with runnable code."},"aioseo_meta_data":{"post_id":"253","title":"JSX in React Explained: Rules, Examples and Mistakes","description":"Learn JSX in React with simple examples: curly braces, className, fragments, style objects and the common JSX errors beginners make, with runnable code.","keywords":null,"keyphrases":{"focus":{"keyphrase":"JSX in React","score":79},"additional":[]},"primary_term":null,"canonical_url":null,"og_title":"JSX in React Explained: Rules, Examples and Mistakes","og_description":"Learn JSX in React with simple examples: curly braces, className, fragments, style objects and the common JSX errors beginners make, with runnable code.","og_object_type":"default","og_image_type":"default","og_image_url":null,"og_image_width":null,"og_image_height":null,"og_image_custom_url":null,"og_image_custom_fields":null,"og_video":"","og_custom_url":null,"og_article_section":null,"og_article_tags":null,"twitter_use_og":false,"twitter_card":"default","twitter_image_type":"default","twitter_image_url":null,"twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_title":null,"twitter_description":null,"schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":[],"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":[]},"graphName":"BlogPosting","isEnabled":true},"graphs":[]},"schema_type":"default","schema_type_options":null,"pillar_content":false,"robots_default":true,"robots_noindex":false,"robots_noarchive":false,"robots_nosnippet":false,"robots_nofollow":false,"robots_noimageindex":false,"robots_noodp":false,"robots_notranslate":false,"robots_max_snippet":"-1","robots_max_videopreview":"-1","robots_max_imagepreview":"large","priority":0,"frequency":"default","local_seo":null,"breadcrumb_settings":null,"limit_modified_date":false,"ai":{"faqs":[],"keyPoints":[],"schemas":[],"titles":[],"descriptions":[],"socialPosts":{"email":{"subject":"","preview":"","content":""},"linkedin":[],"twitter":[],"facebook":[],"instagram":[]}},"created":"2026-10-29 13:05:47","updated":"2026-10-30 02:57:43","focus_keyword":"JSX in React","additional_keywords":null,"truseo_locale":null,"seo_analyzer_scan_date":null},"aioseo_breadcrumb":"<div class=\"aioseo-breadcrumbs\"><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/devdojo.co.in\/\" title=\"Home\">Home<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">\u00bb<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/devdojo.co.in\/index.php\/category\/frontend\/\" title=\"Frontend\">Frontend<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">\u00bb<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/devdojo.co.in\/index.php\/category\/frontend\/reactjs\/\" title=\"ReactJS\">ReactJS<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">\u00bb<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\tReact Part 2: JSX Explained: Writing HTML-Like Code in JavaScript\n\t\t<\/span><\/div>","aioseo_breadcrumb_json":[{"label":"Home","link":"https:\/\/devdojo.co.in\/"},{"label":"Frontend","link":"https:\/\/devdojo.co.in\/index.php\/category\/frontend\/"},{"label":"ReactJS","link":"https:\/\/devdojo.co.in\/index.php\/category\/frontend\/reactjs\/"},{"label":"React Part 2: JSX Explained: Writing HTML-Like Code in JavaScript","link":"https:\/\/devdojo.co.in\/index.php\/2026\/10\/30\/react-series-part-2-jsx-explained\/"}],"_links":{"self":[{"href":"https:\/\/devdojo.co.in\/index.php\/wp-json\/wp\/v2\/posts\/253","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devdojo.co.in\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devdojo.co.in\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devdojo.co.in\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/devdojo.co.in\/index.php\/wp-json\/wp\/v2\/comments?post=253"}],"version-history":[{"count":1,"href":"https:\/\/devdojo.co.in\/index.php\/wp-json\/wp\/v2\/posts\/253\/revisions"}],"predecessor-version":[{"id":254,"href":"https:\/\/devdojo.co.in\/index.php\/wp-json\/wp\/v2\/posts\/253\/revisions\/254"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devdojo.co.in\/index.php\/wp-json\/wp\/v2\/media\/252"}],"wp:attachment":[{"href":"https:\/\/devdojo.co.in\/index.php\/wp-json\/wp\/v2\/media?parent=253"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devdojo.co.in\/index.php\/wp-json\/wp\/v2\/categories?post=253"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devdojo.co.in\/index.php\/wp-json\/wp\/v2\/tags?post=253"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}