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.

Man kann sich eine React-App als einen Baum von Komponenten vorstellen, wobei die oberste Komponente die Wurzel ist. 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 repräsentieren die moderne Art, React-Apps zu erstellen und werden mit Großbuchstaben benannt, wie 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, was sie prägnanter und einfacher zu handhaben macht;
• Einfacher zu Verstehen: Sie sind einfacher zu verstehen und zu erfassen, insbesondere für Entwickler, die neu in React sind;
• Einfacher zu Testen: Funktionale Komponenten erleichtern das Testen aufgrund ihrer unkomplizierten Natur;
• Kein Kontext (this): Im Gegensatz zu Klassenkomponenten beinhalten funktionale Komponenten keinen Kontext (this), was Ihren Code vereinfacht. Hier ist 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-App und dienen als wesentliche Bausteine zur Erstellung von Benutzeroberflächen.