JSX म्हणजे काय आणि हे JavaScript कसे बनते?

Question

IT Interview Practice · Accepted Answer

**JSX** हा एक syntax extension आहे जो तुम्हाला JavaScript मध्ये HTML-सारखे markup लिहिता देते. ब्राउজर **नाही** JSX समजत — एक compiler (Babel, SWC, esbuild) हे code चालू होण्यापूर्वी नियमित function calls मध्ये रूपांतरित करते. ## हे काय compile होते ```jsx const el =

Hi {name}

; // the compiler turns it into (classic runtime): const el = React.createElement( "h1", // tag / component { className: "title" }, // props "Hi ", name // children ); ``` परिणाम म्हणजे एक साधे JavaScript object (एक "React element") जो UI *वर्णन* करते — हे अजून खरे DOM node नाही. React हा object वाचून Virtual DOM तयार करते. ## मुख्य नियम (आणि का) ```jsx function Card({ user }) { return ( <> {/* Fragment: one root without an extra

*/}

{user.name}

{/* camelCase: className, not class */} {user.isAdmin && } {/* {} embeds any JS expression */} ); } ``` - **एकच root** परत करणे आवश्यक आहे (siblings लाकडे Fragment मध्ये गुंडाळा). - Attributes **camelCase** वापरतात (`className`, `onClick`) कारण ते JS ला map करतात, HTML ला नाही. - `{ }` expressions embed करतात (values, ternaries, `.map()`), पण **नाही** statements जसे की `if`. ## हे का महत्वाचे आहे JSX हे `createElement` साठी फक्त sugar आहे, त्यामुळे तुम्ही JSX मध्ये जे काही करू शकता ते तुम्ही साधे JS मध्ये करू शकता — हे फक्त UI code ला markup सारखे दिसायला देते जो तो तयार करते, जो nested function calls पेक्षा खूप अधिक वाचनीय आहे.