JSX:n Perusteet Reactissa

Reactissa käytetään JavaScriptin syntaksilaajennusta nimeltä JSX (JavaScript XML) käyttöliittymien rakentamiseen. JSX:n avulla voidaan kirjoittaa komponentteja, jotka kuvaavat miltä käyttöliittymän tulisi näyttää. Tätä varten React hyödyntää syntaksia nimeltä JSX.

JSX muistuttaa HTML:ää, mutta se kirjoitetaan JavaScriptin sisällä. Sen avulla voit kuvata käyttöliittymäelementit suoraan komponenttikoodissa sen sijaan, että rakentaisit ne vaihe vaiheelta JavaScriptillä.

Vaikka JSX näyttää HTML:ltä, se ei ole HTML:ää. Taustalla JSX muunnetaan JavaScriptiksi, jonka React ymmärtää. Tämä tekee JSX:stä sekä ilmaisuvoimaisen että tehokkaan, samalla kun se on osa JavaScript-kieltä.

JSX:ssä voit upottaa JavaScript-lausekkeita suoraan merkkauskoodiin. Tämä helpottaa dynaamisen datan näyttämistä ja sen hallintaa näytöllä. Alla on sama komponentti kuin aiemmin, nyt esitettynä JSX:n avulla:

function Welcome() {
  const name = "React";
  return <h1>Welcome to {name}</h1>;
}

Tässä JSX:ää käytetään kuvaamaan käyttöliittymää. Syntaksi {name} mahdollistaa JavaScript-arvojen lisäämisen käyttöliittymään. React päivittää näytettävän sisällön automaattisesti, kun data muuttuu.