JSX bemutatása

Vizsgáljuk meg a következő változó deklarálást:

const element = <h1>Helló, világ!</h1>;

Ez a furcsa szintaxis se nem szöveg se nem HTML.

JSX-nek hívják, ami egy szintaxis kiterjesztés a JavaScript nyelvhez. Ajánlani tudjuk a React-el való használatát a felhasználói felület kinézetének leírásához. A JSX egy sablonnyelvre emlékeztethet, de a JavaScript teljes erejével bír.

A JSX React “elemeket” állít elő. A DOM-ba való renderelésüket a következő szekcióban fogjuk megvizsgálni. Lent megtalálod a JSX alapjait, amelyek az elinduláshoz szükségesek.

Miért a JSX?

A React azt az elvet vallja, hogy a megjelenítési logika eleve összekapcsolódik a többi felhasználói felületi logikával: az események kezelésével, állapotok időbeni változásával, és hogy az adat hogyan van előkészítve annak megjelenítéséhez.

Ahelyett, hogy a technológiákat mesterségesen elválasztaná azzal, hogy a jelölést és a logikát külön fájlokba helyezi, a React szempontok szerint szeparál lazán összekapcsolt „komponenseknek” nevezett egységekkel, amelyek mindkettőt tartalmazzák. Vissza fogunk térni a komponensekhez egy későbbi szekcióban, ha még nem vagy otthon a jelölés JS-ben való használatával, ez a beszélgetés meggyőzhet téged.

A React nem követeli meg a JSX használatát, de a legtöbb ember hasznosnak találja mint vizuális segédeszköz ha felhasználói felülettel dolgozik JavaScript kódban. Ezenkívül azt is lehetővé teszi, hogy a React hasznosabb hiba- és figyelmeztető üzeneteket jelenítsen meg.

Ezeket tisztázva, kezdjünk is bele!

Beágyazott kifejezések JSX-ben

A következő példában egy name változót deklarálunk, majd a JSX-ben használjuk úgy, hogy kapcsos zárójelbe tesszük:

const name = 'Josh Perez';const element = <h1>Helló, {name}</h1>;
ReactDOM.render(
  element,
  document.getElementById('root')
);

A JSX-be bármilyen érvényes JavaScript kifejezést beilleszthetsz kapcsos zárójelek közé. Például a 2 + 2, user.firstName, vagy a formatName(user) mind érvényes JavaScript kifejezések.

Az alábbi példában a formatName(user) JavaScript függvény meghívásának eredményét ágyazzuk be a <h1> elembe.

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: 'Harper',
  lastName: 'Perez'
};

const element = (
  <h1>
    Helló, {formatName(user)}!  </h1>
);

ReactDOM.render(
  element,
  document.getElementById('root')
);

Próbáld ki a CodePen-en

A JSX-et több sorra bontottuk az olvashatóság érdekében. Bár ez nem kötelező, de ha így csinálod akkor azt javasoljuk, hogy tedd zárójelek közé, hogy elkerüld az automatikus pontosvessző beillesztésének buktatóit.

A JSX egy kifejezés is

A fordítás után a JSX kifejezések normál JavaScript hívásokká válnak, és JavaScript objektumokra értékelődnek ki.

Ez azt jelenti, hogy a JSX-et használhatod if utasításokban és for ciklusokban, hozzárendelheted változókhoz, és paraméterként vagy visszatérési értékként is használhatod egy függvény esetében:

function getGreeting(user) {
  if (user) {
    return <h1>Helló, {formatName(user)}!</h1>;  }
  return <h1>Helló, idegen.</h1>;}

Attribútumok meghatározása a JSX segítségével

Idézőjelek segítségével megadhatsz karakterláncokat attribútumként:

const element = <div tabIndex="0"></div>;

Kapcsos zárójelekkel beágyazhatsz JavaScript kifejezést egy attribútumba:

const element = <img src={user.avatarUrl}></img>;

Ne használj idézőjeleket kapcsos zárójelek körül, mikor JavaScript kifejezést ágyazol be egy attribútumba. Használhatsz idézőjeleket (karakterláncokhoz) vagy kapcsos zárójelet (kifejezésekhez), de mindkettőt egy attribútumon belül ne.

Figyelem:

Mivel a JSX közelebb áll a JavaScripthez, mint a HTML-hez, a REACT DOM a camelCase elnevezési stílust használja a HTML attribútumnevek helyett.

Például a class JSX-ben className-re változik, a tabindex-et pedig tabIndex-ként tudjuk használni.

Gyermekek megadása JSX-ben

Ha egy címke üres, akkor azonnal lezárhatod egy /> (önlezáró) taggel, mint ahogy XML-ben is:

const element = <img src={user.avatarUrl} />;

A JSX-címkék gyermekeket is tartalmazhatnak:

const element = (
  <div>
    <h1>Helló!</h1>
    <h2>Jó itt látni.</h2>
  </div>
);

A JSX megakadályozza az injekciós támadásokat

A felhasználói bevitel beágyazása a JSX-be biztonságos:

const title = response.potentiallyMaliciousInput;
// Ez biztonságos:
const element = <h1>{title}</h1>;

Alapértelmezés szerint a React DOM szanitálja az összes JSX-be beágyazott értéket, mielőtt azokat megjelenítené. Így biztosítja azt, hogy soha nem tudsz bármi olyat injektálni, amit kifejezetten nem a te alkalmazásodban írtak. Minden átalakul karakterlánccá, mielőtt megjelenítésre kerül. Ez segít megelőzni az XSS (cross-site-scripting) típusú támadásokat.

A JSX objektumokat reprezentál

A Babel a JSX-et React.createElement() hívásokra fordítja le.

Ez a két példa megegyezik:

const element = (
  <h1 className="greeting">
    Helló, világ!
  </h1>
);

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Helló, világ!'
);

A React.createElement() végrehajt pár ellenőrzést a hibamentes kód megírásának érdekében, de alapvetően ehhez hasonló objektumokat hoz létre:

// Megjegyzés: ez a szerkezet egyszerűsített
const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Helló, világ!'
  }
};

Ezeket az objektumokat “React elemeknek” nevezzük. Gondolhatunk rájuk úgy, mint annak a leírása amit a képernyőn látni szeretnénk. A React olvassa ezeket az objektumokat és arra használja, hogy a DOM-ot felépítse és naprakészen tartsa.

A következő szekcióban megvizsgáljuk a React elemek DOM-ba való renderelését.

Tipp:

Javasoljuk, hogy általad használt kódszerkesztőben használd a “Babel” nyelvdefiníciót, így az ES6 és JSX kódrészek is helyesen lesznek kiemelve.