JSX ਇੱਕ syntax extension ਹੈ ਜੋ ਤੁਹਾਨੂੰ JavaScript ਦੇ ਅੰਦਰ HTML-ਵਰਗੀ markup ਲਿਖਣ ਦਿੰਦਾ ਹੈ। ਬਰਾਊਜ਼ਰ ਨਹੀਂ ਸਮਝਦਾ JSX — ਇੱਕ compiler (Babel, SWC, esbuild) ਇਸਨੂੰ ਕੋਡ ਚਲਣ ਤੋਂ ਪਹਿਲਾਂ ਸਾਧਾਰਨ function calls ਵਿੱਚ ਬਦਲ ਦਿੰਦਾ ਹੈ।
el = ;
el = .(
,
{ : },
, name
);
ਨਤੀਜਾ ਇੱਕ plain JavaScript object ਹੈ (ਇੱਕ "React element") ਜੋ UI ਨੂੰ ਬਿਆਨ ਕਰਦਾ ਹੈ — ਇਹ ਅਜੇ ਇੱਕ ਅਸਲੀ DOM node ਨਹੀਂ ਹੈ। React ਉਸ object ਨੂੰ Virtual DOM ਬਣਾਉਣ ਲਈ ਪੜ੍ਹਦਾ ਹੈ।
function Card({ user }) {
return (
<> {/* Fragment: one root without an extra <div> */}
<h2 className="name">{user.name}</h2> {/* camelCase: className, not class */}
{user.isAdmin && <Badge />} {/* {} embeds any JS expression */}
</>
);
}
className, onClick) ਕਿਉਂਕਿ ਉਹ JS ਨੂੰ map ਕਰਦੇ ਹਨ, HTML ਨੂੰ ਨਹੀਂ।{ } expressions embed ਕਰਦਾ ਹੈ (values, ternaries, .map()), ਪਰ ਨਹੀਂ statements ਜਿਵੇਂ if।JSX ਬਸ createElement ਲਈ sugar ਹੈ, ਇਸ ਲਈ ਕੁਝ ਵੀ ਜੋ ਤੁਸੀਂ JSX ਵਿੱਚ ਕਰ ਸਕਦੇ ਹੋ ਤੁਸੀਂ plain JS ਵਿੱਚ ਕਰ ਸਕਦੇ ਹੋ — ਇਹ ਸਿਰਫ UI code ਨੂੰ ਉਸ markup ਵਾਂਗ ਪੜ੍ਹਦਾ ਹੈ ਜੋ ਇਹ ਪੈਦਾ ਕਰਦਾ ਹੈ, ਜੋ nested function calls ਨਾਲੋਂ ਬਹੁਤ ਵੱਧ readable ਹੈ।