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. Dazu verwendet React die Syntax JSX.

JSX sieht HTML ähnlich, wird jedoch innerhalb von JavaScript geschrieben. Es ermöglicht, UI-Elemente direkt im Komponenten-Code zu beschreiben, 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. Dies erleichtert die Anzeige dynamischer Daten und die Steuerung dessen, 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 Benutzeroberfläche. React aktualisiert die angezeigte Ausgabe automatisch, wenn sich die Daten ändern.