JSX

Bevezetés a JSX -be

Ha valaha is megvalósított egy webalkalmazást a „React.js” keretrendszerrel, akkor valószínűleg észrevette, hogy a React.js összetevők írásának szintaxisa egy kicsit más, mint a többi Javascript -kód. Bár többnyire ugyanaz, a React komponenseket speciális zárójelek, a bal és a jobb szögletes zárójel segítségével írják le. Úgy néznek ki, mint az XML szintaxisa, az „Extensible Markup Language”. A React.js -ben ezt a szintaxist hasonlóan „JSX” -nek nevezik, ami „Javascript XML” -t jelent.

Ennek a szintaxisnak a fő célja a React kód írásának egyszerűsítése. A JSX -kódot a JVM -ek nem tudják értelmezni, ezért használat előtt valódi Javascript -kódba kell lefordítani - ezt a feladatot általában olyan csomagok végzik, mint a Babel vagy a Webpack.

A React kód, amit valószínűleg soha nem írtál

Ez gyakorlatilag azt jelenti, hogy nagyon valószínű, hogy soha nem írt még ilyen „igaz” React.js összetevőket, amelyek a JSX kódból származnak. De ne aggódjon, ez könnyen elvégezhető sok gond nélkül. Valójában akár teljes React webes alkalmazást is írhat anélkül, hogy valaha is használna JSX -t. A következő kódrészlet megmutatja, hogyan néz ki egy valóban React.js összetevő, amely csak Javascript -et tartalmaz.

// A common JSX-element.

<Header title="Lorem ipsum" variant="primary">
  I am a subtitle
</Header>

//
// ...
//

// After the compilation step:

React.createElement(
  Header,
  {title: 'Lorem ipsum', variant: "primary"},
  'I am a subtitle'
);

Ezt akár böngészőjében is kipróbálhatja, szoftver telepítése nélkül! Csak görgessen lefelé az oldal végéig a kiegészítésben található link használatához.

A JSX használata a kód egyszerűsítésére

Amint láthatja, a JSX-szintaxis fő előnye, hogy egyszerűbbé teszi a felhasználói felülethez kapcsolódó kód írását, és könnyebben megkülönböztethető az alkalmazás más részeitől, mivel az XML-szerű szintaxis egyértelműen jelzi a kód tartományát.

A JSX másik nagy jellemzője, hogy a fordítási lépés után csak kifejezéssé válik. Ezért használhatja if-else-utasításokban, vagy akár eltárolhatja eredményét egy változóban. És mivel a React.js komponensek maguk is tartalmazhatnak kifejezéseket gyermekkorukban, nagyon jól összeállítható felhasználói felületet írhat!

Alapértelmezett importálás minden JSX-fájlhoz

Lehet, hogy észrevette, hogy minden JSX-fájl különböző oktatóanyagokban, útmutatókban és valószínűleg még a saját kódjában is az alapértelmezett importálás a React-könyvtárból, annak ellenére, hogy ezt az importált változót soha nem hívhatja meg közvetlenül. Ennek oka az, hogy a fordítási lépés után minden JSX-kifejezés „React.createElement” hívássá válik, amint azt a kódpéldában már láthattuk. Ezért szükséges, hogy az alapértelmezett importálásból származó „React” változó szerepeljen minden fájl hatókörében.

HTML -nek tűnik, de nem az

Az egyik kulcskorlátozó a JSX-szintaxisban történő kódoláskor a komponens nevének jelölése. Ahhoz, hogy a kötegelő helyesen azonosítsa az összetevőit, egyedinek kell lenniük a szabványos HTML-címkékhez képest, mivel a szintaxis ugyanúgy néz ki.

// 1. A valid example.
function Header(props){
  return (
    <div>
      <h1>{props.title}</h1>
      {props.children}
    </div>
  );
}

// 2. Invalid, only uppercase for React elements.
function header(props){
  return (
    // ...
  );
}

// 3. Invalid, only uppercase 
// when calling React components.
function Page(props){
  // Notice the invalid 'layout':
  return (
    <div style={{ margin: 12 }}>
      <layout>{/* ... */}</layout/>
    </div>
  );
}

Ezért kötelező a JSX elemek kódolása mindig a mondat kis- és nagybetűiben, ami azt jelenti, hogy az első betűnek nagybetűsnek kell lennie.

A gépíró változat

Lehet, hogy észrevette, hogy sok projekt a TSX -t is használja a React.js összetevő fájlok utótagjaként. Ez csak az eredeti JSX kiterjesztése, hogy kompatibilis legyen a Typescript -el. A TSX-fájlok lehetővé teszik a Typescript kód írását a JSX-jelölési összetevőkkel együtt.

Csak a kezdet

Ez a cikk a JSX egyszerű bevezetését nyújtotta a React komponensek kódolásához. A fő előny egy nagyon tömör szintaxis, amely természetesnek érzi magát egy webes környezetben. Nagyon kompozit elemeket írhat nagyon kevés kóddal, ami kétségkívül a React jelenlegi híres és népszerű állapotának egyik kulcsfontosságú tényezője. Ha kíváncsi, a React csapata sokkal több és kiváló részletes útmutatót tartalmaz a webhelyén, a linkek az oldal végén található kiegészítésben találhatók.