JSX-Grundlagen in React

In React verwenden wir eine Syntaxerweiterung von JavaScript namens JSX (JavaScript XML), um Benutzeroberflächen zu erstellen. JSX ermöglicht es, React-Komponenten zu schreiben, die beschreiben, wie die Benutzeroberfläche aussehen soll. Dafür nutzt React die Syntax JSX.

JSX sieht HTML ähnlich, wird jedoch innerhalb von JavaScript geschrieben. Damit können UI-Elemente direkt im Komponenten-Code beschrieben werden, anstatt sie Schritt für Schritt mit JavaScript zu erstellen.

Obwohl JSX wie HTML aussieht, ist es kein HTML. Im Hintergrund wird JSX in JavaScript umgewandelt, das von React verstanden wird. Dadurch ist JSX sowohl ausdrucksstark als auch leistungsfähig und bleibt dennoch Teil der JavaScript-Sprache.

In JSX können JavaScript-Ausdrücke direkt in das Markup eingebettet werden. So lassen sich dynamische Daten einfach anzeigen und steuern, was auf dem Bildschirm erscheint. Unten ist die gleiche Komponente wie zuvor, jetzt mit JSX dargestellt:

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

Hier wird JSX verwendet, um die Benutzeroberfläche zu beschreiben. Die Syntax {name} ermöglicht das Einfügen von JavaScript-Werten in die UI. React aktualisiert die angezeigte Ausgabe automatisch, wenn sich die Daten ändern.