Nachdem wir im letzten Beitrag erklärt haben, was React ist und wofür es genutzt wird, schauen wir uns heute an, wie eine React-Komponente eigentlich aussieht. Denn das Herzstück von React sind genau diese kleinen, wiederverwendbaren Bausteine.
 

Was ist eine Komponente?

Eine Komponente in React ist ein Teil der Benutzeroberfläche – zum Beispiel ein Button, ein Textfeld oder ein ganzer Abschnitt auf deiner Webseite.
React verwendet diese Komponenten, um komplexe Interfaces aus einfachen Modulen aufzubauen.

Du kannst dir eine Komponente wie ein Lego-Stein vorstellen:
🔹 klein,
🔹 selbstständig,
🔹 und wiederverwendbar.

🧪 Beispiel: Eine ganz einfache React-Komponente

Hier siehst du, wie eine React-Komponente in JavaScript aussieht:

                               import React from 'react';

                               function Begruessung() {
                                 return (
                                   <div>
                                      <h1>Hallo, Welt!</h1>
                                      <p>Ich bin eine React-Komponente.</p>
                                    </div>
                                   );
                                }

                                export default Begruessung;

Diese Funktion heißt Begruessung. Sie gibt ein HTML-ähnliches Element zurück – das nennt man JSX. JSX ist eine spezielle Syntax in React, mit der du JavaScript und HTML kombinieren kannst.
 

Wie verwendet man diese Komponente?

Sobald du diese Komponente erstellt hast, kannst du sie in anderen Teilen deiner App verwenden – ganz einfach so:

                                <Begruessung />

Das ist das Tolle an React: Einmal geschrieben, kannst du deine Bausteine überall wiederverwenden.
 

Fazit

Eine React-Komponente ist nichts anderes als eine Funktion, die ein Stück UI beschreibt.
Sie ist der perfekte Einstieg in die Welt der modernen Webentwicklung – einfach, modular und flexibel.

👉 Im nächsten Beitrag zeigen wir dir, wie du eine Komponente interaktiv machst – z. B. mit einem Zähler, der auf Klicks reagiert!