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 React-App:
Beginnen Sie mit der Einrichtung eines neuen React-Projekts mit Create React App:

npx create-react-app-Reaktionsrechner
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/ zugänglich.

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 Bediener-Schaltflächenklicks
const handleOperatorClick = (op) => {
setOperator(op);
setFirstOperand(parseFloat(displayValue));
setDisplayValue("0");
};

// Funktion zur Handhabung des Gleichheits-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 (

{/* Aktuellen Wert anzeigen */}
{displayValue}

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

);
}

Standard-App exportieren;
content_copy
Verwenden Sie Code mit Vorsicht.
JavaScript

Erklärung

Staatsverwaltung:
Wir verwenden useState-Hooks, um den Status des Rechners zu verwalten. displayValue enthält den aktuell angezeigten Wert, der Operator speichert die ausgewählte Operation und firstOperand speichert die erste eingegebene Zahl.

Ereignisbehandlung:
Funktionen wie handleNumberClick, handleOperatorClick, handleEqualsClick und handleClearClick verarbeiten Benutzerinteraktionen mit den Schaltflächen.

Komponentenzusammensetzung:
Die App-Komponente ist sowohl für die Logik als auch für das Rendering des Rechners verantwortlich und demonstriert, wie Komponenten Funktionalität und Präsentation kombinieren können.

Styling hinzufügen (App.css)

.Rechner {
Anzeige: Flex;
Flexrichtung: Spalte;
Breite: 300px;
Rand: 1px fest #ccc;
Polsterung: 20px;
Randradius: 5px;
}

.display {
Höhe: 50px;
Hintergrundfarbe: #eee;
Schriftgröße: 24px;
Textausrichtung: rechts;
Polsterung: 10px;
Randradius: 5px;
Rand unten: 10px;
}

.buttons {
Anzeige: Raster;
Rastervorlagenspalten: wiederholen(4, 1fr);
Gitterlücke: 10px;
}

Schaltfläche {
Polsterung: 10px;
Grenze: keine;
Randradius: 5px;
Hintergrundfarbe: #f0f0f0;
Schriftgröße: 18px;
Cursor: Zeiger;
}

Button:hover {
Hintergrundfarbe: #ddd;
}
content_copy
Verwenden Sie Code mit Vorsicht.
CSS

Fazit

Indem Sie diese Schritte befolgen, haben Sie mit React einen voll funktionsfähigen Rechner erstellt! Dieses Projekt dient als hervorragende Grundlage für die weitere Erforschung der Fähigkeiten von React. Sie können jetzt Funktionen wie erweiterte Vorgänge, Speicherfunktionen oder sogar ein visuelles Thema hinzufügen. Experimentieren Sie und haben Sie Spaß!

Das obige ist der detaillierte Inhalt vonReactJS |Einfacher Reaktionsrechner. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!