使用 React 构建 BMI 计算器

亲爱的编程学习爱好者，如果你点开了这篇文章，说明你对《使用 React 构建 BMI 计算器》很感兴趣。本篇文章就来给大家详细解析一下，主要介绍一下，希望所有认真读完的童鞋们，都有实质性的提高。

使用 react 构建 bmi 计算器

介绍

体重指数（bmi）是一种广泛使用的指标，用于确定一个人在给定身高下是否拥有健康体重。在本博客中，我们将逐步介绍如何使用 react 创建一个简单但实​​用的 bmi 计算器。这个项目允许用户输入他们的体重和身高来计算他们的bmi，并根据结果提供分类。

项目概况

bmi 计算器是一个使用 react 构建的响应式 web 应用程序。它将用户的体重（以千克为单位）和身高（以厘米为单位）作为输入并计算 bmi。然后，应用程序会显示计算出的 bmi 以及相应的体重分类，例如体重不足、正常体重、超重或肥胖。

特征

• 用户友好的界面：简单干净的用户界面，易于导航。
• 实时计算：用户可以通过输入体重和身高立即计算出自己的bmi。
• 响应式设计：计算器响应灵敏，在不同的屏幕尺寸上运行良好。
• 体重分类：根据计算出的bmi，告知用户自己的体重状况。

使用的技术

• react： 用于构建用户界面的核心库。
• javascript： 用于处理 bmi 计算的逻辑。
• css： 设置应用程序样式并确保响应式设计。

项目结构

以下是该项目结构的简要概述：

src/
│
├── assets/
│   └── images/
│       └── bmi logo.png
├── components/
│   └── bmicalculator.jsx
├── app.jsx
├── app.css
└── index.css

代码说明

1.bmi计算器组件

该组件是应用程序的核心。它处理用户输入、执行 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>
          &lt;input
            type=&quot;number&quot;
            value={weight}
            onchange={(e) =&gt; setweight(e.target.value)}
          />
        </div>
        <div classname="height-input">
          <h4>height (cm)</h4>
          &lt;input
            type=&quot;number&quot;
            value={height}
            onchange={(e) =&gt; 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-react.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 计算器》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！