JSX verstehen

JSX ist das Herztueck von React. Es sieht aus wie HTML, ist aber eigentlich JavaScript. In diesem Tutorial lernst du alles, was du ueber JSX wissen musst.

Was ist JSX?

JSX steht fuer JavaScript XML. Es ist eine Syntaxerweiterung fuer JavaScript, die es dir erlaubt, HTML-aehnlichen Code direkt in deinem JavaScript zu schreiben:

// Das ist JSX
const element = <h1>Hallo, Welt!</h1>;

Unter der Haube wird JSX zu normalen JavaScript-Funktionsaufrufen umgewandelt:

// JSX wird zu diesem JavaScript kompiliert:
const element = React.createElement('h1', null, 'Hallo, Welt!');

Du musst diese Umwandlung nicht selbst machen – Vite (mit Babel oder SWC) erledigt das automatisch fuer dich.

JSX-Grundregeln

1. Ein Wurzelelement

Jeder JSX-Ausdruck muss ein einzelnes Wurzelelement haben:

// Falsch - mehrere Wurzelelemente
function App() {
  return (
    <h1>Titel</h1>
    <p>Text</p>
  );
}

// Richtig - ein Wurzelelement
function App() {
  return (
    <div>
      <h1>Titel</h1>
      <p>Text</p>
    </div>
  );
}

// Noch besser - Fragment (kein zusaetzliches DOM-Element)
function App() {
  return (
    <>
      <h1>Titel</h1>
      <p>Text</p>
    </>
  );
}

2. Tags muessen geschlossen werden

In JSX muessen alle Tags geschlossen werden – auch selbstschliessende:

// HTML erlaubt das:
<img src="bild.jpg">
<br>
<input type="text">

// JSX verlangt geschlossene Tags:
<img src="bild.jpg" />
<br />
<input type="text" />

3. className statt class

Da class ein reserviertes Wort in JavaScript ist, verwendest du className:

// HTML
<div class="container">Inhalt</div>

// JSX
<div className="container">Inhalt</div>

4. camelCase fuer Attribute

HTML-Attribute werden in JSX in camelCase geschrieben:

// HTML
<label for="name">Name</label>
<div tabindex="0" onclick="handler()">Klick</div>

// JSX
<label htmlFor="name">Name</label>
<div tabIndex={0} onClick={handler}>Klick</div>

HTML-Attribut	JSX-Attribut
class	className
for	htmlFor
tabindex	tabIndex
onclick	onClick
onchange	onChange
readonly	readOnly

JavaScript in JSX einbetten

Das Maechtige an JSX: Du kannst JavaScript-Ausdruecke mit geschweiften Klammern {} einbetten:

Variablen anzeigen

function Greeting() {
  const name = 'Max';
  const age = 25;

  return (
    <div>
      <h1>Hallo, {name}!</h1>
      <p>Du bist {age} Jahre alt.</p>
      <p>Naechstes Jahr bist du {age + 1}.</p>
    </div>
  );
}

Ausdruecke verwenden

function MathExample() {
  const a = 10;
  const b = 20;

  return (
    <div>
      <p>Summe: {a + b}</p>
      <p>Produkt: {a * b}</p>
      <p>Zufall: {Math.random().toFixed(2)}</p>
      <p>Datum: {new Date().toLocaleDateString('de-DE')}</p>
    </div>
  );
}

Funktionen aufrufen

function formatName(first, last) {
  return `${first} ${last}`;
}

function UserCard() {
  return <h1>Willkommen, {formatName('Max', 'Mustermann')}!</h1>;
}

Ternary Operator (Bedingte Anzeige)

function StatusBadge({ isOnline }) {
  return (
    <span className={isOnline ? 'badge-green' : 'badge-red'}>
      {isOnline ? 'Online' : 'Offline'}
    </span>
  );
}

Inline-Styles in JSX

Styles werden als JavaScript-Objekt uebergeben, nicht als String:

// HTML
<div style="background-color: blue; font-size: 16px;">Text</div>

// JSX - Style ist ein Objekt mit camelCase-Properties
<div style={{ backgroundColor: 'blue', fontSize: '16px' }}>Text</div>

Die doppelten geschweiften Klammern sind kein spezieller Syntax – die aeusseren {} sagen “hier kommt JavaScript”, die inneren {} definieren das Objekt.

function StyledBox() {
  const boxStyle = {
    backgroundColor: '#3498db',
    color: 'white',
    padding: '1rem',
    borderRadius: '8px',
    textAlign: 'center'
  };

  return <div style={boxStyle}>Ich bin gestylt!</div>;
}

Listen in JSX rendern

Mit der map()-Methode kannst du Arrays in JSX-Elemente umwandeln:

function FruitList() {
  const fruits = ['Apfel', 'Banane', 'Kirsche', 'Dattel'];

  return (
    <ul>
      {fruits.map((fruit, index) => (
        <li key={index}>{fruit}</li>
      ))}
    </ul>
  );
}

Jedes Element in einer Liste braucht ein eindeutiges key-Attribut – dazu spaeter mehr.

Bedingtes Rendern

Mit dem Ternary Operator

function LoginStatus({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn ? (
        <p>Willkommen zurueck!</p>
      ) : (
        <p>Bitte einloggen.</p>
      )}
    </div>
  );
}

Mit dem AND-Operator

function Notification({ count }) {
  return (
    <div>
      <h1>Dashboard</h1>
      {count > 0 && (
        <span className="badge">
          {count} neue Nachrichten
        </span>
      )}
    </div>
  );
}

Fragmente

Wenn du kein zusaetzliches DOM-Element erzeugen willst, nutze Fragmente:

import { Fragment } from 'react';

// Kurzschreibweise (empfohlen)
function Columns() {
  return (
    <>
      <td>Spalte 1</td>
      <td>Spalte 2</td>
    </>
  );
}

// Lange Form (wenn du einen key brauchst)
function Items({ items }) {
  return items.map(item => (
    <Fragment key={item.id}>
      <dt>{item.term}</dt>
      <dd>{item.definition}</dd>
    </Fragment>
  ));
}

JSX-Ausdruecke vs. Anweisungen

In JSX-Klammern {} kannst du Ausdruecke verwenden, aber keine Anweisungen:

// Erlaubt (Ausdruecke):
{name}                     // Variable
{a + b}                    // Berechnung
{isActive ? 'Ja' : 'Nein'} // Ternary
{items.map(i => <li>{i}</li>)} // Methoden-Aufruf
{formatDate(date)}         // Funktions-Aufruf

// NICHT erlaubt (Anweisungen):
{if (condition) { ... }}   // if-Statement
{for (let i...) { ... }}   // for-Schleife
{const x = 5}              // Variablen-Deklaration

Wenn du komplexere Logik brauchst, lagere sie in eine Variable aus:

function UserGreeting({ user }) {
  // Logik ausserhalb von JSX
  let greeting;
  if (user.role === 'admin') {
    greeting = 'Willkommen, Administrator!';
  } else if (user.role === 'member') {
    greeting = `Hallo, ${user.name}!`;
  } else {
    greeting = 'Willkommen, Gast!';
  }

  return <h1>{greeting}</h1>;
}

Haeufige Fehler und Loesungen

Fehler 1: Objekte als Text anzeigen

// Fehler: Objekte koennen nicht direkt gerendert werden
const user = { name: 'Max', age: 25 };
<p>{user}</p>  // Error!

// Loesung: Auf Properties zugreifen
<p>{user.name} ist {user.age} Jahre alt.</p>

// Oder JSON anzeigen
<pre>{JSON.stringify(user, null, 2)}</pre>

Fehler 2: Boolean, null, undefined werden nicht angezeigt

// Diese Werte erzeugen keine Ausgabe:
<p>{true}</p>      // Nichts
<p>{false}</p>     // Nichts
<p>{null}</p>      // Nichts
<p>{undefined}</p> // Nichts

// Das kann nuetzlich sein:
<p>{showText && 'Sichtbarer Text'}</p>

Fehler 3: Zahlen bei AND-Operator

// Vorsicht! 0 wird als "falsy" aber trotzdem gerendert:
{count && <span>{count} Nachrichten</span>}
// Wenn count = 0, wird "0" angezeigt!

// Besser:
{count > 0 && <span>{count} Nachrichten</span>}

Uebungen

1. Erstelle eine Profil-Komponente, die Name, Alter und Hobbys anzeigt – alles mit JSX-Ausdruecken
2. Baue eine Liste von 5 Programmiersprachen mit map() und geeigneten Styles
3. Erstelle eine Wetter-Anzeige, die je nach Temperatur verschiedene Texte und Farben zeigt (kalt/warm/heiss)

Was kommt als Naechstes?

Du hast JSX gemeistert – die Grundlage fuer alles in React! Im naechsten Kapitel erstellst du deine erste eigene Komponente und lernst, wie du deine App in wiederverwendbare Bausteine aufteilst.

Zusammenfassung

• JSX ist eine Syntaxerweiterung, die HTML-aehnlichen Code in JavaScript erlaubt
• Verwende className statt class und camelCase fuer Attribute
• JavaScript-Ausdruecke werden mit geschweiften Klammern {} eingebettet
• Jeder JSX-Ausdruck braucht ein Wurzelelement (oder ein Fragment <>)
• Alle Tags muessen geschlossen werden
• Inline-Styles sind Objekte mit camelCase-Properties

---