JSX-Grundlæggende i React

I React bruger vi en syntaksudvidelse af JavaScript kaldet JSX (JavaScript XML) til at opbygge vores brugergrænseflader. JSX gør det muligt at skrive React-komponenter, der beskriver, hvordan brugergrænsefladen skal se ud. For at gøre dette anvender React en syntaks kaldet JSX.

JSX ligner HTML, men det skrives inde i JavaScript. Det gør det muligt at beskrive UI-elementer direkte i komponentkoden i stedet for at opbygge dem trin for trin med JavaScript.

Selvom JSX ligner HTML, er det ikke HTML. Under motorhjelmen bliver JSX konverteret til JavaScript, som React forstår. Dette gør JSX både udtryksfuldt og kraftfuldt, samtidig med at det forbliver en del af JavaScript-sproget.

I JSX kan du indlejre JavaScript-udtryk direkte i markup. Dette gør det nemt at vise dynamiske data og styre, hvad der vises på skærmen. Nedenfor ses den samme komponent som før, nu vist med JSX:

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

Her bruges JSX til at beskrive brugergrænsefladen. Syntaksen {name} gør det muligt at indsætte JavaScript-værdier i UI'et. React opdaterer automatisk det viste output, når dataene ændres.