React replaces what was in the root
React owns only the inside of its root. The content that was there is replaced; the rest of the page is untouched. A loading message inside the root is a common trick for slow connections.
A React app starts by creating a root on one HTML element with createRoot and rendering your top component into it; a real project gets the same setup from Vite in one command.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write the full main.jsx for an app whose root element has the id app and whose top component is Shop from ./Shop.jsx, using StrictMode.
Make a live component that shows a heading My first React app and a paragraph with today's lesson number, 0.4.
Explain it without notes
What do react and react-dom each do?
Walk through the code that starts a React app, line by line.
What does StrictMode do, when, and why would you want it?
What do npm run dev and npm run build do in a Vite project?
Preview
Console
Nothing logged yet.Expected console output
Before render: Loading… (this text is replaced by React)
After render: This paragraph comes from React.