What StrictMode does in development
In development, StrictMode calls your component twice to catch code that changes things while rendering (like renders here). A production build calls it once. You'll learn why this helps in Topic 2.6.
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
App rendered
App rendered
render count: 2