Erstellen eines einfachen Rechners mit React

Einführung

In diesem Tutorial führen wir Sie durch die Erstellung eines einfachen und funktionalen Rechners mit React. Dieses Projekt ist ein ausgezeichneter Ausgangspunkt für Anfänger, die praktische Erfahrungen mit React sammeln und verstehen möchten, wie man den Status verwaltet und Ereignisse in einer React-Anwendung verarbeitet.

Projektübersicht

Mit diesem Rechnerprojekt können Benutzer grundlegende arithmetische Operationen wie Addition, Subtraktion, Multiplikation und Division durchführen. Der Rechner verfügt über eine elegante, benutzerfreundliche Oberfläche und übernimmt alle wesentlichen Vorgänge, einschließlich des Löschens der Eingabe, des Löschens des zuletzt eingegebenen Werts und der Berechnung des Ergebnisses.

Merkmale

• Grundlegende arithmetische Operationen: Unterstützt Addition, Subtraktion, Multiplikation und Division.
• Funktionalität „Löschen“ (AC) und „Löschen“ (DEL): Einfaches Löschen aller Eingaben oder Löschen der zuletzt eingegebenen Ziffer.
• Responsives Design: Funktioniert gut auf verschiedenen Bildschirmgrößen, mit einem intuitiven Tastenlayout.
• Fehlerbehandlung: Zeigt eine Fehlermeldung an, wenn ein ungültiger Vorgang ausgeführt wird.

Verwendete Technologien

• Reagieren: Zum Erstellen der Benutzeroberfläche.
• CSS: Zum Gestalten der Anwendung und Sicherstellen eines responsiven Designs.

Projektstruktur

Das Projekt ist wie folgt aufgebaut:

├── public
├── src
│   ├── components
│   │   └── Calculator.jsx
│   ├── App.jsx
│   ├── App.css
│   ├── index.js
│   └── index.css
├── package.json
└── README.md

Schlüsselkomponenten

• Calculator.jsx: Enthält die Hauptlogik für den Rechner, einschließlich Statusverwaltung und Ereignisbehandlung.
• App.jsx: Umschließt die Rechnerkomponente und verwaltet das Gesamtlayout der Anwendung.
• App.css: Enthält den Stil für die Rechnerkomponente.

Code-Erklärung

Rechnerkomponente

Die Calculator-Komponente verwaltet den Status der Eingabe und des Ergebnisses des Rechners mithilfe des useState-Hooks. Es enthält eine handleClick-Funktion, die Schaltflächenklicks verarbeitet und den Status entsprechend aktualisiert. Die Funktion „calcureResult“ wertet die Eingabe mithilfe der Funktion „eval“ von JavaScript aus und aktualisiert das Ergebnis.

import  { useState } from "react";

const Calculator = () => {
  const [input, setInput] = useState("");
  const [result, setResult] = useState("");

  const handleClick = (value) => {
    if (value === "AC") {
      setInput("");
      setResult("");
    } else if (value === "DEL") {
      setInput(input.slice(0, -1));
    } else if (value === "=") {
        setResult("")
      calculateResult();
    } else {
      setInput(input + value);
    }
  };

  const calculateResult = () => {
    try {
      setInput(eval(input));
    } catch (error) {
      setResult("Enter Valid Operation");
    }
  };

  return (
    <div className="calculator">
      <div className="output-box">
        <h1>{input}</h1>
        <h2>{result}</h2>
      </div>
      <div className="buttons">
        <div className="row-1">
          <button onClick={() => handleClick("AC")}>
            <p>AC</p>
          </button>
          <button onClick={() => handleClick("DEL")}>
            <p>DEL</p>
          </button>
          <button onClick={() => handleClick("%")}>
            <p>%</p>
          </button>
          <button onClick={() => handleClick("/")}>
            <p>÷</p>
          </button>
        </div>
        <div className="row-2">
          <button onClick={() => handleClick("7")}>
            <p>7</p>
          </button>
          <button onClick={() => handleClick("8")}>
            <p>8</p>
          </button>
          <button onClick={() => handleClick("9")}>
            <p>9</p>
          </button>
          <button onClick={() => handleClick("*")}>
            <p>X</p>
          </button>
        </div>
        <div className="row-3">
          <button onClick={() => handleClick("4")}>
            <p>4</p>
          </button>
          <button onClick={() => handleClick("5")}>
            <p>5</p>
          </button>
          <button onClick={() => handleClick("6")}>
            <p>6</p>
          </button>
          <button onClick={() => handleClick("-")}>
            <p>-</p>
          </button>
        </div>
        <div className="row-4">
          <button onClick={() => handleClick("1")}>
            <p>1</p>
          </button>
          <button onClick={() => handleClick("2")}>
            <p>2</p>
          </button>
          <button onClick={() => handleClick("3")}>
            <p>3</p>
          </button>
          <button onClick={() => handleClick("+")}>
            <p>+</p>
          </button>
        </div>
        <div className="row-5">
          <button id="zero-button" onClick={() => handleClick("0")}>
            <p>0</p>
          </button>
          <button onClick={() => handleClick(".")}>
            <p>.</p>
          </button>
          <button onClick={() => handleClick("=")}>
            <p>=</p>
          </button>
        </div>
      </div>
    </div>
  );
};

export default Calculator;

App-Komponente

Die App-Komponente rendert die Rechnerkomponente und fügt der Anwendung eine Kopf- und Fußzeile hinzu.

import Calculator from "./components/Calculator";
import "./App.css";
const App = () => {
  return (
    <div className="app">
      <div className="header">
        <h1>Calculator</h1>
      </div>
      <Calculator />
      <div className="footer">
        <p>Made with ❤️ by Coding4Dev</p>
      </div>
    </div>
  );
};

export default App;

CSS-Styling

Die CSS-Stile sorgen dafür, dass der Rechner zentriert auf dem Bildschirm angezeigt wird und ein modernes Aussehen erhält. Die Tasten sind für ein klares und ansprechendes Design gestaltet.

* {
  box-sizing: border-box;
}
body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}
.app {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.header {
  margin: 20px;
}

.calculator {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 350px;
  height: 450px;
  color: white;
  background-color: black;
  border-radius: 15px;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}
.output-box {
  width: 300px;
  height: 100px;
  color: rgb(53, 52, 52);
  background-color: rgb(216, 216, 216);
  border-radius: 12px;
}
.output-box h1 {
  margin-left: 15px;
  font-size: 25px;
  overflow: hidden;
}
.output-box h2 {
  margin-left: 15px;
  font-size: 25px;
}
.buttons {
  margin-top: 15px;
  width: 350px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.buttons p {
  font-size: 14px;
  font-weight: 600;
  color: white;
}
button {
  width: 72px;
  margin: 4px;
  border-radius: 12px;
  border: none;
  background-color: #536493;
}
button:hover {
  background-color: #374262;
}
#zero-button {
  width: 150px;
}
.footer {
  margin: 20px;
}

Installation und Nutzung

Um mit diesem Projekt zu beginnen, klonen Sie das Repository und installieren Sie die Abhängigkeiten:

git clone https://github.com/abhishekgurjar-in/Calculator.git
cd calculator-react
npm install
npm start

Dadurch wird der Entwicklungsserver gestartet und der Rechner in Ihrem Standard-Webbrowser geöffnet.

Live-Demo

Sie können sich hier die Live-Demo des Rechners ansehen.

Abschluss

Dieses einfache Rechnerprojekt ist eine hervorragende Möglichkeit, Ihre React-Fähigkeiten zu üben und zu verstehen, wie Sie den Status verwalten und Benutzereingaben in einer React-Anwendung verarbeiten. Sie können dieses Projekt gerne erweitern, indem Sie erweiterte Funktionen wie einen wissenschaftlichen Taschenrechnermodus hinzufügen oder zusätzliche Funktionen integrieren.

Credits

• Inspiration:Dieses Projekt wurde von verschiedenen online verfügbaren einfachen Taschenrechnern inspiriert.

Autor

Abhishek Gurjar ist ein leidenschaftlicher Webentwickler mit Schwerpunkt auf der Entwicklung intuitiver und reaktionsfähiger Webanwendungen. Verfolgen Sie seine Reise und entdecken Sie weitere Projekte auf GitHub.

Das obige ist der detaillierte Inhalt vonErstellen eines einfachen Rechners mit React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!