React BMI Calculator App Tutorial | Beginner React JS Project Using Hooks and Functional Component

Published: 08 May 2024
on channel: DevWebApp
324
7

#reactjs Learn how to make a simple calculator in React with Vite, JSX, Functional Components, and hook `useState` by watching the video.

Check your Body Mass Index at https://dzmitryur.github.io/bmi-calc/.
Link to the source code: https://github.com/DzmitryUr/bmi-calc

⌚️Timestamps:
0:07 BMI Formula and Ranges for interpretation
0:49 Design of the Body Mass Index Project
1:45 Creating a new React Project using Vite
3:56 Creating Functional Component in React App
4:55 JSX for BMI with inputs and button elements
7:25 Writing CSS for the BmiCalc Component
10:45 `useState` hook to store inputs' values
13:13 `onClick` event handler for button and function to calculate BMI
16:55 Conditional rendering in JSX
18:20 Building JSX message to show the BMI result
20:19 Final testing of the BMI Calculator App

#reactjsforbeginners #reactjstutorialforbeginners #js #javascriptprojects #frontend #webdevelopment #javascriptbeginner #html5 #css3 #javascriptcode #javascriptcoding


On this page of the site you can watch the video online React BMI Calculator App Tutorial | Beginner React JS Project Using Hooks and Functional Component with a duration of hours minute second in good quality, which was uploaded by the user DevWebApp 08 May 2024, share the link with friends and acquaintances, this video has already been watched 324 times on youtube and it was liked by 7 viewers. Enjoy your viewing!