/**
 * ============================================================
 * MAIN ENTRY POINT
 * ============================================================
 * 
 * This is the root file that initializes the React application.
 * It renders the main App component into the DOM element with id "root".
 * 
 * Flow:
 * 1. Import React and ReactDOM libraries
 * 2. Import the main App component
 * 3. Import global CSS styles
 * 4. Create React root on the DOM element
 * 5. Render App component in StrictMode (development mode checking)
 */

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import "./styles.css";

/**
 * CREATE ROOT - Initialize React app on the "#root" element
 * 
 * LOGIC FLOW:
 * - document.getElementById("root") finds the root div in index.html
 * - ReactDOM.createRoot() creates a React root at that location
 * - .render() renders the App component into that root
 * - React.StrictMode wraps App to enable additional development checks:
 *   • Identifies potential issues in the app
 *   • Warns about deprecated lifecycle methods
 *   • Detects components with missing keys in lists
 *   • Checks for unsafe lifecycles
 *   • Warns about legacy context API usage
 */
ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
);