Leser wie Sie helfen, MUO zu unterstützen. Wenn Sie über Links auf unserer Website einen Kauf tätigen, erhalten wir möglicherweise eine Affiliate-Provision. Weiterlesen.

React ist eine der beliebtesten Frontend-JavaScript-Bibliotheken. Viele Unternehmen verwenden React, um ihre Benutzeroberflächen zu entwickeln, und es erfreut sich bei Entwicklern großer Beliebtheit.

Es ist einfach, mit React ein einfaches Programm zu erstellen, wie diese einfache Zähler-App. Beginnen Sie mit einem einfachen Tutorial, das Ihnen helfen wird, einige der grundlegenden, aber wichtigen Konzepte von React zu verstehen.

Funktionen der Zähler-App

In diesem Projekt entwickeln Sie eine Zähleranwendung mit den folgenden Funktionen:

  1. Schaltfläche "Zähler erhöhen".: Dadurch wird die Zählung um eins erhöht.
  2. Schaltfläche zum Verringern der Anzahl: Dadurch wird die Zählung um eins verringert.
  3. Reset-Knopf: Dadurch wird der Zähler auf Null gesetzt.

Grundkonzepte der Reaktion

Bevor Sie fortfahren, müssen Sie einige dieser grundlegenden Konzepte in React verstehen, die Sie in diesem Projekt verwenden werden:

instagram viewer
  1. Komponenten: Komponenten sind die Kernbausteine ​​von React-Anwendungen. Sie enthalten unabhängigen, wiederverwendbaren Code. Mithilfe von Komponenten können Sie die Benutzeroberfläche in separate Teile aufteilen. Sie können diese Teile dann wiederverwenden und unabhängig mit ihnen arbeiten.
  2. Zustand: In React können Sie ein Objekt verwenden, um Daten zu speichern, die den Zustand einer Komponente darstellen. Dadurch können Komponenten ihre eigenen Daten verwalten und aktualisieren. Der Zustand einer Komponente bestimmt, wie sie gerendert wird und sich verhält.
  3. Funktionale Komponenten: Die funktionale Komponente von React ist einfach eine JavaScript-Funktion, die Props als Argument akzeptiert und ein React-Element (JSX) zurückgibt.
  4. Requisiten: Sie können Requisiten – kurz für „Eigenschaften“ – verwenden, um Daten von einer übergeordneten Komponente an eine untergeordnete Komponente zu übergeben. Requisiten sind einer der wesentlichen Bestandteile von React und das können Sie Verwenden Sie Requisiten, um mehrere Operationen in React auszuführen.
  5. Haken: React Hooks sind eingebaute Funktionen die es Ihnen ermöglichen, Status und andere React-Funktionen wie Lebenszyklusmethoden innerhalb funktionaler Komponenten zu verwalten. Sie können Ihnen auch dabei helfen, prägnanten und klaren Code zu schreiben. Sie werden bald sehen, wie Sie den Zustand mit verwalten können useState() Haken.

Der in diesem Projekt verwendete Code ist in a GitHub-Repository und steht Ihnen unter der MIT-Lizenz kostenlos zur Verfügung.

Schritt 1: Einrichten des Projekts

Öffnen Sie Ihr Terminal und führen Sie den folgenden Befehl aus, um loszulegen:

npx erstellen-Reagieren-App Reagieren-Zähler-App

Dieser Wille Erstellen Sie eine neue React-App, damit Sie mit der Erstellung Ihres Projekts beginnen können. Es wird eine Dateisystemstruktur mit mehreren Dateien und Ordnern generiert.

Führen Sie den folgenden Befehl im Terminal aus, um den Entwicklungsserver zu starten:

npm Start

Dieser Befehl sollte einen neuen Tab in Ihrem Browser öffnen, der auf zeigt http://localhost: 3000. Alle Änderungen, die Sie am Projekt vornehmen, werden hier automatisch aktualisiert.

Schritt 2: Erstellen des Skeletts der Zähleranwendung

Öffne das src/App.js Datei und löschen Sie den gesamten standardmäßigen Code, der dort vorhanden ist. Erstellen Sie nun ein Skelett der Anwendung mit dem folgenden Code:

importieren Reagieren, { useState } aus"reagieren";
FunktionApp() {
konst [count, setCount] = useState(0);
lassen incrementCount = () => {
// Später hinzufügen
 };
lassen decrementCount = () => {
// Später hinzufügen
 };
lassen resetCount = () => {
// Später hinzufügen
 }


zurückkehren (
<divKlassenname="App">
<P>Anzahl: {Anzahl}P>
<divKlassenname="Tasten">
div>
div>
);
}
ExportStandard Anwendung;

Die erste Anweisung importiert die useState Haken aus der reagieren Modul. Verwenden Sie es, um die zu erstellen zählen Zustand und initialisieren Sie es auf 0. Sie können den Wert von ändern zählen Verwendung der setCount Funktion.

Sie verwenden die incrementCount, decrementCount, Und resetCount Funktionen später, um den Wert des Zählers zu erhöhen, zu verringern und zurückzusetzen.

Möglicherweise bemerken Sie die geschweiften Klammern { }, die im Markup um die count-Variable herum verwendet werden. Dadurch weiß der JSX-Parser im Wesentlichen, dass er den Inhalt in diesen geschweiften Klammern als JavaScript behandeln soll.

Schritt 3: Hinzufügen der Funktionalität zur Zähleranwendung

Sie müssen drei Schaltflächen erstellen, um die Funktionalität der Zähleranwendung zu implementieren: die Schaltfläche „Zähler verringern“, „Zähler erhöhen“ und „Zurücksetzen“. Fügen Sie den folgenden Code in die Tasten div:

<TasteTitel={"Dekrementieren"} Aktion={decrementCount} />
<TasteTitel={"Zuwachs"} Aktion={incrementCount} />
<TasteTitel={"Zurücksetzen"} Aktion={resetCount} />

Wenn Sie auf diese Schaltflächen klicken, wird die decrementCount, incrementCount, Und resetCount Funktionen werden ausgeführt. Beachten Sie, dass Sie die passieren Titel Und Aktion Requisiten von den Eltern App Komponente für das Kind Taste Komponente.

Aktualisieren Sie diese Funktionen in der App.js Datei mit folgendem Code:

lassen incrementCount = () => {
 setCount (Anzahl + 1);
};
lassen decrementCount = () => {
 setCount (Anzahl - 1);
};
lassen resetCount = () => {
 setCount (0);
}

Der setCount Funktion aktualisiert den Status der zählen.

Beachten Sie, dass Sie die Button-Komponente noch nicht erstellt haben. Erstelle eine neue Komponenten Ordner im Quelle Verzeichnis und erstellen Sie dann eine neue Datei mit dem Namen Button.js. Es empfiehlt sich, alle Komponenten im selben Ordner zu speichern.

Fügen Sie den folgenden Code in die Komponenten/Button.js Datei:

importieren Reagieren aus"reagieren";
FunktionTaste(Requisiten) {
lassen { Aktion, Titel } ​​= Requisiten;
zurückkehren<TasteonClick={Aktion}>{Titel}Taste>;
}
ExportStandard Taste;

Der Taste Komponente empfängt Daten über Props. Die Funktion zerlegt diese Requisiten dann in separate Variablen und verwendet sie, um das zurückgegebene Markup zu füllen.

Der Code verwendet diese Komponente dreimal, um die Schaltflächen zum Erhöhen, Verringern und Zurücksetzen zu erstellen.

Importieren Sie abschließend die Button-Komponente oben in der App.js Seite mit folgendem Code:

importieren Taste aus"./Komponenten/Boden";

So sieht der endgültige Code in der aus App.js Datei:

importieren Reagieren, { useState } aus"reagieren";
importieren Taste aus"./Komponenten/Schaltfläche";
FunktionApp() {
konst [count, setCount] = useState(0);


lassen incrementCount = () => {
 setCount (Anzahl + 1);
 };


lassen decrementCount = () => {
 setCount (Anzahl - 1);
 };


lassen resetCount = () => {
 setCount (0);
 }


zurückkehren (
<divKlassenname="App">
<P>Anzahl: {Anzahl}P>
<divKlassenname="Tasten">
<TasteTitel={"Dekrementieren"} Aktion={decrementCount} />
<TasteTitel={"Zuwachs"} Aktion={incrementCount} />
<TasteTitel={"Zurücksetzen"} Aktion={resetCount} />
div>
div>
 );
}
ExportStandard Anwendung;

Befolgen Sie die Best React Practices

Sie können React-Code auf verschiedene Arten schreiben, aber es ist wichtig, ihn so sauber wie möglich zu strukturieren. Dies stellt sicher, dass Sie es einfach warten können, und kann dazu beitragen, die Gesamtleistung Ihrer Anwendung zu verbessern.

Sie können mehrere von der React-Community empfohlene React-Praktiken befolgen, z. B. das Vermeiden von sich wiederholendem Code, Schreiben von Tests für jede React-Komponente, Verwendung von Objektdestrukturierung für Requisiten und folgende Benennung Konventionen.