ReactJS | Calculatrice de réaction simple

Cet article vous guidera tout au long du processus de création d'une calculatrice fonctionnelle et conviviale à l'aide de ReactJS. Nous aborderons les concepts essentiels tels que la gestion des états, la gestion des événements et la structure des composants pour rendre ce projet accessible aux débutants et une excellente expérience d'apprentissage pour ceux qui sont familiers avec React.

Configuration du projet

Créez une nouvelle application React :
Commencez par configurer un nouveau projet React à l'aide de Create React App :

npx create-react-app réagir-calculateur
cd réagir-calculateur
content_copy
Utilisez le code avec prudence.
Frapper

Démarrez le serveur de développement :
Exécutez la commande suivante pour lancer votre serveur de développement :

démarrage npm
content_copy
Utilisez le code avec prudence.
Frapper

Votre application React sera accessible sur http://localhost:3000/.

Structure des composants

Nous allons structurer notre calculateur à l'aide d'un seul composant : App.js. Ce composant gérera l'ensemble de la logique et du rendu de la calculatrice.

App.js (composant principal)

importer React, { useState } depuis "react" ;
importer "./App.css";

fonction App() {
const [displayValue, setDisplayValue] = useState("0");
const [opérateur, setOperator] = useState(null);
const [firstOperand, setFirstOperand] = useState(null);

// Fonction pour gérer les clics sur les boutons numériques
const handleNumberClick = (numéro) => {
if (displayValue === "0") {
setDisplayValue(number.toString());
} autre {
setDisplayValue(displayValue + number.toString());
>
};

// Fonction permettant de gérer les clics sur les boutons de l'opérateur
const handleOperatorClick = (op) => {
setOperator(op);
setFirstOperand(parseFloat(displayValue));
setDisplayValue("0");
};

// Fonction pour gérer le clic sur le bouton égal
const handleEqualsClick = () => {
const secondOperand = parseFloat(displayValue);
laissez le résultat ;

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);

};

// Fonction permettant de gérer le clic sur le bouton d'effacement
const handleClearClick = () => {
setDisplayValue("0");
setOperator(null);
setFirstOperand(null);
};

retour (

{/* Afficher la valeur actuelle */}
{valeuraffichage}

  {/* 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>

);
>

exporter l'application par défaut ;
content_copy
Utilisez le code avec prudence.
JavaScript

Explication

Gestion de l'État :
Nous utilisons des hooks useState pour gérer l’état de la calculatrice. displayValue contient la valeur actuelle affichée, l'opérateur stocke l'opération sélectionnée et firstOperand enregistre le premier nombre saisi.

Gestion des événements :
Des fonctions telles que handleNumberClick, handleOperatorClick, handleEqualsClick et handleClearClick gèrent les interactions de l'utilisateur avec les boutons.

Composition des composants :
Le composant App est responsable à la fois de la logique et du rendu de la calculatrice, démontrant comment les composants peuvent combiner fonctionnalité et présentation.

Ajout de style (App.css)

.calculatrice {
affichage : flex ;
flex-direction : colonne ;
largeur : 300 px ;
bordure : 1px solide #ccc;
remplissage : 20 px ;
rayon de bordure : 5 px ;
>

.affichage {
hauteur : 50px ;
couleur d'arrière-plan : #eee;
taille de police : 24 px ;
aligner le texte : à droite ;
remplissage : 10 px ;
rayon de bordure : 5 px ;
marge inférieure : 10 px ;
>

.boutons {
affichage : grille ;
grille-modèle-colonnes : répéter(4, 1fr);
écart de grille : 10 px ;
>

bouton {
remplissage : 10 px ;
bordure : aucune ;
rayon de bordure : 5 px ;
couleur d'arrière-plan : #f0f0f0;
taille de police : 18 px ;
curseur : pointeur ;
>

bouton : survoler {
couleur d'arrière-plan : #ddd;
>
content_copy
Utilisez le code avec prudence.
Css

Conclusion

En suivant ces étapes, vous avez créé une calculatrice entièrement fonctionnelle en utilisant React ! Ce projet constitue une excellente base pour une exploration plus approfondie des capacités de React. Vous pouvez désormais ajouter des fonctionnalités telles que des opérations avancées, des fonctions de mémoire ou même un thème visuel. Expérimentez et amusez-vous !

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!