ホームページ > 記事 > ウェブフロントエンド > React を使用して BMI 計算ツールを構築する
React を使用した BMI 計算ツールの構築
Body Mass Index (BMI) は、特定の身長に対して健康的な体重であるかどうかを判断するために広く使用されている指標です。このブログでは、React を使用して、シンプルでありながら機能的な BMI 計算ツールを作成する手順を説明します。このプロジェクトでは、ユーザーが自分の体重と身長を入力して BMI を計算し、その結果に基づいて分類を提供します。
BMI 計算機は、React で構築された応答性の高い Web アプリケーションです。ユーザーの体重 (キログラム) と身長 (センチメートル) を入力として受け取り、BMI を計算します。次に、アプリは計算された BMI と、低体重、標準体重、過体重、肥満などの対応する体重分類を表示します。
プロジェクトの構造の概要を次に示します:
src/ │ ├── assets/ │ └── images/ │ └── BMI Logo.png ├── components/ │ └── BmiCalculator.jsx ├── App.jsx ├── App.css └── index.css
このコンポーネントはアプリケーションの中心です。ユーザー入力を処理し、BMI 計算を実行し、結果を表示します。
import { useState } from "react"; import logoImg from "../assets/images/BMI Logo.png"; const BmiCalculator = () => { const [weight, setWeight] = useState(""); const [height, setHeight] = useState(""); const [bmi, setBMI] = useState(""); const [result, setResult] = useState(""); function calculateBMI(weight, height) { const heightM = height / 100; const bmiResult = weight / (heightM * heightM); setBMI(bmiResult.toFixed(2)); // Round to 2 decimal places if (bmiResult < 18.5) { setResult("Underweight"); } else if (bmiResult < 24.9) { setResult("Normal weight"); } else if (bmiResult < 29.9) { setResult("Overweight"); } else { setResult("Obesity"); } } const handleCalculateBMI = () => { if (weight && height) { calculateBMI(weight, height); } }; return ( <div className="bmi-container"> <div className="logo"> <img src={logoImg} alt="BMI Logo" /> </div> <div className="input-box"> <div className="weight-input"> <h4>Weight (kg)</h4> <input type="number" value={weight} onChange={(e) => setWeight(e.target.value)} /> </div> <div className="height-input"> <h4>Height (cm)</h4> <input type="number" value={height} onChange={(e) => setHeight(e.target.value)} /> </div> </div> <button onClick={handleCalculateBMI} className="btn"> <h2>Calculate BMI</h2> </button> <div className="output-box"> <p>Your BMI : <b>{bmi}</b></p> <p>Result : <b>{result}</b></p> </div> </div> ); }; export default BmiCalculator;
App コンポーネントはメイン コンテナとして機能し、BmiCalculator コンポーネントをラップし、ヘッダーとフッターを追加します。
import BmiCalculator from "./components/BmiCalculator"; import "./App.css"; const App = () => { return ( <div className="app"> <div className="header"> <h1>BMI Calculator</h1> </div> <BmiCalculator /> <div className="footer"> <p>Made with ❤️ by Abhishek Gurjar</p> </div> </div> ); }; export default App;
CSS により、アプリの視覚的魅力と応答性が保証されます。
* { box-sizing: border-box; } body { margin: 0; padding: 0; font-family: sans-serif; background-color: #008f7d; color: white; } .app { display: flex; flex-direction: column; align-items: center; justify-content: space-between; margin-top: 30px; } .header { text-align: center; font-size: 18px; } .bmi-container { margin: 40px; width: 500px; height: 430px; background-color: white; color: black; border-radius: 15px; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; } .logo img { width: 50px; height: 50px; margin: 15px; } .input-box { display: flex; flex-direction: column; align-items: center; } .input-box h4 { color: gray; } .weight-input, .height-input { display: flex; align-items: center; justify-content: space-between; gap: 25px; } .weight-input input, .height-input input { height: 27px; width: 180px; font-weight: 400; font-size: 14px; border-radius: 7px; } .btn { margin: 15px; width: 65%; height: 10%; display: flex; align-items: center; justify-content: center; background-color: #087fff; color: white; border: 0.5px solid black; border-radius: 7px; } .btn:hover { background-color: #2570c1; } .output-box { margin-top: 20px; width: 65%; height: 15%; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; background-color: #e2e2e2; color: black; border-radius: 7px; border: 1px solid black; } .output-box p { margin-left: 20px; line-height: 0; } .footer { text-align: center; font-size: 14px; }
ローカル マシンで BMI 計算ツールを実行するには、次の手順に従います。
git clone https://github.com/abhishekgurjar-in/Bmi_Calculator.git
npm install
npm start
アプリケーションはデフォルトの Web ブラウザ (http://localhost:3000) で開きます。
ここで BMI 計算機のライブデモをチェックしてください。
このプロジェクトでは、React を使用してシンプルかつ効果的な BMI 計算ツールを構築しました。このプロジェクトでは、React の状態管理、条件付きレンダリング、および基本的なスタイルを使用してユーザーフレンドリーなインターフェイスを作成する方法を示します。 React を始めたばかりの場合でも、スキルを練習したいと考えている場合でも、このプロジェクトは実践的な経験を積むのに最適な方法です。
Abhishek Gurjar は、直感的で応答性の高い Web アプリケーションの構築に重点を置いている情熱的な Web 開発者です。彼の旅をたどり、GitHub でさらに多くのプロジェクトを探索してください。
以上がReact を使用して BMI 計算ツールを構築するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。