JSX என்றால் என்ன, அது எப்படி JavaScript ஆக மாறுகிறது?

Question

IT Interview Practice · Accepted Answer

**JSX** என்பது JavaScript-க்குள் HTML போன்ற மார்க்அப்பை எழுத அனுமதிக்கும் ஒரு syntax நீட்டிப்பாகும். browser JSX-ஐ **புரிந்துகொள்ளாது** — code இயங்குவதற்கு **முன்பே** ஒரு compiler (Babel, SWC, esbuild) அதை வழக்கமான 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 ); ``` இதன் முடிவு UI-ஐ *விவரிக்கும்* ஒரு எளிய JavaScript object ஆகும் (ஒரு "React element") — இது இன்னும் ஒரு உண்மையான DOM node அல்ல. அந்த object-ஐப் படித்து React 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 */} ); } ``` - ஒரே ஒரு **single root**-ஐ return செய்ய வேண்டும் (siblings-ஐ ஒரு Fragment-க்குள் wrap செய்யவும்). - Attributes **camelCase**-ஐப் (`className`, `onClick`) பயன்படுத்துகின்றன, ஏனெனில் அவை HTML அல்ல, JS-க்கு map ஆகின்றன. - `{ }` expressions-ஐ (values, ternaries, `.map()`) embed செய்கிறது, ஆனால் `if` போன்ற statements-ஐ **அல்ல**. ## இது ஏன் முக்கியம் JSX என்பது `createElement`-க்கான வெறும் sugar மட்டுமே, எனவே JSX-இல் நீங்கள் செய்யக்கூடிய எதையும் எளிய JS-இல் செய்ய முடியும் — அது UI code-ஐ அது உருவாக்கும் மார்க்அப் போலவே படிக்கச் செய்கிறது, இது nested function calls-ஐ விட மிகவும் readable ஆக இருக்கிறது.