Construire une calculatrice simple avec React

Introduction

Dans ce tutoriel, nous vous expliquerons comment créer une calculatrice simple et fonctionnelle à l'aide de React. Ce projet est un excellent point de départ pour les débutants cherchant à acquérir une expérience pratique avec React et à comprendre comment gérer l'état et gérer les événements dans une application React.

Aperçu du projet

Ce projet de calculatrice permet aux utilisateurs d'effectuer des opérations arithmétiques de base telles que l'addition, la soustraction, la multiplication et la division. La calculatrice possède une interface élégante et conviviale et gère toutes les opérations essentielles, y compris l'effacement de la saisie, la suppression de la dernière valeur saisie et le calcul du résultat.

Caractéristiques

• Opérations arithmétiques de base : prend en charge l'addition, la soustraction, la multiplication et la division.
• Fonctionnalité Effacer (AC) et Supprimer (DEL) : Effacez facilement toutes les entrées ou supprimez le dernier chiffre saisi.
• Conception réactive : fonctionne bien sur différentes tailles d'écran, avec une disposition intuitive des boutons.
• Gestion des erreurs : affiche un message d'erreur si une opération non valide est effectuée.

Technologies utilisées

• React : Pour créer l'interface utilisateur.
• CSS : Pour styliser l'application et garantir un design réactif.

Structure du projet

Le projet est structuré comme suit :

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

Composants clés

• Calculator.jsx : contient la logique principale de la calculatrice, y compris la gestion de l'état et la gestion des événements.
• App.jsx : enveloppe le composant Calculatrice et gère la présentation globale de l'application.
• App.css : contient le style du composant Calculatrice.

Explication du code

Composant de calculatrice

Le composant Calculator gère l'état de l'entrée et du résultat de la calculatrice à l'aide du hook useState. Il comprend une fonction handleClick qui gère les clics sur les boutons et met à jour l'état en conséquence. La fonction calculateResult évalue l'entrée à l'aide de la fonction eval de JavaScript et met à jour le résultat.

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;

Composant d'application

Le composant App restitue le composant Calculatrice et ajoute un en-tête et un pied de page à l'application.

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;

Style CSS

Les styles CSS garantissent que la calculatrice est centrée sur l'écran et a un look moderne. Les boutons sont conçus pour un design épuré et réactif.

* {
  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 et utilisation

Pour démarrer ce projet, clonez le référentiel et installez les dépendances :

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

Cela démarrera le serveur de développement et ouvrira la calculatrice dans votre navigateur Web par défaut.

Démo en direct

Vous pouvez consulter la démo en direct de la calculatrice ici.

Conclusion

Ce projet de calculatrice simple est un excellent moyen de mettre en pratique vos compétences React et de comprendre comment gérer l'état et gérer les entrées utilisateur dans une application React. N'hésitez pas à étendre ce projet en ajoutant des fonctionnalités plus avancées comme un mode calculatrice scientifique ou en intégrant des fonctionnalités supplémentaires.

Crédits

• Inspiration : Ce projet a été inspiré par diverses calculatrices simples disponibles en ligne.

Auteur

Abhishek Gurjar est un développeur Web passionné qui se concentre sur la création d'applications Web intuitives et réactives. Suivez son parcours et explorez d'autres projets sur GitHub.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!