The same card written with JSX and with function calls
Two identical cards: the JSX version and the hand-written createElement version produce the same kind of object. JSX is only a nicer way to write the calls.
JSX is a syntax extension for JavaScript that lets you write HTML-like tags inside your code; a compiler turns every tag into an ordinary function call that returns a plain object describing the UI.
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.
Rewrite <p className="note">Saved!</p> using createElement.
Write a function label(text) that returns a <strong> element containing the text, and use it twice inside a <p>.
Explain it without notes
What is JSX, and what happens to it before the browser runs your code?
Why can you store JSX in a variable or return it from a function?
Why does React put markup and logic in the same file?
Is JSX required to use React? What is the alternative?
Preview
Console
Nothing logged yet.Expected console output
JSX gives a div with class card
Calls give a div with class card