ホームページ > 記事 > ウェブフロントエンド > React を使用して簡単な計算機を構築する
このチュートリアルでは、React を使用してシンプルな関数電卓を構築する手順を説明します。このプロジェクトは、React を実際に使用して、React アプリケーションで状態を管理し、イベントを処理する方法を理解したいと考えている初心者にとって、優れた出発点です。
この電卓プロジェクトを使用すると、ユーザーは加算、減算、乗算、除算などの基本的な算術演算を実行できます。この電卓は洗練されたユーザーフレンドリーなインターフェイスを備えており、入力のクリア、最後に入力した値の削除、結果の計算など、重要な操作をすべて処理します。
プロジェクトは次のように構成されています:
├── public ├── src │ ├── components │ │ └── Calculator.jsx │ ├── App.jsx │ ├── App.css │ ├── index.js │ └── index.css ├── package.json └── README.md
電卓コンポーネントは、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 スタイルにより、電卓が画面の中央に配置され、モダンな外観になります。ボタンは、クリーンで応答性の高いデザインに合わせてスタイル設定されています。
* { 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 サイトの他の関連記事を参照してください。