JSX is a value: store it, return it, choose it
greeting is an object, so it can sit in a variable and be dropped into the page later with {greeting}. Change hour to 18 to see the other greeting.
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
greeting is an object