What's in this React? Added and removed APIs
Old tutorials that call ReactDOM.render(<App />, el) now fail with TypeError: ... is not a function, because the export no longer exists. Libraries sometimes use checks like these to support two React majors at once; apps should simply require one version.
React follows semantic versioning: patches fix bugs, minors add features, majors remove deprecated APIs after warning about them; you upgrade safely by reading the upgrade guide, moving to the last minor of your current major first, fixing every deprecation warning, running the official codemods, and keeping react, react-dom and @types/react in step.
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.
Rewrite this React 18 component for React 19 without changing what it shows: function Avatar({ size }) { return <img width={size} height={size} />; } Avatar.defaultProps = { size: 48 };
Write a small check that throws a clear error at startup if react and react-dom versions differ.
Explain it without notes
Explain semantic versioning and the caret and tilde ranges in package.json.
What are React's release channels and which should an app use?
Describe a safe process to upgrade a large app from React 18 to React 19.
Why must react and react-dom match, and what happens if two copies of React are installed?
Preview
Console
Nothing logged yet.Expected console output
React 19.2.8
yes react: useId
yes react: useActionState
yes react: useOptimistic
yes react: use
yes react: Activity
yes react: useEffectEvent
yes react-dom: useFormStatus
no react-dom: render
no react-dom: hydrate
no react-dom: findDOMNode
no react: createFactory