Entities, Unicode, comments and whitespace
Lines a and b are identical: entities in JSX text, Unicode escapes inside a JavaScript string. Line c joined two text lines with one space. Line d lost the space between Total: and the price because a line break between text and a tag is removed; line e puts it back with {" "}.
To turn HTML into JSX you rename attributes (class, for, camelCase, SVG names like stroke-width), close every tag, swap <!-- --> comments for {/* */}, and know how JSX treats entities, Unicode and whitespace; data-* and aria-* attributes stay as they are.
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.
Convert to JSX: <!-- card --><div class="card" data-id="3" tabindex="0"><img src="p.png" alt=""><p>Price: ₹99</p></div>.
Convert this icon to a component: <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="9" stroke-width="2" stroke="black" fill="none"/></svg>, hidden from screen readers.
Explain it without notes
List the changes needed to turn an HTML snippet into JSX.
How do comments work in JSX?
Explain JSX's whitespace rules with an example.
Why do data-* and aria-* keep their dashes when everything else is camelCase?
Preview
Console
Nothing logged yet.Expected console output
a: "Tea & biscuits — ₹40 © 2024"
b: "Tea & biscuits — ₹40 © 2024"
c: "Thank you for visiting"
d: "Total:₹40"
e: "Total: ₹40"