JSX on syntaksilaajennus, jonka avulla voit kirjoittaa HTML-kaltaista merkintää JavaScriptin sisällä. Selain ei ymmärrä JSX:ää — kääntäjä (Babel, SWC, esbuild) muuntaa sen tavallisiksi funktioiksi ennen koodin suorittamista.
el = ;
el = .(
,
{ : },
, name
);
Tulos on tavallinen JavaScript-objekti ("React-elementti"), joka kuvaa käyttöliittymää — se ei ole vielä todellinen DOM-solmu. React lukee tämän objektin Virtual DOM:n rakentamiseksi.
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), koska ne liittyvät JS:ään, ei HTML:ään.{ } upottaa lausekkeita (arvoja, ternääriä, .map()), mutta ei lauseita, kuten if.JSX on vain syntaksisokeri createElement-funktiolle, joten kaiken mitä voit tehdä JSX:ssä voit tehdä tavallisella JS:llä — se yksinkertaisesti tekee käyttöliittymän koodista luettavaa kuten sen tuottama merkintä, mikä on paljon luettavampaa kuin sisäkkäiset funktio-kutsut.