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>;

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>
);

Try it on CodePen

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>;}