JSX-Grunder i React

I React använder vi en syntaxutvidgning av JavaScript som kallas JSX (JavaScript XML) för att bygga användargränssnitt. JSX gör det möjligt att beskriva hur användargränssnittet ska se ut direkt i komponentkoden.

JSX liknar HTML, men skrivs inuti JavaScript. Det gör det möjligt att beskriva UI-element direkt i komponentkoden istället för att bygga dem steg för steg med JavaScript.

Även om JSX ser ut som HTML, är det inte HTML. Under ytan omvandlas JSX till JavaScript som React kan tolka. Detta gör JSX både uttrycksfullt och kraftfullt, samtidigt som det är en del av JavaScript-språket.

I JSX kan JavaScript-uttryck bäddas in direkt i markupen. Detta gör det enkelt att visa dynamisk data och styra vad som visas på skärmen. Nedan visas samma komponent som tidigare, nu med JSX:

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

Här används JSX för att beskriva användargränssnittet. Syntaxen {name} gör det möjligt att infoga JavaScript-värden i gränssnittet. React uppdaterar automatiskt det visade resultatet när datan ändras.