JSX:n Perusteet Reactissa

Reactissa käytetään JavaScriptin syntaksilaajennusta nimeltä JSX (JavaScript XML) käyttöliittymien rakentamiseen. JSX:n avulla React-komponentit 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ään. Sen avulla voit kuvata käyttöliittymäelementit suoraan komponenttikoodissa sen sijaan, että rakentaisit ne vaiheittain JavaScriptillä.

Vaikka JSX näyttää HTML:ltä, se ei kuitenkaan 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 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.