JSX-Grunnleggende i React

I React bruker vi en syntaksutvidelse av JavaScript kalt JSX (JavaScript XML) for å bygge brukergrensesnitt. JSX lar oss skrive React-komponenter som beskriver hvordan brukergrensesnittet skal se ut. For å gjøre dette bruker React en syntaks kalt JSX.

JSX ligner på HTML, men skrives inne i JavaScript. Det gjør det mulig å beskrive UI-elementer direkte i komponentkoden i stedet for å bygge dem trinnvis med JavaScript.

Selv om JSX ser ut som HTML, er det ikke HTML. I bakgrunnen blir JSX konvertert 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 markeringen. Dette gjør det enkelt å vise dynamiske data og kontrollere hva som vises på skjermen. Nedenfor vises den samme komponenten som tidligere, nå 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.