Skip to content
Kezdőlap » Mi az a JSX?

Mi az a JSX?

A JSX-et a React-tel együtt hozta az IT világába a Facebook. Ez a JavaScript XML, vagy a JavaScript Syntax Extension rövidítése.

A JSX nem összekeverendő azzal a JetSuiteX amerikai légitársasággal, mely 2016. április 19-én alakult Alex Wilcox vezetésével, amely aztán 2019. augusztus 8-án új márkanevet kapott JSX néven.

A hasznos, de nem igazán releváns kitérő után nyissunk be inkább a webfejlesztés ajtaján.

Mire használjuk ezt a szintaxist a React-ben?

A legegyszerűbben azt mondhatnám arra, hogy HTML-t írjunk a React kódba.

Tehát valóban elhelyezhetünk HTML tag-eket a React alkalmazás programkódjában, amit a JSX szépen átalakít React elemekké.

De azért azt tegyük tisztába, hogy amit a kódba HTML-ként írunk, az nem HTML!

Nézzünk rögtön egy példát:

const elem = <h1>Helló Világ!</h1>;
ReactDOM.render(elem, document.getElementById('root'));

Létrehoztam egy elem nevű változót és adtam neki értékként egy „HTML” címsort. Látható, hogy nem sztringként adtam meg, ugyanis nem HTML-t, hanem JSX kifejezést írtam. Aztán a következő sorban a render() metódussal kilőttem a képernyőre.

Haladó JSX

haladó jsx

A cucc haladóbb formája, amikor, megadunk benne JavaScript kifejezést is. Hogy most se maradjunk példa nélkül, nézzük meg ezt a kódot:

const nev = 'Jéesiksz Jenő';
const elem = (
  <h1>
    Szia {nev}!
  <h1>
);
ReactDOM.render(elem, document.getElementById('root'));

Létrehoztam egy nev változót. Aztán egy elem változót is. Mivel most a kód több soros lett, gömbölyű zárójelbe kellett tennem és így szépen több sorba tudtam tördelni. Illetve az is fontos, hogy szükséges egy olyan „elem”, ami határolja, keretbe foglalja az egészet. Ez a példában a <h1> volt.

Aztán, ami még fontos, hogy a JSX-en belül, ahol JavaScriptet használtam (konkrétan behelyettesítettem a nev változó értékét), azt kapcsos zárójel pár között adtam meg. A kapcsos zárójel jelentése tehát az, hogy JavaScript kifejezést tudunk közötte megadni.

A fragment-ek

A fragment-et ha fordítjuk, akkor szilánk, töredék, vagy repesz. Rögtön elmondom, hogy mi ez, azonban visszakanyarodok kicsit a ( ) -ek használatához. Ugye az első, amit kiemeltem hogy, ha nem egysoros JSX-et írunk, hanem kissé bonyolultabbat, amit több sorba kell törni, akkor gömbölyű zárójelek között adjuk meg.

A másik lényeges és megjegyzendő dolog, hogy kell lennie valamilyen elemnek, ami körülfogja (wrappeli) a kódot. Ez a fenti példában a <h1> volt, de nagyon sokszor használunk erre a célra mondjuk egy <div> elemet:

const elem = (
  <div>
    <p>Első bekezdés.</p>
    <p>Második bekezdés.</p>
  </div>
);

Alternatív megoldásként tudunk fragment-et használni a div helyett. Ezzel megakadályozzuk, hogy egy lényegében szükségtelen div-et ráerőltessünk a JSX-re és ezáltal a DOM-ban is meg fog ez jelenni. Így néz ki:

const elem = (
  <>
    <p>Első bekezdés.</p>
    <p>Második bekezdés.</p>
  </>
);

Gyakorlatilag a fragment tehát egy üres elem, aminek csak annyi a funkciója, hogy egységbe zárja a JSX-et.

JSX kifejezések

Mivel fordítás után a JSX kódok maguk is JavaScript-té válnak, simán megtehetjük, hogy feltételekben, ciklusokban használunk JSX-et, körülbelül így:

const nev = 'Jéesiksz Jenő';
function udvozlet(nev) {
  if (nev) {
    return <h1>Szia {nev}!</h1>;
  }
  return <h1>Helló idegen!</h1>;
}

JSX attribútumok

Itt egészen egyszerűen arról van szó, hogy a JSX kifejezésen belül attribútumokat is meg tudunk adni.

Az első példában a kifejezés egy sztring url paramétert kap:

const elem = <a href="https://www.jsclub.hu">link</a>;

A másodikban pedig az attribútumban egy JavaScript kifejezést adunk meg:

const elem = <img src={felhasznalo.profilKepUrl}></img>;

Ezt akár így is írhatjuk:

const elem = <img src={felhasznalo.profilKepUrl} />;

A hivatalos dokumentáció

Azt hiszem egész szépen kimerítettük a JSX témakörét. Akit még ennél is mélyebben érdekel a téma, az az interneten számos forrást talál még erről.

Címkék: