In Kapitel 3 haben Sie schon JSX gesehen, ohne dass wir es benannt haben. Dieses Kapitel erklärt genau, was JSX ist, und baut App.jsx zu unserer ersten echten Komponente mit mehreren Teilen aus.

Was ist JSX?

JSX ("JavaScript XML") ist eine Erweiterung von JavaScript, mit der Sie HTML-ähnliche Syntax direkt in JavaScript schreiben können. Anders als in unserem React-Native-Tutorial sind die Bausteine hier fast identisch zu echtem HTML (div, p, img statt View, Text, Image), weil eine React-Web-App am Ende wirklich HTML im Browser erzeugt.

Hinter den Kulissen wird JSX von Vite/Babel in normale JavaScript-Funktionsaufrufe übersetzt:

// Das schreiben Sie:
function Titel() {
  return <h1>Hallo Welt!</h1>;
}

// Das passiert dahinter (vereinfacht):
function Titel() {
  return React.createElement('h1', null, 'Hallo Welt!');
}

Drei wichtige JSX-Regeln

1. Genau ein Wurzelelement: Eine Komponente muss GENAU EIN äußeres Element zurückgeben. Mehrere Geschwister-Elemente nebeneinander (ohne gemeinsame Hülle) sind ein Syntaxfehler.
2. Alle Tags müssen geschlossen werden: auch "leere" Tags wie <img /> oder <br /> brauchen den abschließenden Schrägstrich – anders als in klassischem HTML.
3. class heißt className: weil class in JavaScript bereits ein reserviertes Schlüsselwort ist (für Klassen-Definitionen), verwendet JSX stattdessen className.

// FALSCH – zwei Geschwister-Elemente ohne gemeinsame Hülle:
return (
  <h1>Titel</h1>
  <p>Text</p>
);

// RICHTIG – in ein gemeinsames <div> verpackt:
return (
  <div>
    <h1>Titel</h1>
    <p>Text</p>
  </div>
);

App.jsx erweitern: JavaScript-Werte einbetten

Mit geschweiften Klammern {{...}} können Sie JEDEN JavaScript-Ausdruck mitten in JSX einbetten – eine Variable, eine Berechnung, einen Funktionsaufruf. Ersetzen Sie den Inhalt von src/App.jsx durch diese Version:

function App() {
  const shopName = 'Mironsoft Produktkatalog';
  const productCount = 42;

  return (
    <div className="app">
      <h1>Willkommen bei {shopName}</h1>
      <p>Aktuell {productCount} Produkte im Katalog.</p>
    </div>
  );
}

export default App;

{{shopName}} und {{productCount}} setzen die Werte der beiden JavaScript-Variablen direkt ins gerenderte HTML ein. Wichtig: In geschweiften Klammern steht immer ein AUSDRUCK (etwas, das einen Wert ergibt) – keine Anweisungen wie if oder for-Schleifen direkt darin (dafür gibt es andere Techniken, siehe Kapitel 7).

Was ist eine Komponente, genau?

Eine "Komponente" ist einfach eine JavaScript-Funktion, die JSX zurückgibt – genau wie unsere App-Funktion oben. Zwei Konventionen sind wichtig: Der Funktionsname beginnt IMMER mit einem Großbuchstaben (React unterscheidet dadurch <App />, eine eigene Komponente, von <div>, einem eingebauten HTML-Element), und jede Datei exportiert üblicherweise genau eine Hauptkomponente über export default.