Part 1: Update 'react-dom/client' to named export to prevent Vite HMR crashes

[travis-vandame]

Context

First of all, thank you for maintaining this incredible course! The materials are phenomenal.

While working through Part 1 (Introduction to React), I noticed that the boilerplate code and text examples use a default import syntax to initialize the application:

import ReactDOM from 'react-dom/client'

The Problem

Because React 18 removed official default exports from the react-dom/client entry point, this syntax relies entirely on a bundler's dynamic "synthetic default" compilation fallback.

While this works during initial page mounts, it introduces stability issues under stricter, modern Vite/React Refresh baselines. Specifically, during active file saves (such as removing <StrictMode> or updating local modules), the synthetic fallback occasionally evaluates ReactDOM as undefined within the hot-reloading context. This triggers a runtime TypeError in the browser console, drops the HMR websocket bridge completely, and forces a manual terminal restart.

The Solution (Backward Compatible)

Updating the examples to the official React 18 standard named export syntax eliminates the reliance on synthetic defaults, future-proofs the codebase, and maintains 100% backward compatibility with older configurations:

import { createRoot } from 'react-dom/client'
import App from './App'

createRoot(document.getElementById('root')).render(<App />)

Next Steps

Would you like me to open a quick Pull Request (PR) to update the markdown files for this section? I would be more than happy to contribute the fix to save future students from running into this HMR blocker!

[travis-vandame]

Just a quick update I forgot to mention my OS is Fedora 44.