ReactJS |Einfacher Reaktionsrechner

Dieser Artikel führt Sie durch den Prozess der Erstellung eines funktionalen, benutzerfreundlichen Rechners mit ReactJS. Wir werden die wesentlichen Konzepte wie Zustandsverwaltung, Ereignisbehandlung und Komponentenstruktur behandeln, um dieses Projekt für Anfänger zugänglich zu machen und eine großartige Lernerfahrung für diejenigen zu bieten, die mit React vertraut sind.

Projekt-Setup

Erstellen Sie eine neue Reaktions-App:
Beginnen Sie mit der Einrichtung eines neuen React-Projekts mit Create React App:

npx Create-React-App React-Calculator
CD-Reaktionsrechner
content_copy
Verwenden Sie Code mit Vorsicht.
Bash

Starten Sie den Entwicklungsserver:
Führen Sie den folgenden Befehl aus, um Ihren Entwicklungsserver zu starten:

NPM-Start
content_copy
Verwenden Sie Code mit Vorsicht.
Bash

Ihre React-App ist unter http://localhost:3000/.

Komponentenstruktur

Wir strukturieren unseren Rechner mit einer einzigen Komponente: App.js. Diese Komponente übernimmt die Logik und das Rendering des gesamten Rechners.

App.js (Hauptkomponente)

import React, { useState } from „react“;
import "./App.css";

Funktion App() {
const [displayValue, setDisplayValue] = useState("0");
const [Operator, setOperator] = useState(null);
const [firstOperand, setFirstOperand] = useState(null);

// Funktion zur Verarbeitung von Nummerntastenklicks
const handleNumberClick = (Zahl) => {
if (displayValue === "0") {
setDisplayValue(number.toString());
} sonst {
setDisplayValue(displayValue + number.toString());
}
};

// Funktion zur Verarbeitung von Bedienertastenklicks
const handleOperatorClick = (op) => {
setOperator(op);
setFirstOperand(parseFloat(displayValue));
setDisplayValue("0");
};

// Funktion zur Verarbeitung gleicher Schaltflächenklicks
const handleEqualsClick = () => {
const secondOperand = parseFloat(displayValue);
Ergebnis lassen;

switch (operator) { case "+": result = firstOperand + secondOperand; break; case "-": result = firstOperand - secondOperand; break; case "*": result = firstOperand * secondOperand; break; case "/": if (secondOperand === 0) { result = "Error"; } else { result = firstOperand / secondOperand; } break; default: result = "Invalid Operation"; } setDisplayValue(result.toString()); setOperator(null); setFirstOperand(null);

};

// Funktion zur Handhabung des Klicks auf eine klare Schaltfläche
const handleClearClick = () => {
setDisplayValue("0");
setOperator(null);
setFirstOperand(null);
};

zurück (

{/* Button grid for calculator functions */} 
  handleNumberClick("7")}>7  handleNumberClick("8")}>8  handleNumberClick("9")}>9  handleOperatorClick("/")}>/  handleNumberClick("4")}>4  handleNumberClick("5")}>5  handleNumberClick("6")}>6  handleOperatorClick("*")}>*  handleNumberClick("1")}>1  handleNumberClick("2")}>2  handleNumberClick("3")}>3  handleOperatorClick("-")}>-  handleNumberClick("0")}>0  handleNumberClick(".")}>.  handleEqualsClick()}>=  handleOperatorClick("+")}>+  handleClearClick()}>C