Eine React-Anwendung besteht aus Komponenten. Eine Komponente ist ein wiederverwendbarer Teil der Benutzeroberfläche, der steuert, was auf dem Bildschirm angezeigt wird. Anstatt eine gesamte Seite als einen großen Block zu erstellen, empfiehlt React, die Oberfläche in kleinere Teile zu unterteilen. Jeder Teil ist für einen bestimmten Abschnitt der UI verantwortlich, wie zum Beispiel einen Header, einen Button oder eine Nachricht.

In React werden Komponenten mit JavaScript geschrieben und als Funktionen definiert. Jede Komponente gibt eine Beschreibung dessen zurück, was auf dem Bildschirm erscheinen soll, und React übernimmt die Darstellung.

Komponenten machen Benutzeroberflächen leichter verständlich und wartbar. Wenn die UI wächst, helfen Komponenten dabei, den Code zu organisieren, Logik wiederzuverwenden und Wiederholungen zu vermeiden. Nachfolgend ein einfaches Beispiel für eine React-Komponente:

function Welcome() {
  return <h1>Welcome to React</h1>;
}

Dies ist eine React-Komponente mit dem Namen Welcome. Sie gibt ein UI-Element zurück, das React auf dem Bildschirm darstellen kann. Die Syntax muss an dieser Stelle noch nicht verstanden werden. Dieses Beispiel dient dazu, zu zeigen, wie eine Komponente auf hoher Ebene aussieht.