ReactJS |Kalkulator Reaksi Mudah

Artikel ini akan membimbing anda melalui proses mencipta kalkulator yang berfungsi dan mesra pengguna menggunakan ReactJS. Kami akan merangkumi konsep penting seperti pengurusan negeri, pengendalian acara dan struktur komponen untuk menjadikan projek ini boleh diakses oleh pemula dan pengalaman pembelajaran yang hebat untuk mereka yang biasa dengan React.

Persediaan Projek

Buat Apl React Baharu:
Mulakan dengan menyediakan projek React baharu menggunakan Apl Buat React:

npx create-react-app react-calculator
cd react-calculator
kandungan_salinan
Gunakan kod dengan berhati-hati.
Bash

Mulakan Pelayan Pembangunan:
Jalankan arahan berikut untuk melancarkan pelayan pembangunan anda:

npm mula
kandungan_salinan
Gunakan kod dengan berhati-hati.
Bash

Apl React anda boleh diakses di http://localhost:3000/.

Struktur Komponen

Kami akan menstrukturkan kalkulator kami menggunakan satu komponen: App.js. Komponen ini akan mengendalikan keseluruhan logik dan pemaparan kalkulator.

App.js (Komponen Utama)

import React, { useState } daripada "react";
import "./App.css";

fungsi Apl() {
const [displayValue, setDisplayValue] = useState("0");
const [operator, setOperator] = useState(null);
const [firstOperand, setFirstOperand] = useState(null);

// Fungsi untuk mengendalikan klik butang nombor
const handleNumberClick = (nombor) => {
if (displayValue === "0") {
setDisplayValue(number.toString());
} lain {
setDisplayValue(displayValue + number.toString());
}
};

// Fungsi untuk mengendalikan klik butang operator
const handleOperatorClick = (op) => {
setOperator(op);
setFirstOperand(parseFloat(displayValue));
setDisplayValue("0");
};

// Fungsi untuk mengendalikan sama dengan klik butang
const handleEqualsClick = () => {
const secondOperand = parseFloat(displayValue);
biar terhasil;

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

};

// Fungsi untuk mengendalikan klik butang jelas
const handleClearClick = () => {
setDisplayValue("0");
setOperator(null);
setFirstOperand(null);
};

kembali (

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