Comprehensive Guide & Reference: Converting HTML to React JSX
JSX is a syntax extension for JavaScript that looks like HTML but enforces strict XML grammar and JavaScript attribute semantics. This guide covers all core transformation rules.
1. Key HTML vs. JSX Syntax Differences
| HTML Attribute | JSX Equivalent | Rationale |
|---|---|---|
| class="card" | className="card" | class is a reserved keyword in JavaScript. |
| for="email" | htmlFor="email" | for is a reserved looping keyword in JavaScript. |
| <img src="..."> | <img src="..." /> | JSX enforces XML self-closing tags for all void elements. |
| style="color: red;" | style={{ color: 'red' }} | Inline styles must be passed as JavaScript objects. |
| tabindex="0" | tabIndex={0} | All DOM properties follow camelCase in React. |
2. SVG Attribute Transformations
SVGs copied from Figma or Illustrator often contain hyphenated XML attributes that will trigger console warnings in React. JSX requires camelCased equivalents:
stroke-width→strokeWidthstroke-linecap→strokeLinecapfill-rule→fillRuleclip-path→clipPath
3. Migrating Legacy Templates to Next.js / React
When migrating Bootstrap, Tailwind HTML templates, or Webflow exports to Next.js, always ensure image tags include accessible alt attributes and wrap repeating list elements with stable unique key props.