React を使用して BMI 計算ツールを構築する

React を使用した BMI 計算ツールの構築

導入

Body Mass Index (BMI) は、特定の身長に対して健康的な体重であるかどうかを判断するために広く使用されている指標です。このブログでは、React を使用して、シンプルでありながら機能的な BMI 計算ツールを作成する手順を説明します。このプロジェクトでは、ユーザーが自分の体重と身長を入力して BMI を計算し、その結果に基づいて分類を提供します。

プロジェクト概要

BMI 計算機は、React で構築された応答性の高い Web アプリケーションです。ユーザーの体重 (キログラム) と身長 (センチメートル) を入力として受け取り、BMI を計算します。次に、アプリは計算された BMI と、低体重、標準体重、過体重、肥満などの対応する体重分類を表示します。

特徴

• ユーザーフレンドリーなインターフェース: 操作が簡単な、シンプルでクリーンな UI。
• リアルタイム計算: ユーザーは、体重と身長を入力することで BMI を瞬時に計算できます。
• レスポンシブ デザイン: 電卓はレスポンシブで、さまざまな画面サイズでも適切に動作します。
• 体重分類: 計算された BMI に基づいて、ユーザーは自分の体重ステータスについて通知されます。

使用されている技術

• React: ユーザー インターフェイスを構築するためのコア ライブラリ。
• JavaScript: BMI 計算のロジックを処理します。
• CSS: アプリケーションのスタイルを設定し、レスポンシブなデザインを確保します。

プロジェクトの構造

プロジェクトの構造の概要を次に示します:

src/
│
├── assets/
│   └── images/
│       └── BMI Logo.png
├── components/
│   └── BmiCalculator.jsx
├── App.jsx
├── App.css
└── index.css

コードの説明

1.BmiCalculatorコンポーネント

このコンポーネントはアプリケーションの中心です。ユーザー入力を処理し、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;

2. アプリコンポーネント

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;

3. アプリのスタイル設定 (App.css)

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 計算ツールを実行するには、次の手順に従います。

1. リポジトリのクローンを作成します:

   git clone https://github.com/abhishekgurjar-in/Bmi_Calculator.git

1. 依存関係をインストールします: プロジェクト ディレクトリに移動し、次を実行します。

   npm install

1. アプリケーションを開始します: 次のコマンドを実行してアプリを起動します。

   npm start

アプリケーションはデフォルトの Web ブラウザ (http://localhost:3000) で開きます。

ライブデモ

ここで BMI 計算機のライブデモをチェックしてください。

結論

このプロジェクトでは、React を使用してシンプルかつ効果的な BMI 計算ツールを構築しました。このプロジェクトでは、React の状態管理、条件付きレンダリング、および基本的なスタイルを使用してユーザーフレンドリーなインターフェイスを作成する方法を示します。 React を始めたばかりの場合でも、スキルを練習したいと考えている場合でも、このプロジェクトは実践的な経験を積むのに最適な方法です。

クレジット

• ロゴ: このプロジェクトで使用されている BMI ロゴは Unsplash から提供されています。
• インスピレーション: このプロジェクトは、オンラインで入手できるさまざまな BMI 計算ツールからインスピレーションを受けました。

著者

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

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