◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。
使用 React 构建 BMI 计算器
ID:15468 / 打印
使用 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 { if (weight && height) { calculatebmi(weight, height); } }; return ( <div classname="bmi-container"> <div classname="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></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-react.git
- 安装依赖项： 导航到项目目录并运行：
npm install
- 启动应用程序： 通过运行以下命令启动应用程序：
npm start
应用程序应在默认 web 浏览器中打开，地址为 http://localhost:3000。
现场演示
在此处查看 bmi 计算器的现场演示。
结论
在这个项目中，我们使用 react 构建了一个简单而有效的 bmi 计算器。该项目演示了如何使用 react 状态管理、条件渲染和基本样式来创建用户友好的界面。无论您是刚刚开始使用 react 还是想练习自己的技能，这个项目都是获得实践经验的好方法。
制作人员
- 标志：本项目使用的bmi标志来自unsplash。
- 灵感：该项目的灵感来自于在线提供的各种 bmi 计算器。
作者
abhishek gurjar 是一位充满热情的 web 开发人员，专注于构建直观且响应灵敏的 web 应用程序。跟随他的旅程并在 github 上探索更多项目。
