Tutorial 2: React Tutorial – Wie funktioniert das mit HTML? JSX Einführung Die React-Syntax

Was ist JSX?

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

jsx

// Das ist JSX!
const element = <h1>Hello, World!</h1>;

<br><br>JSX wird zu normalem JavaScript kompiliert:

javascript

// Das wird daraus:
const element = React.createElement('h1', null, 'Hello, World!');

JavaScript in JSX einbetten

Sie können JavaScript-Ausdrücke in geschweifte Klammern {} einbetten:

jsx

function Greeting() {
  const name = "Andreas";
  const age = 25;
  
  return (
    <div>
      <h1>Hallo, {name}!</h1>
      <p>Du bist {age} Jahre alt.</p>
      <p>Nächstes Jahr wirst du {age + 1}.</p>
    </div>
  );
}

Was kann in {} stehen?

✅ Erlaubt:

• Variablen: {name}
• Ausdrücke: {2 + 2}
• Funktionsaufrufe: {getName()}
• Ternäre Operatoren: {isLoggedIn ? 'Hallo' : 'Login'}
• Array-Methoden: {items.map(item => ...)}

❌ Nicht erlaubt:

• Statements wie if, for, while
• Objekt-Definitionen direkt

JSX-Regeln

1. Nur ein Root-Element

jsx

<em>// ❌ Falsch - mehrere Root-Elemente</em>
function App() {
  return (
    <h1>Titel</h1>
    <p>Text</p>
  );
}

<em>// ✅ Richtig - ein Root-Element</em>
function App() {
  return (
    <div>
      <h1>Titel</h1>
      <p>Text</p>
    </div>
  );
}

<em>// ✅ Auch richtig - Fragment (keine extra div)</em>
function App() {
  return (
    <>
      <h1>Titel</h1>
      <p>Text</p>
    </>
  );
}

2. Alle Tags müssen geschlossen werden

jsx

<em>// ❌ Falsch</em>
<img src="bild.jpg">
<br>

// ✅ Richtig
<img src="bild.jpg" />
<br />

3. className statt class

jsx

<em>// ❌ Falsch</em>
<div class="container">Content</div>

<em>// ✅ Richtig</em>
<div className="container">Content</div>

Warum? class ist ein reserviertes Wort in JavaScript!

4. camelCase für Attribute

jsx

<em>// HTML</em>
<button onclick="handleClick()">Klick</button>

<em>// JSX</em>
<button onClick={handleClick}>Klick</button>

Weitere Beispiele:

• tabindex → tabIndex
• stroke-width → strokeWidth
• for → htmlFor

5. Inline-Styles als Objekte

jsx

<em>// ❌ Falsch</em>
<div style="color: red; font-size: 20px">Text</div>

<em>// ✅ Richtig</em>
<div style={{ color: 'red', fontSize: '20px' }}>Text</div>

<em>// Oder als Variable:</em>
const styles = {
  color: 'red',
  fontSize: '20px'
};

<div style={styles}>Text</div>

Kommentare in JSX

jsx

function App() {
  return (
    <div>
      {/* Das ist ein Kommentar in JSX */}
      <h1>Titel</h1>
      
      {/* 
        Mehrzeiliger Kommentar
        funktioniert auch
      */}
      <p>Text</p>
    </div>
  );
}

Praktisches Beispiel: Visitenkarte

jsx

function BusinessCard() {
  const name = "Andreas Schmidt";
  const title = "Web Developer";
  const email = "andreas@example.com";
  const skills = ["React", "JavaScript", "Shopware"];
  
  const cardStyle = {
    border: '2px solid #333',
    borderRadius: '10px',
    padding: '20px',
    maxWidth: '300px',
    margin: '20px auto',
    textAlign: 'center',
    boxShadow: '0 4px 6px rgba(0,0,0,0.1)'
  };
  
  return (
    <div style={cardStyle}>
      <h2>{name}</h2>
      <p style={{ color: '#666' }}>{title}</p>
      <p>
        <a href={`mailto:${email}`}>{email}</a>
      </p>
      <div>
        <strong>Skills:</strong>
        <p>{skills.join(' • ')}</p>
      </div>
    </div>
  );
}

export default BusinessCard;

✅ Übungsaufgaben

1. Erstellen Sie eine Komponente mit Ihrem Namen und Alter
2. Berechnen Sie Ihr Geburtsjahr und zeigen Sie es an: {2024 - age}
3. Fügen Sie einen bedingten Text hinzu: Volljährig/Minderjährig
4. Stylen Sie die Komponente mit inline-styles

🎯 Mini-Challenge

Erstellen Sie eine „Produkt-Karte“ Komponente:

• Produktname
• Preis (berechnen Sie Preis mit MwSt.)
• Bild (können Sie ein Emoji verwenden 😊)
• Verfügbarkeit (grün wenn verfügbar, rot wenn nicht)
• Verwenden Sie mindestens 5 verschiedene JSX-Features

Beispiel:

jsx

function ProductCard() {
  const productName = "Laptop";
  const price = 999;
  const tax = 0.19;
  const isAvailable = true;
  
  // Ihr Code hier...
}

<br><br>Bisherige React Tutorials:

1: Wie installiere ich React?

Folgende React Tutorials:

3: React Tutorial 3 – Was ist eine Komponente?