In React sind Komponenten die grundlegenden Bausteine einer Benutzeroberfläche. Sie ermöglichen es Entwicklern, unabhängige, wiederverwendbare Teile der Benutzeroberfläche zu erstellen, die kombiniert werden können, um größere UI-Elemente zu bilden.

Eine React-Anwendung kann als ein Komponentenbaum betrachtet werden, wobei die oberste Komponente die Wurzel darstellt. Jede Komponente ist dafür verantwortlich, JSX-Markup zu rendern und die gewünschte HTML-Struktur zu definieren, die im Browser DOM angezeigt wird.

Funktionale Komponenten

Funktionale Komponenten sind JavaScript-Funktionen, die JSX zurückgeben, um die Struktur und den Inhalt eines UI-Elements zu definieren. Sie stellen die moderne Methode zur Entwicklung von React-Anwendungen dar und werden mit Großbuchstaben benannt, wie z. B. Product oder User, um sie von Standard-HTML-Elementen wie div oder span zu unterscheiden.

Funktionale Komponenten bieten mehrere Vorteile:

• Weniger Boilerplate: Funktionale Komponenten reduzieren Boilerplate-Code und sind dadurch prägnanter und leichter zu handhaben;
• Leichtere Verständlichkeit: Sie sind leichter zu verstehen, insbesondere für Entwickler, die neu in React sind;
• Einfacheres Testen: Funktionale Komponenten erleichtern das Testen aufgrund ihrer einfachen Struktur;
• Kein Kontext (this): Im Gegensatz zu Klassenkomponenten verwenden funktionale Komponenten keinen Kontext (this), was den Code vereinfacht. Hier ein Beispiel für eine funktionale Komponente:

const Product = () => (
  <div>
    <h2>HolaFood</h2>
    <p>Price: $19.99</p>
    <button type="button">Add to Cart</button>
  </div>
);

In diesem Beispiel ist Product eine funktionale Komponente, die eine Produktkarte darstellt.

Funktionale Komponenten bilden den Großteil der Struktur einer React-Anwendung und dienen als grundlegende Bausteine zur Erstellung von Benutzeroberflächen.