React を使用して BMI 計算ツールを構築する-jsチュートリアル-php.cn

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

PHPz

リリース： 2024-09-03 22:39:32

オリジナル

328 人が閲覧しました

Building a BMI Calculator with React

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

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

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

ログイン後にコピー

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

   npm install

ログイン後にコピー

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

   npm start

ログイン後にコピー

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

ライブデモ

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

結論

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