JSX Syntax
JSX (JavaScript XML), EK SYNTAX EXTENSION hai, JavaScript ke liye — HTML-jaisi, MARKUP, DIRECTLY, JavaScript CODE ke ANDAR, LIKHNE DETA hai. Browser, JSX ko, DIRECTLY, SAMAJH NAHI SAKTA — Babel jaisa, COMPILER, JSX ko, React.createElement() CALLS mein, TRANSFORM karta hai, BUILD TIME PAR.
JSX ke ANDAR, CURLY BRACES {} SE, JavaScript EXPRESSIONS, EMBED kiye ja sakte hain — VARIABLES, FUNCTION CALLS, YA, KOI BHI, VALID, EXPRESSION. JSX, EK SINGLE, ROOT ELEMENT RETURN karta hai (YA, Fragment <>...</> SE, MULTIPLE ELEMENTS, WRAP kiye ja sakte hain, BINA, EXTRA DOM NODE ke).
function Greeting() {
const name = "Aarav";
return (
<div className="greeting">
<h1>Hello, {name}!</h1>
<p>Today is {new Date().toLocaleDateString()}</p>
</div>
);
}
// JSX, INTERNALLY, ISME transform hota hai:
// React.createElement("div", { className: "greeting" },
// React.createElement("h1", null, "Hello, ", name, "!"), ...)- JSX = HTML-jaisi syntax, JavaScript ke ANDAR — compile-time PAR, JS mein, TRANSFORM hoती hai
- {} se, JavaScript EXPRESSIONS, DIRECTLY, EMBED kiye ja sakte hain
- EK, SINGLE, ROOT ELEMENT (ya Fragment) RETURN karna, ZAROORI hai
Browsers, NATIVELY, JSX, KO, SAMAJH, NAHI, SAKTE — Babel (YA, Vite, KA, BUILT-IN, esbuild/SWC), JSX, KO, PLAIN, JavaScript, MEIN, TRANSFORM, KARTA, hai, BUILD, TIME, PAR. ISI, LIYE, React, PROJECTS, MEIN, EK, BUILD, TOOL, (Vite, webpack) ZAROORI, HOTA, hai.
<>...</> (Fragment, SHORTHAND), MULTIPLE, ELEMENTS, KO, RETURN, KARNE, DETA, hai, BINA, EK, EXTRA, WRAPPER, <div>, ADD, KIYE — CSS, LAYOUT, (jaise, FLEXBOX/GRID) KO, EXTRA, DOM, NODES, SE, BREAK, HONE, SE, BACHATA, hai.
function List() {
return (
<>
<li>Item 1</li>
<li>Item 2</li>
</>
);
}