JSX-Basisprincipes in React

In React gebruiken we een syntaxisuitbreiding van JavaScript genaamd JSX (JavaScript XML) om gebruikersinterfaces te bouwen. React-componenten beschrijven hoe de gebruikersinterface eruit moet zien. Hiervoor gebruikt React een syntaxis genaamd JSX.

JSX lijkt op HTML, maar wordt binnen JavaScript geschreven. Hiermee kunnen UI-elementen direct in de componentcode worden beschreven, in plaats van ze stap voor stap met JavaScript op te bouwen.

Hoewel JSX op HTML lijkt, is het geen HTML. Onderliggend wordt JSX omgezet naar JavaScript die React begrijpt. Dit maakt JSX zowel expressief als krachtig, terwijl het toch onderdeel blijft van de JavaScript-taal.

In JSX kunnen JavaScript-expressies direct in de markup worden opgenomen. Dit maakt het eenvoudig om dynamische gegevens weer te geven en te bepalen wat er op het scherm verschijnt. Hieronder staat hetzelfde component als eerder, nu weergegeven met JSX:

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

Hier wordt JSX gebruikt om de UI te beschrijven. De {name}-syntaxis maakt het mogelijk om JavaScript-waarden in de UI te plaatsen. React werkt de weergegeven output automatisch bij wanneer de gegevens veranderen.