Inline SVG icons with aria-* and data-*
You write strokeWidth and strokeLinejoin; React writes stroke-width and stroke-linejoin. aria-label and data-stars are written dashed and arrive unchanged. The stars are aria-hidden, and the wrapper's label tells a screen reader the rating in words.
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
3 out of 5 stars | 3
2 round
0 0 24 24