Erzählen Sie mir von Komponenten in React.

In React sind Komponenten unabhängige, wiederverwendbare Elemente der Benutzeroberfläche, die Eingabedaten (props) akzeptieren und ihren eigenen Zustand verwalten können.

Es gibt zwei Haupttypen von Komponenten:

1. Funktionale Komponenten: Einfache JavaScript-Funktionen, die JSX zurückgeben.

   // Beispiel für eine funktionale Komponente
   function Welcome(props) {
     return <h1>Hallo, {props.name}!</h1>;
   }
   

2. Klassenelemente: JavaScript-Klassen, die React.Component erweitern und eine render()-Methode haben, die JSX zurückgibt. Sie können einen lokalen Zustand (state) und Lifecycle-Methoden besitzen.

   // Beispiel für eine Klassenkomponente
   class Counter extends React.Component {
     constructor(props) {
       super(props);
       this.state = { count: 0 };
     }
   
     render() {
       return (
         <div>
           <p>Zähler: {this.state.count}</p>
           <button onClick={() => this.setState({ count: this.state.count + 1 })}>
             Erhöhen
           </button>
         </div>
       );
     }
   }
   

Komponenten können verschachtelt werden, um komplexere Schnittstellen zu erstellen. Daten werden vom übergeordneten Komponenten an die untergeordneten Komponenten über props übergeben.

Die Verwendung von Komponenten gewährleistet Modularität, Code-Wiederverwendung und erleichtert die Zustandsverwaltung der Anwendung.