JSX, jsx() and createElement build the same element
All three produce type: "li", key: "tea" and the same props. With jsx() the key is the third argument; with createElement it goes in the props object and React moves it out. The page is built without any tags at all.
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
JSX -> li tea {"className":"item","children":"Tea"}
jsx() -> li tea {"className":"item","children":"Tea"}
createElement -> li tea {"className":"item","children":"Tea"}