ReactJS |シンプルな React 計算機

この記事では、ReactJS を使用して機能的で使いやすい計算機を作成するプロセスについて説明します。このプロジェクトを初心者にとってアクセスしやすく、React に精通している人にとって優れた学習体験となるように、状態管理、イベント処理、コンポーネント構造などの重要な概念を取り上げます。

プロジェクトのセットアップ

新しい React アプリを作成します:
まず、Create React App を使用して新しい React プロジェクトをセットアップします:

npx create-react-app 反応計算機
cd 反応計算機
コンテンツコピー
コードは注意して使用してください。
バッシュ

開発サーバーを起動します:
次のコマンドを実行して開発サーバーを起動します:

npm 開始
コンテンツコピー
コードは注意して使用してください。
バッシュ

React アプリは http://localhost:3000/ からアクセスできます。

コンポーネントの構造

単一コンポーネント App.js を使用して電卓を構築します。このコンポーネントは、電卓全体のロジックとレンダリングを処理します。

App.js (メインコンポーネント)

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

関数 App() {
const [displayValue, setDisplayValue] = useState("0");
const [演算子, setOperator] = useState(null);
const [firstOperand, setFirstOperand] = useState(null);

// 数字ボタンのクリックを処理する関数
const handleNumberClick = (数値) => {
if (displayValue === "0") {
setDisplayValue(number.toString());
} else {
setDisplayValue(displayValue +number.toString());
}
};

// オペレーターボタンのクリックを処理する関数
const handleOperatorClick = (op) => {
setOperator(op);
setFirstOperand(parseFloat(displayValue));
setDisplayValue("0");
};

// 等しいボタンのクリックを処理する関数
const handleEqualsClick = () => {
const SecondOperand = parseFloat(displayValue);
結果をみましょう;

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

};

// クリアボタンのクリックを処理する関数
const handleClearClick = () => {
setDisplayValue("0");
setOperator(null);
setFirstOperand(null);
};

戻る (

{/* 現在の値を表示します */}
{表示値}

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

);
}

デフォルトのアプリをエクスポート;
コンテンツコピー
コードは注意して使用してください。
JavaScript

説明

状態管理:
useState フックを使用して電卓の状態を管理します。 displayValue は表示されている現在値を保持し、operator は選択された操作を保存し、firstOperand は入力された最初の数値を保存します。

イベント処理:
handleNumberClick、handleOperatorClick、handleEqualsClick、handleClearClick などの関数は、ボタンとのユーザー操作を処理します。

コンポーネント構成:
App コンポーネントは、計算機のロジックとレンダリングの両方を担当し、コンポーネントが機能とプレゼンテーションをどのように組み合わせることができるかを示します。

スタイルの追加 (App.css)

.calculator {
表示: フレックス;
フレックス方向: 列;
幅: 300px;
境界線: 1px 実線 #ccc;
パディング: 20px;
境界半径: 5px;
}

.display {
高さ: 50px;
背景色: #eee;
フォントサイズ: 24px;
text-align: right;
パディング: 10px;
境界半径: 5px;
margin-bottom: 10px;
}

.buttons {
表示: グリッド;
グリッド テンプレート列:repeat(4, 1fr);
グリッドギャップ: 10px;
}

ボタン {
パディング: 10px;
境界線: なし;
境界半径: 5px;
背景色: #f0f0f0;
フォントサイズ: 18px;
カーソル: ポインタ;
}

ボタン:ホバー {
背景色: #ddd;
}
コンテンツコピー
コードは注意して使用してください。
CSS

結論

これらの手順に従うことで、React を使用して完全に機能する電卓が作成されました。このプロジェクトは、React の機能をさらに探求するための優れた基盤として機能します。高度な操作、メモリー機能、さらにはビジュアルテーマなどの機能を追加できるようになりました。試して楽しんでください!

以上がReactJS |シンプルな React 計算機の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。