Watch the tree render
The first render logs parent first, then children in order. Click the button and watch the console: the state lives in App, so App and its children render again.
A React app is a tree of components; each one turns data into a description of the screen, state changes make React re-render, and React then updates only the parts of the real page that changed.
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.
Draw (as a list) the component tree for a weather app with a search box, today's weather card and a 5-day forecast of day cards.
In the render watcher, add a Footer component that logs Footer rendered and renders <p>Made with React</p>. Place it after Counter. What is logged on first load?
Explain it without notes
What is a component, and how does React tell a component from an HTML tag in JSX?
Describe one-way data flow. How does a child tell its parent that something happened?
What are the three steps React goes through when state changes?
What is the virtual DOM, and what is it for?
Preview
Console
Nothing logged yet.Expected console output
App rendered
Header rendered
Counter rendered with count = 0