Read the React version and check a semver range
version is exported by both react and react-dom, which is handy in an error report or a debug panel. This simplified satisfies ignores pre-release tags (19.3.0-canary-...); real tools use the semver package. Notice ^18.3.1 doesn't allow 19: a caret never crosses a major.
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 react-dom: 19.2.8 same: true
major 19 minor 2 patch 8
^19.0.0 allows 19.2.8: true
^18.3.1 allows 19.2.8: false
~19.2.0 allows 19.2.8: true
~19.1.0 allows 19.2.8: false
^19.3.0 allows 19.2.8: false