Recap of the Project and Further Learning

Now that the app is built and live, let’s wrap it up. This final module summarizes what you’ve learned, shares the live link, includes a project screenshot, and tests your understanding with a few MCQs.

Learning Outcome

In this project, we successfully built a BMI Calculator using React and deployed it on Netlify. By doing so, you should have learned several important things:

• React Fundamentals: You practiced setting up a React project, creating functional components, and using JSX to construct the UI. You also used React Hooks (useState) to manage component state for form inputs and output, giving you insight into how React handles dynamic data and re-renders components on state changes.
• Event Handling and Logic: You implemented event handlers (onChange for inputs, onClick for the button) to respond to user interactions. Writing the BMI calculation logic and updating state helped reinforce how to perform computations and update the UI based on user input.
• Component Structure & Styling: You learned to organize code by splitting UI and logic into components (App and BmiCalculator) and how to apply CSS to style those components. You also saw how to conditionally render parts of the UI (displaying results only after calculation).
• Building and Deployment: Finally, you gained exposure to the build and deploy process. You learned how to generate a production build of a React app and how to deploy that build to Netlify, resulting in a live web application. You also set up a GitHub repository, which is a valuable skill for version control and collaboration.

By understanding these concepts and going through the implementation, you’re now better equipped to create other small React applications on your own and deploy them for the world to see.

Live Demo Link & Output Screenshot

Live Demo: BMI Calculator Netlify

Final output of the BMI Calculator React app (hosted on Netlify). Users can input their weight and height, click Calculate BMI, and the app will display the calculated BMI along with the weight status category. You can try the live application yourself here:

Multiple Choice Questions (MCQs)

Test your understanding of the project and related concepts with these questions:

1. What is React primarily used for?
   A. Building the backend of web applications.
   B. Creating styles for websites.
   C. Building interactive user interfaces for web applications.
   D. Managing databases for web apps.
   Answer: C. Building interactive user interfaces for web applications. (React is a JavaScript library focused on building UIs, especially for single-page apps.)  
2. Which React Hook did we use to manage form input and result state in this project?
   A. useEffect
   B. useState
   C. useContext
   D. useRef
   Answer: B. useState (useState lets us create and update state variables in functional components.)  
3. What is the formula for Body Mass Index (BMI)?
   A. BMI = weight (kg) * height (m)
   B. BMI = weight (kg) / height (m)
   C. BMI = weight (kg) / [height (m)]²
   D. BMI = height (cm) / weight (kg)
   Answer: C. BMI = weight (kg) / [height (m)]² (This is the standard formula used globally for calculating BMI.)  
4. In our React app, how do we trigger the BMI calculation when the user clicks the button?
   A. By using an HTML onclick attribute.
   B. By calling the calculateBMI function in the JSX directly.
   C. By using a React event handler onClick={calculateBMI} on the button.
   D. The calculation runs automatically when inputs change, without any event.
   Answer: C. By using a React event handler onClick={calculateBMI} on the button. (React uses camelCase event handlers like onClick to trigger functions.)  
5. Which deployment step is NOT necessary when using Netlify with a GitHub repo?
   A. Pushing your code to a GitHub repository.
   B. Setting up a build command and publish directory on Netlify.
   C. Manually uploading your source code files via FTP.
   D. Connecting your GitHub account to Netlify.
   Answer: C. Manually uploading your source code files via FTP. (Netlify handles deployment automatically through GitHub integration—no FTP needed.)

Further Exploration (Course)

Want to master ReactJS and build your portfolio by creating web apps like this? Check out GUVI’s IIT-M Pravartak Certified ReactJS Self-Paced Course, where you can master the art of building interactive user interfaces and web applications.

Additionally, if you want to understand how React works in a Full Stack environment, consider enrolling in GUVI’s IIM-M Pravartak Certified Full Stack Development Course, where you’ll learn React, Node.js, MongoDB, and more with hands-on projects, expert mentorship, and placement support. Perfect for beginners and professionals looking to upskill.