JSX-Grunnleggende i React

I React bruker vi en syntaksutvidelse av JavaScript kalt JSX (JavaScript XML) for å bygge brukergrensesnitt. JSX gjør det mulig å skrive komponenter som beskriver hvordan brukergrensesnittet skal se ut. For å oppnå dette benytter React en syntaks kalt JSX.

JSX ligner på HTML, men skrives inne i JavaScript. Dette lar deg beskrive UI-elementer direkte i komponentkoden, i stedet for å bygge dem steg for steg med JavaScript.

Selv om JSX ser ut som HTML, er det ikke HTML. I bakgrunnen blir JSX omgjort til JavaScript som React forstår. Dette gjør JSX både uttrykksfullt og kraftig, samtidig som det er en del av JavaScript-språket.

I JSX kan du sette inn JavaScript-uttrykk direkte i markupen. Dette gjør det enkelt å vise dynamiske data og kontrollere hva som vises på skjermen. Nedenfor vises den samme komponenten som tidligere, nå skrevet med JSX:

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

Her brukes JSX til å beskrive brukergrensesnittet. Syntaksen {name} gjør det mulig å sette inn JavaScript-verdier i UI-et. React oppdaterer automatisk det som vises når dataene endres.