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.
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.
Le projet est structuré comme suit :
├── public ├── src │ ├── components │ │ └── Calculator.jsx │ ├── App.jsx │ ├── App.css │ ├── index.js │ └── index.css ├── package.json └── README.md
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;
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;
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;
}
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.
Vous pouvez consulter la démo en direct de la calculatrice ici.
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.
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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
