This is a demonstration of a traditional Multi-Page Application (MPA) to help you understand the difference between MPA and SPA (Single Page Application) approaches before diving into React.

By exploring this demo, you'll understand:

• How traditional websites work with full page reloads
• The limitations and problems of Multi-Page Applications
• Why Single Page Applications (like React apps) provide a better user experience
• The key problems that React solves

1. Using VS Code Live Server:

   • Right-click index.html
   • Select "Open with Live Server"

2. Using Python:

   python -m http.server 8000
   # Then open http://localhost:8000

3. Using Node.js:

   npx serve

Follow these steps to experience the limitations of traditional MPAs:

1. Open index.html in your browser
2. Notice the timestamp at the top of the page
3. Type something in the input field
4. Click to navigate to the About page
5. What happened?
   • You saw a white flash (full page reload)
   • The timestamp changed (new page was loaded from scratch)
   • Your input is gone (all state was lost)

1. Open DevTools (F12 or right-click → Inspect)
2. Go to the Network tab
3. Navigate between pages
4. What do you see?
   • Every navigation downloads the entire HTML, CSS, and JavaScript again
   • Multiple network requests for resources that haven't changed
   • Wasted bandwidth and slower performance

1. Navigate to the Products page
2. Click the counter button several times
3. Navigate away to another page, then come back
4. What happened?
   • The counter reset to 0
   • All JavaScript state was lost on navigation

1. Navigate to the Contact page
2. Start filling out the form with your information
3. Click any navigation link
4. What happened?
   • Your form data disappeared
   • Frustrating user experience!

Through this demo, you've experienced these MPA limitations:

• Full page reload on every navigation
• All state is lost when navigating (JavaScript, form inputs, counters, etc.)
• Visible flash/blink between pages
• Network overhead - re-downloading the same resources repeatedly
• Poor user experience - slow, clunky navigation
• Lost data - form inputs and user interactions don't persist

React and other modern frameworks create Single Page Applications (SPAs) that solve these issues:

• Partial updates - Only the content that changes gets updated
• Persistent state - Data stays in memory during navigation
• Smooth navigation - No page reloads, no white flash
• Better performance - Resources loaded once, minimal network requests
• App-like experience - Fast, responsive, modern UX
• Preserved data - Form inputs and state persist across navigation

1. Traditional MPAs reload the entire page on every navigation, which is slow and loses all state
2. React SPAs update only what changes, keeping the app fast and state intact
3. User experience matters - the difference between MPA and SPA is noticeable and significant
4. Modern web apps use SPAs for a reason - better performance, UX, and developer experience

Now that you understand the problems with traditional websites, you're ready to learn how React solves them! Continue with the Day 1 exercises to start building your first React components and experience the SPA approach firsthand.