Was ist React?

React ist eine JavaScript-Bibliothek zur Erstellung von Benutzeroberflächen, die von Facebook (jetzt Meta) entwickelt wurde und 2013 als Open-Source-Projekt veröffentlicht wurde. Anders als umfassende Frameworks wie Angular ist React eine fokussierte Bibliothek, die sich hauptsächlich auf die Erstellung der Benutzeroberfläche (UI) konzentriert.

Kernkonzepte von React

React basiert auf einigen grundlegenden Konzepten:

1. Komponentenbasierte Architektur: In React wird die gesamte Benutzeroberfläche in wiederverwendbare Komponenten aufgeteilt. Jede Komponente kümmert sich um einen spezifischen Teil der UI.
2. Deklarativer Ansatz: Statt den DOM direkt zu manipulieren (wie in reinem JavaScript), beschreiben Sie in React, wie Ihre UI aussehen soll. React kümmert sich um die Aktualisierung des DOMs.
3. Virtuelles DOM: React verwendet ein virtuelles DOM-Konzept, das Änderungen effizient verwaltet und nur die notwendigen Teile der tatsächlichen Webseite aktualisiert.
4. JSX: Eine Syntaxerweiterung für JavaScript, die es ermöglicht, HTML-ähnlichen Code direkt in JavaScript zu schreiben.

// Beispiel einer einfachen React-Komponente mit JSX
function WillkommenNachricht() {
  return <h1>Willkommen bei React!</h1>;
}

Warum React so beliebt ist

• Effizienz: Durch das virtuelle DOM und intelligente Rendering-Strategien bietet React gute Performance.
• Flexibilität: React kann für verschiedene Anwendungen genutzt werden, von einfachen Websites bis hin zu komplexen Single-Page-Applications.
• Grosse Community: Eine aktive Entwicklergemeinschaft bedeutet viele Ressourcen, Bibliotheken und Unterstützung.
• Zukunftssicher: React wird kontinuierlich weiterentwickelt und von grossen Unternehmen unterstützt.

Übung: Erste Schritte mit React verstehen

Aufgabe: React-Konzepte erkunden

Betrachten Sie folgendes React-Code-Beispiel und beantworten Sie die Fragen:

function GrussKomponente(props) {
  return (
    <div className="gruss-box">
      <h2>Hallo, {props.name}!</h2>
      <p>Willkommen zur React-Einführung.</p>
    </div>
  );
}

// Verwendung:
// <GrussKomponente name="Max" />

1. Welche React-Konzepte erkennen Sie in diesem Beispiel?
2. Was würde auf dem Bildschirm erscheinen, wenn die Komponente mit name="Max" verwendet wird?
3. Welche Vorteile bietet diese Komponenten-Struktur gegenüber direkter DOM-Manipulation?

Zusammenfassung

React ist eine leistungsstarke JavaScript-Bibliothek zur Erstellung moderner Benutzeroberflächen. Es verwendet einen komponentenbasierten Ansatz, der Ihnen hilft, wiederverwendbare UI-Elemente zu erstellen. Mit seinem virtuellen DOM und der deklarativen Natur ermöglicht React effiziente Updates und eine bessere Strukturierung Ihres Codes. In den folgenden Abschnitten werden wir tiefer in die React-Konzepte eintauchen und lernen, wie Sie Ihre eigenen React-Anwendungen erstellen können.