Kapitel 5: JSX-Syntax

JSX (JavaScript XML) ist eine Syntaxerweiterung für JavaScript, die es erlaubt, HTML-ähnlichen Code in JavaScript zu schreiben.

---

5.1 Was ist JSX?

📖 Definition

JSX ist keine separate Sprache, sondern eine Syntaxerweiterung für JavaScript.

// ❌ Ohne JSX (schwer zu lesen)
React.createElement('h1', null, 'Hallo Welt!');

// ✅ Mit JSX (einfach und lesbar)
<h1>Hallo Welt!</h1>

🔧 JSX wird zu JavaScript kompiliert

JSX wird von Babel in React.createElement() Aufrufe umgewandelt:

// JSX Code
const element = <h1 className="title">Hallo!</h1>;

// Nach der Kompilierung
const element = React.createElement(
  'h1',
  { className: 'title' },
  'Hallo!'
);

🤔 Unterschied zu HTML

HTML	JSX
class Attribut	className
for Attribut	htmlFor
Inline-Stile als String	Inline-Stile als Objekt
onclick (kleingeschrieben)	onClick (camelCase)

---

5.2 JSX Grundlegende Syntaxregeln

✅ Regel 1: Tags müssen geschlossen sein

// ❌ Falsch
<input type="text">
<img src="image.jpg">

// ✅ Richtig
<input type="text" />
<img src="image.jpg" />

✅ Regel 2: Ein einziges Wurzelelement

// ❌ Falsch: Zwei Wurzelelemente
function App() {
  return (
    <h1>Titel</h1>
    <p>Text</p>
  );
}

// ✅ Richtig: Ein Wurzelelement (Fragment oder <div>)
function App() {
  return (
    <>
      <h1>Titel</h1>
      <p>Text</p>
    </>
  );
}

✅ Regel 3: className statt class

// ❌ Falsch
<div class="container">...</div>

// ✅ Richtig
<div className="container">...</div>

Warum? class ist ein reserviertes Wort in JavaScript.

✅ Regel 4: Inline-Stile als Objekt

// ❌ Falsch (wie HTML)
<div style="color: red; font-size: 20px;">Text</div>

// ✅ Richtig (als Objekt)
<div style={{ color: 'red', fontSize: '20px' }}>Text</div>

Wichtig:

• CSS-Eigenschaften werden in camelCase geschrieben (fontSize, nicht font-size)
• Werte sind Strings oder Zahlen

✅ Regel 5: Kommentare

function App() {
  return (
    <div>
      {/* Dies ist ein JSX-Kommentar */}
      <h1>Titel</h1>
    </div>
  );
}

---

5.3 Ausdrücke in JSX ({} Syntax)

📦 JavaScript-Ausdrücke in JSX

function App() {
  const name = "Max";
  const age = 25;
  
  return (
    <div>
      {/* Variablen */}
      <h1>Hallo, {name}!</h1>
      
      {/* Berechnungen */}
      <p>Alter in 5 Jahren: {age + 5}</p>
      
      {/* Funktionsaufrufe */}
      <p>Zufallszahl: {Math.random()}</p>
      
      {/* Ternärer Operator */}
      <p>Status: {age >= 18 ? "Volljährig" : "Minderjährig"}</p>
    </div>
  );
}

✅ Erlaubt in {}

• Variablen
• Berechnungen
• Funktionsaufrufe
• Ternärer Operator (bedingung ? wahr : falsch)
• Array-Methoden (map, filter, etc.)

❌ Nicht erlaubt in {}

• if-else Anweisungen
• for Schleifen
• switch Anweisungen

Lösung: Verwenden Sie ternären Operator oder extrahieren Sie Logik in Funktionen.

---

5.4 Bedingtes Rendering

1️⃣ if-else (außerhalb von JSX)

function App() {
  const isLoggedIn = true;
  let message;
  
  if (isLoggedIn) {
    message = <h1>Willkommen zurück!</h1>;
  } else {
    message = <h1>Bitte einloggen</h1>;
  }
  
  return <div>{message}</div>;
}

2️⃣ Ternärer Operator (innerhalb von JSX)

function App() {
  const isLoggedIn = true;
  
  return (
    <div>
      {isLoggedIn ? (
        <h1>Willkommen zurück!</h1>
      ) : (
        <h1>Bitte einloggen</h1>
      )}
    </div>
  );
}

3️⃣ Logisches UND (&&)

function App() {
  const isAdmin = true;
  
  return (
    <div>
      <h1>Willkommen</h1>
      {isAdmin && <button>Admin-Panel</button>}
    </div>
  );
}

Erklärung:

• Wenn isAdmin true ist → rendere den Button
• Wenn isAdmin false ist → rendere nichts

---

5.5 Listen-Rendering (map-Methode)

📋 Array mit map() rendern

function App() {
  const fruits = ["Apfel", "Banane", "Orange"];
  
  return (
    <ul>
      {fruits.map((fruit, index) => (
        <li key={index}>{fruit}</li>
      ))}
    </ul>
  );
}

🔑 Der key Prop (WICHTIG!)

Warum wird key benötigt?

• Hilft React, Elemente zu identifizieren
• Verbessert die Performance
• Vermeidet unerwartetes Verhalten

Best Practices:

// ✅ Gut: Eindeutige ID aus Datenbank
const users = [
  { id: 1, name: "Max" },
  { id: 2, name: "Anna" }
];

{users.map(user => (
  <li key={user.id}>{user.name}</li>
))}

// ⚠️ Okay (aber nicht ideal): Index als Key
{fruits.map((fruit, index) => (
  <li key={index}>{fruit}</li>
))}

Warnung: Verwenden Sie niemals index als key, wenn sich die Liste ändern kann (Hinzufügen/Löschen).

---

5.6 JSX Fallstricke (Anfängerfehler vermeiden)

❌ Fehler 1: Doppelte key Werte

// ❌ Falsch
const items = [
  { id: 1, text: "A" },
  { id: 1, text: "B" }  // Gleiche ID!
];

// ✅ Richtig
const items = [
  { id: 1, text: "A" },
  { id: 2, text: "B" }
];

❌ Fehler 2: Vergessen von {} für Ausdrücke

// ❌ Falsch
<p>Alter: age</p>

// ✅ Richtig
<p>Alter: {age}</p>

❌ Fehler 3: Style als String

// ❌ Falsch
<div style="color: red;">Text</div>

// ✅ Richtig
<div style={{ color: 'red' }}>Text</div>

❌ Fehler 4: for statt htmlFor

// ❌ Falsch
<label for="name">Name:</label>

// ✅ Richtig
<label htmlFor="name">Name:</label>

---

📝 Zusammenfassung

In diesem Kapitel haben wir gelernt:

• ✅ Was JSX ist und wie es funktioniert
• ✅ JSX Syntaxregeln (Tags schließen, className, Style-Objekt)
• ✅ Ausdrücke in JSX mit {}
• ✅ Bedingtes Rendering (Ternärer Operator, &&)
• ✅ Listen-Rendering mit map() und key
• ✅ Häufige JSX-Fehler vermeiden

---

🎯 Nächste Schritte

Im nächsten Kapitel werden wir:

• React-Komponenten im Detail lernen
• Funktionale Komponenten erstellen
• Props und State verstehen

Bereit für Komponenten? → Kapitel 6: React-Komponenten