Look inside real element objects
An HTML element's type is a string; a component's type is the function itself. key is stored next to props, not inside them. _owner and _store are development-only fields. Creating card didn't call Card: React calls it later, when rendering.
The compiler turns each JSX tag into a jsx() call (or createElement in the classic runtime) that returns a frozen plain object, a React element with type, props and key, marked with a $$typeof Symbol so that JSON data can never pass itself off as an element.
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 6 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Without using any tags, build and render <p className="note">Saved <b>3</b> files</p> with jsx/jsxs from react/jsx-runtime.
Log the type, key and props of <Avatar key="u1" size={40} />, where function Avatar() { return null; }. Predict the output first.
Explain it without notes
What does the compiler turn <li key="a" className="x">Hi</li> into with the automatic runtime, and with the classic runtime?
What fields does a React element have, and what does each mean?
Why are React elements immutable, and how do you show something different?
What is $$typeof, and what attack does it prevent?
What is the difference between jsx and jsxs?
Preview
Console
Nothing logged yet.Expected console output
object
h1 | greeting
{ className: 'title', children: 'Hello' }
[Function: Card] | null
{ title: 'Hi there' }
[ '$$typeof', 'type', 'key', 'props', '_owner', '_store' ]
Symbol(react.transitional.element)