У цьому блозі ми розглянемо простий калькулятор ІМТ (Індекс маси тіла), створений за допомогою React та Next.js. Цей додаток дозволяє користувачам вводити свою вагу та зріст, вибирати одиничну систему (метричну або імперську), а також обчислювати їх ІМТ разом з відповідною категорією. Давайте зануримось у код і розглянемо кожну частину докладніше.
Налаштування компонента
'use client';
На початку нашого коду є рядок use client. Ця директива є важливою в Next.js, оскільки вона вказує, що компонент, який ми визначаємо, є клієнтським компонентом. Це означає, що він може використовувати хоки React і керувати станом, що є важливим для інтерактивних додатків, таких як наш калькулятор ІМТ.
Далі ми імпортуємо хук useState з React.
import { useState } from 'react';
Хук useState є основною частиною React, що дозволяє створювати змінні стану в нашому функціональному компоненті. Далі ми визначаємо наш функціональний компонент з назвою Bmi. Цей компонент буде інкапсулювати всю логіку та елементи інтерфейсу, необхідні для нашого калькулятора ІМТ. Використовуючи функціональний компонент, ми можемо скористатися сучасними можливостями React, такими як хуки, що робить наш код чистішим та ефективнішим.
export default function Bmi() {
Управління станом
Всередині нашого компонента Bmi ми створюємо кілька змінних стану за допомогою хука useState. Ми ініціалізуємо weight значенням 70, що представляє стандартну вагу в кілограмах, та height значенням 180, що представляє стандартний зріст в сантиметрах. Ці початкові значення надають відправну точку для наших розрахунків.
Ми також створюємо змінну стану з назвою bmi, ініціалізовану значенням 0, яка буде містити обчислене значення ІМТ після того, як користувач введе свої дані.
const [weight, setWeight] = useState(70);
const [height, setHeight] = useState(180);
const [bmi, setBmi] = useState(0);
const [category, setCategory] = useState('');
const [unitSystem, setUnitSystem] = useState('metric');
Додатково, ми маємо змінну стану для категорії, яка спочатку є порожнім рядком. Ця змінна буде використовуватися для збереження категорії ІМТ (наприклад, Недовага, Нормальна вага, Надмірна вага чи Ожиріння) на основі обчисленого ІМТ. Нарешті, ми вводимо змінну стану для системи одиниць, ініціалізовану значенням 'metric'. Ця змінна дозволяє користувачам вибирати між метричною та імперською системою одиниць, що робить наше додаток більш універсальним і зручним для користувачів.
Логіка розрахунку ІМТ
Суть нашого калькулятора ІМТ полягає у функції calculateBMI. Ця функція спрацьовує, коли користувач натискає кнопку "Обчислити ІМТ".
У середині цієї функції ми спочатку обчислюємо ІМТ за допомогою формули weight / (height * height). Ця формула є дійсною для метричної системи, де вага вимірюється в кілограмах, а зріст у метрах.
const calculateBMI = () => {
let calculatedBMI = weight / (height * height);
Однак, якщо користувач вибирає імперську систему одиниць, нам потрібно перетворити вхідні значення у метричні одиниці перед виконанням обчислення. Ми досягаємо цього, перетворюючи вагу з фунтів у кілограми за допомогою коефіцієнта перерахунку (1 фунт = 0.453592 кілограма) і висоту з дюймів у метри (1 дюйм = 0.0254 метра).
Після виконання необхідних перетворень ми застосовуємо ту саму формулу ІМТ для обчислення ІМТ у метричних одиницях.
if (unitSystem === 'metric') {
calculatedBMI = weight / (height * height);
} else {
const weightKg = weight * 0.453592;
const heightM = height * 0.0254;
calculatedBMI = weightKg / (heightM * heightM);
}
Як тільки ми отримуємо обчислений ІМТ, ми оновлюємо змінну стану bmi за допомогою setBmi, округлюючи значення до одного десяткового знака для зручності читання.
setBmi(parseFloat(calculatedBMI.toFixed(1)));
Після цього ми класифікуємо значення ІМТ в одну з чотирьох категорій: Недовага, Нормальна вага, Надмірна вага або Ожиріння. Ця класифікація виконується за допомогою серії умовних операторів, які перевіряють обчислений ІМТ на відповідність стандартним пороговим значенням.
Оновлюючи змінну стану category відповідно, ми надаємо користувачам негайний зворотний зв'язок про їхній статус ІМТ.
if (calculatedBMI < 18.5) {
setCategory('Недовага');
} else if (calculatedBMI < 25) {
setCategory('Нормальна вага');
} else if (calculatedBMI < 30) {
setCategory('Надмірна вага');
} else {
setCategory('Ожиріння');
}
Відображення компонента
Оператор return нашого компонента Bmi містить JSX, який визначає інтерфейс користувача для нашого калькулятора ІМТ. Починаємо з div, який служить контейнером для нашого застосунку, стилізованим класами Tailwind CSS для забезпечення привабливого і чуйного вигляду.
Всередині цього контейнера ми включаємо заголовок (h1), який відображає назву нашого застосунку "Калькулятор ІМТ", розміщену чітко вгорі.
return (
\
\
BMI Calculator\
Далі ми створюємо випадаюче меню, яке дозволяє користувачам вибирати бажану систему одиниць. Це меню реалізоване за допомогою елемента select, який містить два варіанти: Метрична (кг/м²) і Імперська (фунти/дюйм²). value випадаючого меню прив'язане до змінної стану unitSystem, і ми використовуємо подію onChange для оновлення цього стану кожного разу, коли користувач робить вибір.
Ця динамічна поведінка гарантує, що додаток реагує на введення користувача в реальному часі.
\ setUnitSystem(e.target.value)}\>
\Метрична (кг/м²)\
\Імперська (фунти/дюйм²)\
\
Після вибору системи одиниць йдуть поля для введення ваги та зросту. Мітки для цих полів змінюються залежно від вибраної системи одиниць, що дає чітке розуміння того, що саме користувач має ввести. Поля введення є керованими компонентами, що означає, що їх значення прив'язані до відповідних змінних стану (weight та height).
Коли користувач вводить дані в ці поля, подія __onChange__ оновлює стан новими значеннями, що гарантує, що наші обчислення завжди будуть базуватися на найактуальніших введених даних.
\
{unitSystem === 'metric' ? 'Вага (кг)' : 'Вага (фунти)'}
\ setWeight(e.target.value)}
className="border p-2"
/\>
\
\
{unitSystem === 'metric' ? 'Зріст (см)' : 'Зріст (дюйми)'}
\ setHeight(e.target.value)}
className="border p-2"
/\>
\
Нарешті, ми додаємо кнопку з написом “Обчислити_**, яка виконує обчислення та оновлює відображуване значення ІМТ і категорію.
Якщо ІМТ більший за 0, ми відображаємо обчислений ІМТ та відповідну категорію для користувача.
\
Обчислити ІМТ
\
{bmi > 0 && \ )}
Ця структура не лише робить калькулятор ІМТ функціональним, але й забезпечує його зручність для користувача та привабливий вигляд.
Дотримуючись цього розбору, ви зможете побачити, як кожна частина коду сприяє загальній функціональності додатку, що дозволяє легко обчислювати та розуміти ваш ІМТ.
Тестування повного коду додатку
Ось завершений код
'use client';
import { useState } from 'react';
export default function Bmi() {
const [weight, setWeight] = useState(70);
const [height, setHeight] = useState(180);
const [bmi, setBmi] = useState(0);
const [category, setCategory] = useState('');
const [unitSystem, setUnitSystem] = useState('metric');
const calculateBMI = () => {
let calculatedBMI = weight / (height * height);
if (unitSystem === 'metric') {
calculatedBMI = weight / (height * height);
} else {
// Перетворення імперських одиниць в метричні
const weightKg = weight * 0.453592;
const heightM = height * 0.0254;
calculatedBMI = weightKg / (heightM * heightM);
}
setBmi(parseFloat(calculatedBMI.toFixed(1)));
// Категоризація ІМТ (можна налаштувати категорії за потреби)
if (calculatedBMI < 18.5) {
setCategory('Underweight');
} else if (calculatedBMI < 25) {
setCategory('Normal');
} else if (calculatedBMI < 30) {
setCategory('Overweight');
} else {
setCategory('Obese');
}
};
return (
\
BMI Calculator\
\
\
Unit System\
\
setUnitSystem(e.target.value)}
>
Metric (kg/m²)
Imperial (lb/in²)
\
\
{unitSystem === 'metric' ? 'Weight (kg)' : 'Weight (lbs)'}
\
setWeight(parseFloat(e.target.value))}
/>
\
{unitSystem === 'metric' ? 'Height (m)' : 'Height (in)'}
\
setHeight(parseFloat(e.target.value))}
/>
\
Calculate BMI
\
{bmi > 0 && (
\
Your BMI is: {bmi}
\
Category: {category}
\
)}
\
);
}
Тепер, коли все на місці, давайте запустимо додаток.
У вашому терміналі використайте наступну команду:
npm run dev
Відкрийте браузер і перейдіть за посиланням http://localhost:3000. Введіть свою дату народження та натисніть кнопку “Calculate Age” (Обчислити вік). Ви повинні побачити свій вік на екрані!
Висновки
У підсумку, ми побудували функціональний калькулятор ІМТ за допомогою React та Next.js, який дозволяє користувачам вводити свою вагу та зріст, вибирати бажану систему одиниць і обчислювати свій ІМТ разом із відповідною категорією. Розбираючи код, ми побачили, як кожна частина сприяє загальній функціональності додатка.
Від управління станом за допомогою хука useState до реалізації логіки обчислення ІМТ та рендерингу зручного інтерфейсу для користувачів — кожен аспект відіграє важливу роль у створенні інтерактивного досвіду.
Ви можете побачити калькулятор ІМТ в дії, перейшовши за посиланням нижче:
[Спробуйте калькулятор ІМТ тут!]
Цей проєкт не тільки демонструє потужність React та Next.js, але й служить практичним прикладом того, як створити простий, але ефективний веб-додаток. Незалежно від того, чи ви початківець, чи досвідчений розробник, розуміння цього коду допоможе вам покращити свої навички та застосовувати подібні концепції у майбутніх проєктах.
Перекладено з: Understanding the BMI Calculator Code in React and Next.js