Creating Application Structure for Temperature Converter

A new React app comes with a standard directory structure. Our project’s structure (after using Create React App) looks like this by default:

temp-converter/

├── node_modules/            # Contains all Node.js dependencies (auto-generated)

├── public/

│   ├── index.html           # HTML template for the app (contains a root <div>)

│   └── ...                  # Other public assets (favicon, manifest, etc.)

├── src/

│   ├── App.js               # Main React component (will be our container)

│   ├── App.css              # CSS for App component

│   ├── index.js             # Application entry point, renders App into DOM

│   ├── index.css            # Global CSS (if any)

│   └── ...                  # Other files (logo, test files, etc.)

├── package.json             # Project metadata and dependencies

├── package-lock.json        # Auto-generated lockfile for dependencies

└── README.md                # Basic README with Create React App info

For our project, we will add a new component file and possibly modify or remove some default files:

• We will create a new component inside the src folder, e.g. TemperatureConverter.js (or .jsx), which will house the conversion logic and UI.
• We will update App.js to use our new component and serve as a simple container with a title.
• We will use App.css (or create a new CSS file) to add styling for our components (like making the layout centered and styling the input, dropdowns, etc.).
• The public/index.html usually doesn’t need changes for this project, but we could change the <title> tag there to "Temperature Converter" so the browser tab reflects our app name.
• We won’t need the default logo.svg or App.test.js for this simple project, so you can remove or ignore those to keep the project uncluttered.

After creating a new folder called component, the src folder structure will look like this:

src/

├── components/

│   └── TemperatureConverter.js   # Our TemperatureConverter component

├── App.js

├── App.css

├── index.js

└── index.css

Now, let's proceed to implement the functionality step by step.