Directory Structure of BMI Calculator

After running Create React App, you get a standard React project structure. Here’s a simplified view of the important files and folders we will work with in the bmi-calculator project:

bmi-calculator/

├── package.json              // Project metadata and dependencies

├── public/

│   └── index.html            // HTML template

└── src/

├── index.js              // JS entry point, renders the App

├── App.js                // Main App component

├── App.css               // Global CSS for App component

├── BmiCalculator.js      // BMI Calculator component (we will create this)

└── BmiCalculator.css     // CSS for BMI Calculator component (we will create this)

Let’s briefly understand these files:

• index.html: The single HTML page of our app (since React apps are SPA). It contains a root <div> where our React app is mounted.  
• index.js: The JavaScript entry point. It uses ReactDOM.render (or createRoot) to render the <App /> component into the HTML page’s root div. You typically won’t edit this much beyond initial setup.  
• App.js: The top-level React component. This was created by default. We’ll modify it to include our BMI Calculator UI. Think of App.js as the parent container for our app content.  
• App.css: Default styling for the App component. We can keep some basic styles or modify them.  
• BmiCalculator.js: This is our custom component where the BMI form and calculation logic will reside. We will create this file inside src/.  
• BmiCalculator.css: A corresponding CSS file for styling the BMI Calculator component. We will create this as well, to keep styles specific to the calculator (like layout, fonts, colors for the form and result text). This CSS will be imported into BmiCalculator.js.

The node_modules directory (not shown above) contains all npm packages (React and others) that were installed. We won’t touch that directly. Now that we know the structure, let’s start implementing the BMI calculator component and integrate it into our app.