Willkommen zu Tag 4 der „30 Days of ReactJS“-Challenge! Heute werden wir Komponenten und Requisiten erkunden – die Bausteine ​​jeder React-Anwendung. Wenn Sie diese Konzepte verstehen, können Sie Ihre Benutzeroberfläche in wiederverwendbare, unabhängige Teile aufteilen.

Was sind Komponenten?

Komponenten in React sind wie die Zutaten in einem Rezept. So wie Sie verschiedene Zutaten zu einem Gericht kombinieren, kombinieren Sie Komponenten, um eine React-Anwendung zu erstellen. Eine Komponente ist eine JavaScript-Funktion oder -Klasse, die optional Eingaben (bekannt als Requisiten) akzeptiert und ein React-Element zurückgibt, das beschreibt, was auf dem Bildschirm erscheinen soll.

Es gibt zwei Haupttypen von Komponenten in React:

Funktionskomponenten: Dies sind JavaScript-Funktionen, die JSX zurückgeben. Sie sind einfacher und leichter zu lesen.

Klassenkomponenten: Dies sind ES6-Klassen, die von React.Component ausgehen. Sie verfügen über mehr Funktionen wie Zustands- und Lebenszyklusmethoden, sind jedoch in der modernen React-Entwicklung weniger verbreitet.

Beispiel: Eine Schaltflächenkomponente

Lassen Sie uns eine einfache Schaltflächenkomponente erstellen:

function Button() {
  return (
    Click me!
  );
}

Diese Button-Komponente ist eine funktionale Komponente, die ein Button-Element mit dem Text „Click me!“ zurückgibt.

Warum Komponenten wichtig sind

Komponenten ermöglichen es Ihnen, Ihre Benutzeroberfläche in kleinere, überschaubare Teile zu unterteilen. Dadurch wird Ihr Code besser organisiert und einfacher zu warten. Stellen Sie sich vor, Sie versuchen, ein komplexes Gericht zuzubereiten, ohne es in Schritte aufzuteilen. Es wäre chaotisch! Ebenso kann die Erstellung einer Benutzeroberfläche ohne Komponenten überwältigend sein.

Beispiel aus der Praxis: Legosteine
Stellen Sie sich Komponenten wie Legosteine ​​vor. Jeder Block (Komponente) ist ein Teil Ihrer Anwendung und Sie können sie kombinieren, um etwas Größeres zu erstellen. Genau wie Legosteine ​​können Komponenten in verschiedenen Teilen Ihrer Anwendung wiederverwendet werden.

Was sind Requisiten?
Props (kurz für „Eigenschaften“) sind die Art und Weise, wie Sie Daten von einer Komponente an eine andere übergeben. Sie ähneln Funktionsargumenten und können zum Anpassen einer Komponente verwendet werden.

Angenommen, wir möchten eine Schaltflächenkomponente erstellen, die basierend auf den empfangenen Requisiten unterschiedlichen Text anzeigen kann:

function Button(props) {
  return (
    {props.label}
  );
}

Wenn Sie jetzt die Button-Komponente verwenden, können Sie eine Label-Requisite übergeben, um ihren Text anzupassen:

function App() {
  return (
    

      
      
    
  );
}

Hier wird die Button-Komponente zweimal verwendet, jedoch mit unterschiedlichen Bezeichnungen: „Senden“ und „Abbrechen“.

Die Bedeutung von Requisiten

Requisiten machen Ihre Komponenten flexibler und wiederverwendbar. Anstatt Werte in Ihren Komponenten fest zu codieren, können Sie dynamische Daten über Requisiten übergeben, sodass Sie dieselbe Komponente in verschiedenen Kontexten verwenden können.

Komponenten und Requisiten mit Vite einrichten

Da wir Vite für unsere Entwicklungsumgebung verwenden, ist die Einrichtung von Komponenten und Requisiten unkompliziert. Wenn Sie mitgelesen haben, ist Ihr Vite-Projekt bereits konfiguriert. Sie können mit der Erstellung von Komponenten in separaten Dateien beginnen und diese in Ihre Hauptanwendung importieren.

So können Sie Ihr Projekt strukturieren:

1. Erstellen Sie eine neue Komponente: Erstellen Sie eine neue Datei, Button.jsx, in Ihrem src-Ordner und definieren Sie dort Ihre Button-Komponente.
2. Verwenden Sie die Komponente in Ihrer App: Importieren Sie in Ihre App.jsx-Datei die Button-Komponente und verwenden Sie sie mit verschiedenen Requisiten.

Alles zusammenfügen

Komponenten und Requisiten sind das Herzstück der komponentenbasierten Architektur von React. Indem Sie Ihre Benutzeroberfläche in kleinere Komponenten aufteilen und Daten mithilfe von Requisiten zwischen ihnen weitergeben, können Sie skalierbare und wartbare Anwendungen erstellen.

Morgen befassen wir uns mit Zustands- und Lebenszyklusmethoden, die es Ihren Komponenten ermöglichen, dynamische Daten zu verwalten und auf Änderungen im Laufe der Zeit zu reagieren.