Rendering again doesn't rebuild the page
React kept the very same <p> element and changed only its text. Type in the box and click: your typing stays, because React never rebuilt the input.
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
Same <p> element as before: true
Its text now: Count: 1