React を使用して簡単な計算機を構築する

導入

このチュートリアルでは、React を使用してシンプルな関数電卓を構築する手順を説明します。このプロジェクトは、React を実際に使用して、React アプリケーションで状態を管理し、イベントを処理する方法を理解したいと考えている初心者にとって、優れた出発点です。

プロジェクト概要

この電卓プロジェクトを使用すると、ユーザーは加算、減算、乗算、除算などの基本的な算術演算を実行できます。この電卓は洗練されたユーザーフレンドリーなインターフェイスを備えており、入力のクリア、最後に入力した値の削除、結果の計算など、重要な操作をすべて処理します。

特徴

• 基本的な算術演算: 加算、減算、乗算、除算をサポートします。
• クリア (AC) および削除 (DEL) 機能: すべての入力を簡単にクリアしたり、最後に入力した桁を削除したりできます。
• レスポンシブ デザイン: 直感的なボタン レイアウトにより、さまざまな画面サイズで適切に動作します。
• エラー処理: 無効な操作が実行された場合にエラー メッセージを表示します。

使用されている技術

• React: ユーザー インターフェイスの構築用。
• CSS: アプリケーションのスタイルを設定し、レスポンシブなデザインを保証します。

プロジェクトの構造

プロジェクトは次のように構成されています:

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

主要コンポーネント

• Calculator.jsx: 状態管理やイベント処理など、電卓のメイン ロジックが含まれています。
• App.jsx: 電卓コンポーネントをラップし、アプリケーション全体のレイアウトを処理します。
• App.css: 電卓コンポーネントのスタイルが含まれています。

コードの説明

電卓コンポーネント

電卓コンポーネントは、useState フックを使用して電卓の入力と結果の状態を管理します。これには、ボタンのクリックを処理し、それに応じて状態を更新する handleClick 関数が含まれています。 CalculateResult 関数は、JavaScript の eval 関数を使用して入力を評価し、結果を更新します。

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;

アプリコンポーネント

App コンポーネントは、電卓コンポーネントをレンダリングし、アプリケーションにヘッダーとフッターを追加します。

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;

CSS スタイル

CSS スタイルにより、電卓が画面の中央に配置され、モダンな外観になります。ボタンは、クリーンで応答性の高いデザインに合わせてスタイル設定されています。

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

インストールと使用方法

このプロジェクトを開始するには、リポジトリのクローンを作成し、依存関係をインストールします。

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

これにより、開発サーバーが起動し、デフォルトの Web ブラウザで計算機が開きます。

ライブデモ

ここで電卓のライブデモをチェックできます。

結論

このシンプルな電卓プロジェクトは、React スキルを練習し、React アプリケーションで状態を管理しユーザー入力を処理する方法を理解するのに最適な方法です。関数電卓モードなどの高度な機能を追加したり、追加機能を統合したりして、このプロジェクトを自由に拡張してください。

クレジット

• インスピレーション: このプロジェクトは、オンラインで入手できるさまざまなシンプルな電卓からインスピレーションを受けました。

著者

Abhishek Gurjar は、直感的で応答性の高い Web アプリケーションの構築に重点を置いている情熱的な Web 開発者です。彼の旅をたどり、GitHub でさらに多くのプロジェクトを探索してください。

以上がReact を使用して簡単な計算機を構築するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。