Membina Kalkulator Mudah dengan React

pengenalan

Dalam tutorial ini, kami akan membimbing anda membina kalkulator yang mudah dan berfungsi menggunakan React. Projek ini merupakan titik permulaan yang sangat baik untuk pemula yang ingin mendapatkan pengalaman langsung dengan React dan memahami cara mengurus keadaan dan mengendalikan acara dalam aplikasi React.

Gambaran Keseluruhan Projek

Projek kalkulator ini membolehkan pengguna melakukan operasi asas aritmetik seperti penambahan, penolakan, pendaraban dan pembahagian. Kalkulator mempunyai antara muka yang kemas dan mesra pengguna dan ia mengendalikan semua operasi penting, termasuk mengosongkan input, memadamkan nilai yang terakhir dimasukkan dan mengira hasilnya.

Ciri-ciri

• Operasi Asas Aritmetik: Menyokong penambahan, penolakan, pendaraban dan pembahagian.
• Kefungsian Kosongkan (AC) dan Padam (DEL): Kosongkan semua input dengan mudah atau padamkan digit yang terakhir dimasukkan.
• Reka Bentuk Responsif: Berfungsi dengan baik pada pelbagai saiz skrin, dengan reka letak butang yang intuitif.
• Pengendalian Ralat: Memaparkan mesej ralat jika operasi tidak sah dilakukan.

Teknologi yang Digunakan

• React: Untuk membina antara muka pengguna.
• CSS: Untuk menggayakan aplikasi dan memastikan reka bentuk responsif.

Struktur Projek

Projek ini berstruktur seperti berikut:

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

Komponen Utama

• Kalkulator.jsx: Mengandungi logik utama untuk kalkulator, termasuk pengurusan keadaan dan pengendalian acara.
• App.jsx: Membungkus komponen Kalkulator dan mengendalikan keseluruhan reka letak aplikasi.
• App.css: Mengandungi penggayaan untuk komponen Kalkulator.

Penerangan Kod

Komponen Kalkulator

Komponen Kalkulator menguruskan keadaan input dan hasil kalkulator menggunakan cangkuk useState. Ia termasuk fungsi handleClick yang mengendalikan klik butang dan mengemas kini keadaan sewajarnya. Fungsi calculateResult menilai input menggunakan fungsi eval JavaScript dan mengemas kini hasilnya.

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;

Komponen Apl

Komponen Apl memaparkan komponen Kalkulator dan menambah pengepala dan pengaki pada aplikasi.

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;

Penggayaan CSS

Gaya CSS memastikan kalkulator dipusatkan pada skrin dan mempunyai rupa moden. Butang digayakan untuk reka bentuk yang bersih dan responsif.

* {
  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;
}

Pemasangan dan Penggunaan

Untuk memulakan projek ini, klon repositori dan pasang kebergantungan:

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

Ini akan memulakan pelayan pembangunan dan membuka kalkulator dalam pelayar web lalai anda.

Demo Langsung

Anda boleh menyemak demo langsung kalkulator di sini.

Kesimpulan

Projek kalkulator mudah ini ialah cara terbaik untuk mempraktikkan kemahiran React anda dan memahami cara mengurus keadaan dan mengendalikan input pengguna dalam aplikasi React. Jangan ragu untuk mengembangkan projek ini dengan menambahkan ciri yang lebih canggih seperti mod kalkulator saintifik atau menyepadukan fungsi tambahan.

Kredit

• Inspirasi: Projek ini diilhamkan oleh pelbagai kalkulator Mudah yang tersedia dalam talian.

Pengarang

Abhishek Gurjar ialah pembangun web yang bersemangat dengan tumpuan untuk membina aplikasi web yang intuitif dan responsif. Ikuti perjalanannya dan teroka lebih banyak projek di GitHub.

Atas ialah kandungan terperinci Membina Kalkulator Mudah dengan React. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!