Benötigte Vorkenntnisse

Bevor Sie mit React beginnen, ist es wichtig zu verstehen, welche Vorkenntnisse Ihnen den Einstieg erleichtern. In diesem Kapitel gehen wir durch die Grundlagen, die Sie idealerweise beherrschen sollten, und wie Sie eventuell vorhandene Wissenslücken schliessen können.

Unverzichtbare Grundlagen

1. HTML & CSS

React erstellt letztendlich HTML-Elemente, die mit CSS gestylt werden. Daher ist ein solides Verständnis dieser Fundamentaltechnologien unerlässlich:

• HTML-Struktur: Kenntnis der wichtigsten Tags und deren semantische Bedeutung
• CSS-Selektoren: Fähigkeit, Elemente zu stylen und responsive Designs zu erstellen
• Flexbox/Grid: Grundlegende Layout-Techniken für moderne Webseiten

<!-- Beispiel für grundlegendes HTML, das Sie verstehen sollten -->
<div class="container">
  <header>
    <h1>Willkommen</h1>
    <nav>
      <ul>
        <li><a href="#home">Home</a></li>
        <li><a href="#about">Über uns</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <section class="content">
      <h2>Inhalt</h2>
      <p>Hier steht der Hauptinhalt.</p>
    </section>
  </main>
</div>

2. JavaScript-Grundlagen

JavaScript ist das Fundament von React. Diese Konzepte sollten Sie beherrschen:

• Variablen und Datentypen: let, const, Strings, Numbers, Booleans, Arrays, Objekte
• Funktionen: Deklarationen, Ausdrücke, Pfeilfunktionen
• DOM-Manipulation: Zugriff auf und Änderung von HTML-Elementen
• Event-Handling: Reaktion auf Benutzerinteraktionen
• Bedingungen und Schleifen: if/else, Ternäre Operatoren, for, while, forEach

// Beispiel für JavaScript-Grundlagen, die Sie verstehen sollten
const user = {
  name: 'Max Mustermann',
  age: 30,
  isAdmin: false
};

// Pfeilfunktion
const greetUser = (user) => {
  return `Hallo ${user.name}, willkommen zurück!`;
};

// Array-Methoden
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(num => num * 2);

// Event-Handling (in reinem JavaScript)
document.getElementById('button').addEventListener('click', () => {
  console.log('Button wurde geklickt!');
});

3. Moderne JavaScript-Konzepte (ES6+)

Diese neueren JavaScript-Features werden in React-Anwendungen häufig verwendet:

• Destrukturierung: const { name, age } = user;
• Spread-Operator: const newArray = [...oldArray, newItem];
• Template Literals: const message = `Hallo ${name}!`;
• Module-System: import und export
• Promises und async/await: Für asynchrone Operationen

Hilfreiche, aber nicht zwingend erforderliche Kenntnisse

• Grundlegendes Verständnis von HTTP: GET, POST-Anfragen, Statuscodes
• REST-APIs: Wie man mit externen Datenquellen kommuniziert
• NPM/Yarn: Paketverwaltung für JavaScript
• Terminal/Kommandozeile: Grundlegende Befehle

Übung: Überprüfen Sie Ihre Vorkenntnisse

Aufgabe: Selbsteinschätzung

Beantworten Sie die folgenden Fragen, um Ihre Bereitschaft für React einzuschätzen:

1. Was ist der Unterschied zwischen let, const und var in JavaScript?
2. Wie können Sie ein Array mit Namen in ein neues Array transformieren, in dem jeder Name gross geschrieben ist?
3. Was bewirkt folgender Code und warum?

   const person = { name: 'Anna', alter: 28 };
   const { name, alter: age } = person;
   console.log(name, age);

4. Wie würden Sie in reinem JavaScript einen Button erstellen, der beim Klick seine Farbe ändert?

Für jeden Punkt, den Sie nicht sicher beantworten können, sollten Sie die entsprechenden Grundlagen auffrischen, bevor Sie mit React beginnen.

Zusammenfassung

Für einen erfolgreichen Einstieg in React sollten Sie über solide HTML- und CSS-Kenntnisse sowie ein gutes Verständnis von JavaScript-Grundlagen und modernen JavaScript-Features (ES6+) verfügen. Obwohl React für den Einstieg nicht die vollständige Beherrschung all dieser Bereiche erfordert, wird Ihre Lernkurve deutlich flacher sein, wenn Sie mit diesen Konzepten vertraut sind. Nehmen Sie sich die Zeit, etwaige Wissenslücken zu schliessen, bevor Sie in die React-Entwicklung einsteigen – das wird Ihre Lernerfahrung wesentlich produktiver und angenehmer gestalten.