Što je JSX i kako postaje JavaScript?

Question

Accepted Answer

**JSX** je proširenje sintakse koje vam omogućava da napišete HTML-sličnu markup unutar JavaScripta. Preglednik **ne** razumije JSX — prevodilac (Babel, SWC, esbuild) ga transformira u obične pozive funkcija **prije** nego što se kod izvršava. ## Što se kompajlira ```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 ); ``` Rezultat je obični JavaScript objekt ("React element") koji **opisuje** UI — nije pravi DOM čvor još. React čita taj objekt kako bi izgradio Virtual DOM. ## Ključna pravila (i zašto) ```jsx function Card({ user }) { return ( <> {/* Fragment: one root without an extra

*/}

{user.name}

{/* camelCase: className, not class */} {user.isAdmin && } {/* {} embeds any JS expression */} ); } ``` - Mora vratiti **jedan korijen** (zagrlite surodnu u Fragment). - Atributi koriste **camelCase** (`className`, `onClick`) jer se mapiraju na JS, ne na HTML. - `{ }` ugrađuje izraze (vrijednosti, ternary, `.map()`), ali **ne** iskaze kao što je `if`. ## Zašto je to važno JSX je samo šećer za `createElement`, pa sve što možete učiniti u JSX-u možete učiniti u običnom JS-u — on jednostavno čini da kod korisničkog sučelja izgleda kao markup koji proizvodi, što je puno čitljivije od ugniježđenih poziva funkcije.