JSX-Grunder i React

I React använder vi en syntaxutvidgning av JavaScript som kallas JSX (JavaScript XML) för att bygga våra användargränssnitt. JSX gör det möjligt att skriva React-komponenter som beskriver hur användargränssnittet ska se ut. För detta använder React en syntax som kallas JSX.

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 förstår. Detta gör JSX både uttrycksfullt och kraftfullt, samtidigt som det är en del av JavaScript-språket.

I JSX kan du bädda in JavaScript-uttryck 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 UI:t. React uppdaterar automatiskt det visade resultatet när datan ändras.