JSX-Basisprincipes in React

In React gebruiken we een syntaxisuitbreiding van JavaScript genaamd JSX (JavaScript XML) om onze 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 kun je UI-elementen direct in je componentcode beschrijven in plaats van ze stap voor stap met JavaScript op te bouwen.

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

In JSX kun je JavaScript-expressies direct in de markup opnemen. 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.