So erstellen Sie eine einfache Counter-App in React

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“: Dies erhöht die Zählung um eins.
2. Schaltfläche „Zähler verringern“: Dies verringert die Zählung um eins.
3. Reset-Taste : Dies setzt die Zählung auf Null.

Grundkonzepte der Reaktion

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

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. Props : Sie können Props – 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 Sie können Requisiten verwenden, um mehrere Operationen in React auszuführen.
5. Hooks : React Hooks sind integrierte Funktionen, mit denen Sie den Status und andere React-Funktionen wie Lebenszyklusmethoden in funktionalen Komponenten verwalten können. Sie können Ihnen auch dabei helfen, prägnanten und klaren Code zu schreiben. Sie werden bald sehen, wie Sie den Status mit dem Hook useState() verwalten können .

Schritt 1: Einrichten des Projekts

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

npx create-react-app react-counter-app

Dadurch wird eine neue Reaktions-App erstellt, mit der Sie Ihr Projekt erstellen 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 http://localhost:3000 zeigt. Alle Änderungen, die Sie am Projekt vornehmen, werden hier automatisch aktualisiert.

Schritt 2: Erstellen des Skeletts der Zähleranwendung

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

import React, { useState } from "react";


function App() {
  const [count, setCount] = useState(0);
  let incrementCount = () => {
 // To add later
  };
  let decrementCount = () => {
 // To add later
  };
  let resetCount = () => {
  // To add later
  }

export default App;

Die erste Anweisung importiert den useState- Hook aus dem React -Modul. Verwenden Sie es, um den Zählerstatus zu erstellen und auf 0 zu initialisieren. Sie können den Wert des Zählers mit der Funktion setCount ändern .

Sie werden die Funktionen incrementCount , decrementCount und resetCount später verwenden, 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 das Schaltflächen – Div ein:

<Button title={"Decrement"} action={decrementCount} />
<Button title={"Increment"} action={incrementCount} />
<Button title={"Reset"} action={resetCount} />

Wenn Sie auf diese Schaltflächen klicken, werden die Funktionen decrementCount , incrementCount und resetCount ausgeführt. Beachten Sie, dass Sie die Title- und Action- Requisiten von der übergeordneten App – Komponente an die untergeordnete Button – Komponente übergeben.

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

let incrementCount = () => {
  setCount(count + 1);
};


let decrementCount = () => {
  setCount(count - 1);
};

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

Die Funktion setCount aktualisiert den Status der Zählung .

Beachten Sie, dass Sie die Button-Komponente noch nicht erstellt haben. Erstellen Sie einen neuen Komponentenordner im Verzeichnis src 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 der Datei components/Button.js hinzu :

import React from "react";


function Button(props) {
    let { action, title } = props;
    return <button onClick={action}>{title}</button>;
}

export default Button;

Die Button -Komponente erhält 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 schließlich die Button-Komponente oben auf der App.js- Seite mit dem folgenden Code:

import Button from "./components/Botton";

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

import React, { useState } from "react";
import Button from "./components/Button";


function App() {
  const [count, setCount] = useState(0);

export default App;

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, das Schreiben von Tests für jede React-Komponente, die Verwendung von Objektdestrukturierung für Props und das Befolgen von Namenskonventionen.