Kapitel 2: Frontend-Grundlagen auffrischen

Bevor wir mit React beginnen, müssen wir sicherstellen, dass Sie über solide HTML, CSS und JavaScript Grundlagen verfügen. Dieses Kapitel fasst die wichtigsten Konzepte zusammen.

---

2.1 HTML Grundlagen

📖 Semantische Tags

Semantische Tags beschreiben ihre Bedeutung klar:

<!-- ❌ Schlecht: Unklare Struktur -->
<div id="header">
  <div class="nav">...</div>
</div>
<div id="main">...</div>

<!-- ✅ Gut: Semantisch klar -->
<header>
  <nav>...</nav>
</header>
<main>...</main>
<footer>...</footer>

Wichtige semantische Tags:

• <header>: Kopfbereich
• <nav>: Navigation
• <main>: Hauptinhalt
• <section>: Abschnitt
• <article>: Eigenständiger Inhalt
• <footer>: Fußbereich

📝 Formularelemente

<form>
  <!-- Text-Eingabe -->
  <input type="text" placeholder="Benutzername" />
  
  <!-- Auswahl -->
  <select>
    <option value="de">Deutschland</option>
    <option value="at">Österreich</option>
  </select>
  
  <!-- Checkbox -->
  <input type="checkbox" id="agree" />
  <label for="agree">Ich stimme zu</label>
  
  <!-- Radio -->
  <input type="radio" name="gender" value="male" /> Männlich
  <input type="radio" name="gender" value="female" /> Weiblich
  
  <!-- Submit -->
  <button type="submit">Absenden</button>
</form>

📐 Layout-Grundlagen

<!-- Flexbox Grundlagen -->
<div style="display: flex; justify-content: center; align-items: center;">
  <div>Element 1</div>
  <div>Element 2</div>
</div>

<!-- Grid Grundlagen -->
<div style="display: grid; grid-template-columns: 1fr 1fr 1fr;">
  <div>Spalte 1</div>
  <div>Spalte 2</div>
  <div>Spalte 3</div>
</div>

---

2.2 CSS Grundlagen

🎨 Flexbox Layout

.container {
  display: flex;
  justify-content: space-between; /* Horizontal */
  align-items: center; /* Vertikal */
  flex-wrap: wrap; /* Zeilenumbruch */
}

.item {
  flex: 1; /* Gleiche Breite */
  margin: 10px;
}

📐 Grid Layout

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3 Spalten */
  gap: 20px; /* Abstand zwischen Elementen */
}

.item {
  grid-column: span 2; /* Element überspannt 2 Spalten */
}

🎯 Spezifität (Specificity)

CSS wählt Regeln basierend auf Spezifität aus:

Inline styles (style="") > ID (#id) > Klasse (.class) > Tag (div)

/* Spezifität: 0-0-1 */
div {
  color: black;
}

/* Spezifität: 0-1-0 */
.text {
  color: blue;
}

/* Spezifität: 1-0-0 */
#header {
  color: red;
}

/* Spezifität: 1-0-1 */
#header div {
  color: green !important; /* Erzwingt diese Regel */
}

📱 Responsive Design Grundlagen

/* Mobile-first Ansatz */
.container {
  width: 100%;
}

/* Tablet */
@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}

/* Desktop */
@media (min-width: 1024px) {
  .container {
    width: 1000px;
  }
}

---

2.3 JavaScript Grundlagen (WICHTIG!)

📦 Variablen

// var (alt, vermeiden)
var name = "Max";

// let (neu, veränderbar)
let age = 25;
age = 26;

// const (neu, konstant)
const PI = 3.14159;

🔧 Funktionen

// Normale Funktion
function add(a, b) {
  return a + b;
}

// Pfeilfunktion (Arrow Function)
const multiply = (a, b) => {
  return a * b;
};

// Kurzschreibweise (einzeilig)
const divide = (a, b) => a / b;

📋 Arrays und Objekte

// Array
const fruits = ["Apfel", "Banane", "Orange"];

// Array-Methoden (wichtig für React!)
const numbers = [1, 2, 3, 4, 5];

// map: Transformiert jedes Element
const doubled = numbers.map(n => n * 2); // [2, 4, 6, 8, 10]

// filter: Filtert Elemente
const evens = numbers.filter(n => n % 2 === 0); // [2, 4]

// reduce: Reduziert Array auf einen Wert
const sum = numbers.reduce((acc, curr) => acc + curr, 0); // 15

// Objekt
const person = {
  name: "Max",
  age: 25,
  greet() {
    return `Hallo, ich bin ${this.name}`;
  }
};

🎯 ES6+ Syntax (WICHTIG für React!)

1. Destrukturierung (Destructuring)

// Objekt-Destrukturierung
const person = { name: "Max", age: 25, city: "Berlin" };
const { name, age } = person; // name = "Max", age = 25

// Array-Destrukturierung
const numbers = [1, 2, 3, 4, 5];
const [first, second] = numbers; // first = 1, second = 2

2. Template-Strings

const name = "Max";
const age = 25;

// ❌ Alt
console.log("Hallo, ich bin " + name + " und " + age + " Jahre alt.");

// ✅ Neu (Template Strings)
console.log(`Hallo, ich bin ${name} und ${age} Jahre alt.`);

3. Spread-Operator (...)

// Array kopieren
const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5]; // [1, 2, 3, 4, 5]

// Objekt kopieren/erweitern
const person = { name: "Max", age: 25 };
const person2 = { ...person, city: "Berlin" }; 
// { name: "Max", age: 25, city: "Berlin" }

4. let und const

// ✅ Benutzen Sie const standardmäßig
const PI = 3.14159;

// ✅ Benutzen Sie let, wenn die Variable sich ändert
let counter = 0;
counter++;

// ❌ Vermeiden Sie var (kein Block-Scope)

⏳ Asynchrone Programmierung

Promise

// Promise erstellen
const fetchData = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("Daten empfangen!");
    }, 1000);
  });
};

// Promise verwenden
fetchData()
  .then(data => console.log(data))
  .catch(error => console.error(error));

async/await (EMPFOHLEN!)

// Asynchrone Funktion
const fetchData = async () => {
  try {
    const response = await fetch("https://api.example.com/data");
    const data = await response.json();
    return data;
  } catch (error) {
    console.error("Fehler:", error);
  }
};

// Verwendung
fetchData().then(data => console.log(data));

🔄 Array-Methoden (HÄUFIG in React verwendet!)

const users = [
  { id: 1, name: "Max", age: 25 },
  { id: 2, name: "Anna", age: 30 },
  { id: 3, name: "Tim", age: 20 }
];

// map: Rendert Liste (SEHR WICHTIG in React!)
const userList = users.map(user => `<li>${user.name}</li>`);

// filter: Filtert Elemente
const adults = users.filter(user => user.age >= 21);

// find: Findet erstes Element
const max = users.find(user => user.name === "Max");

// some: Prüft, ob mindestens ein Element Bedingung erfüllt
const hasAdults = users.some(user => user.age >= 21); // true

// every: Prüft, ob alle Elemente Bedingung erfüllen
const allAdults = users.every(user => user.age >= 21); // false

// reduce: Reduziert Array auf einen Wert
const totalAge = users.reduce((sum, user) => sum + user.age, 0); // 75

---

📝 Zusammenfassung

In diesem Kapitel haben wir die wichtigsten Frontend-Grundlagen für React gelernt:

✅ HTML

• Semantische Tags
• Formularelemente
• Layout-Grundlagen

✅ CSS

• Flexbox und Grid
• Spezifität
• Responsive Design

✅ JavaScript (WICHTIG!)

• ES6+ Syntax (Arrow Functions, Destructuring, Template Strings)
• Asynchrone Programmierung (Promise, async/await)
• Array-Methoden (map, filter, reduce) - SEHR WICHTIG für React!

---

🎯 Nächste Schritte

Im nächsten Kapitel werden wir:

• Die Entwicklungsumgebung einrichten
• VS Code und Plugins installieren
• Node.js und npm konfigurieren

Bereit für die Installation? → Kapitel 3: Entwicklungsumgebung einrichten