HTML to JSX: The 2026 Guide to Clean React Components

Category: Dev Tools
Last updated: 2026-01-01
Estimated reading time: 18–25 minutes

A practical, zero-fluff playbook for converting any HTML or SVG into robust, accessible React components — without runtime bugs, hydration issues, or accessibility regressions.

At a Glance (Key Takeaways)

• JSX looks like HTML, but it is JavaScript syntax compiled to function calls (jsx/jsxs). Treat it like code, not a template.
• Attribute renames you must remember: class → className, for → htmlFor, tabindex → tabIndex, readonly → readOnly, srcset → srcSet, maxlength → maxLength, crossorigin → crossOrigin, allowfullscreen → allowFullScreen.
• Inline styles are JS objects, not strings: use camelCase keys and numbers where possible.
• All elements must be explicitly closed: img, br, input, source, meta, link, track → self-close with />.
• SVG attributes must be camelCased in JSX: stroke-width → strokeWidth, fill-rule → fillRule, xlink:href → xlinkHref, clip-path → clipPath.
• Keep data-* and aria-* exactly as-is (kebab-case) in JSX.
• For large or designer-exported HTML/SVG, automate conversion and sanitize to prevent subtle bugs and XSS.
• Lint, type-check, and snapshot-test your converted components to catch regressions early.

Pro tip: For big or messy HTML/SVG, automate the conversion and sanitization to save hours and reduce risk. Try ZenixTools for safe HTML/SVG → JSX conversion: https://www.zenixtools.com

Table of Contents

• Why JSX Is Not HTML (and Why It Matters)
• The 60‑Second Conversion Checklist
• HTML → JSX: Before/After Essentials
• The Complete Attribute Map (Cheat Sheet)
• Styles in JSX: Practical Patterns
• SVGs in JSX: What Breaks and How to Fix It
• Accessibility First: Don’t Ship Broken Semantics
• Common Pitfalls and How to Avoid Them
• Security and Sanitization: Handling Raw HTML Safely
• Server, Client, and Framework Nuance (Next.js, Remix, Vite)
• TypeScript, Linting, and Formatting Setup
• Testing Your Converted Components
• Tooling for Real-World Workflows
• Migration Playbooks (Emails, Legacy Templates, jQuery-era UIs)
• Performance Notes for Converted Markup
• FAQ: Fast Answers to Common Questions
• Final Checklist: Ship-Ready JSX
• References and Further Reading
• About the Author

Why JSX Is Not HTML (and Why It Matters)

JSX is a JavaScript syntax extension that compiles to function calls (for example, React's jsx/jsxs). Because it is code, not a template language:

• Attributes map to DOM properties and JS identifiers, not raw HTML attributes. This requires renaming like class → className and for → htmlFor (on label).
• Dynamic values go inside curly braces: {expression}.
• Everything must be valid JavaScript: properly closed tags, quoted strings, comments as {/* ... */}.
• The JSX transform is strict: typos and casing errors surface at compile time (and TypeScript can catch even more).

Helpful references:

• React docs, Writing Markup with JSX: https://react.dev/learn/writing-markup-with-jsx
• React DOM attributes: https://react.dev/reference/react-dom/components/common#all-supported-html-attributes
• MDN JSX intro: https://developer.mozilla.org/en-US/docs/Web/JavaScript/JavaScript_extensions/JSX

The 60‑Second Conversion Checklist

Use this quick pass before you dig into details:

• class → className
• for (on label) → htmlFor
• Inline styles: style='...' → style={{ ... }} with camelCase keys
• Close all tags: img, br, input, source, meta, link, track → <... />
• Boolean attributes (checked, disabled, required): keep as props; use {condition} for dynamics
• Common renames: tabindex → tabIndex, readonly → readOnly, maxlength → maxLength, minlength → minLength, contenteditable → contentEditable, spellcheck → spellCheck, srcset → srcSet, crossorigin → crossOrigin, enctype → encType, autocomplete → autoComplete, accept-charset → acceptCharset, http-equiv → httpEquiv, frameborder → frameBorder, allowfullscreen → allowFullScreen
• data-* and aria-* stay kebab-case (unchanged)
• SVG: stroke-width → strokeWidth, fill-rule → fillRule, clip-path → clipPath, stroke-linecap → strokeLinecap, stroke-linejoin → strokeLinejoin, stop-color → stopColor, xlink:href → xlinkHref
• Multiple roots? Wrap with a fragment: <> ... </>
• Comments: <!-- ... --> → {/* ... */}

HTML → JSX: Before/After Essentials

1) Classes and Labels

<!-- Before (HTML) -->
<div class='card primary'>Hello</div>
<label for='email'>Email</label>

// After (JSX)
<div className='card primary'>Hello</div>
<label htmlFor='email'>Email</label>

2) Styles: String → Object

<!-- Before (HTML) -->
<div style='background-color: red; margin-top: 8px; opacity: 0.9'></div>

// After (JSX)
<div
  style={{
    backgroundColor: 'red',
    marginTop: 8,
    opacity: 0.9,
  }}
/>

Tip: In TypeScript, annotate as React.CSSProperties for autocomplete and safety.

3) Self-Closing Enforcement

<!-- Before (HTML) -->
<img src='/logo.png' alt='Logo'>
<br>

// After (JSX)
<img src='/logo.png' alt='Logo' />
<br />

4) Boolean Attributes

<!-- Before (HTML) -->
<input type='checkbox' checked>
<button disabled>Save</button>

// After (JSX)
<input type='checkbox' checked />
<button disabled>Save</button>

// Dynamic
<input type='checkbox' checked={isSelected} />
<button disabled={isSaving}>Save</button>

5) Events and Expressions

<!-- Before (HTML) -->
<button onclick='doThing()'>Run</button>

// After (JSX)
<button onClick={doThing}>Run</button>

6) Data and ARIA Attributes

• Keep as-is (kebab-case) in JSX.
• Do not camelCase these.

<div data-user-id='42' aria-live='polite' />

7) Lists Need Keys

// Good
<ul>
  {items.map(item => (
    <li key={item.id}>{item.label}</li>
  ))}
</ul>

Use stable, unique keys (not array index for re-orderable lists).

8) Comments

<!-- Before (HTML) -->
<!-- todo: replace icon -->

// After (JSX)
{/* todo: replace icon */}

The Complete Attribute Map (Cheat Sheet)

Use this as a handy reference for the most common renames. If an attribute isn’t listed and React doesn’t recognize it, check the React DOM attributes link above.

HTML → JSX mapping highlights:

• class → className
• for (only on label) → htmlFor
• tabindex → tabIndex
• readonly → readOnly
• maxlength → maxLength
• minlength → minLength
• contenteditable → contentEditable
• spellcheck → spellCheck
• srcset → srcSet
• crossorigin → crossOrigin
• enctype → encType
• autocomplete → autoComplete
• accept-charset → acceptCharset
• http-equiv → httpEquiv
• frameborder → frameBorder
• allowfullscreen → allowFullScreen (iframe)
• referrerpolicy → referrerPolicy
• novalidate → noValidate (form)
• autoplay → autoPlay (media)
• playsinline → playsInline (video)
• srcdoc → srcDoc (iframe)
• inputmode → inputMode
• autocapitalize → autoCapitalize (check browser support)
• aria-* → unchanged (kebab-case)

SVG mapping highlights:

• fill-rule → fillRule
• stroke-width → strokeWidth
• stroke-linecap → strokeLinecap
• stroke-linejoin → strokeLinejoin
• clip-path → clipPath
• stop-color → stopColor
• xlink:href → xlinkHref
• viewBox → viewBox (already camelCase)
• preserveAspectRatio → preserveAspectRatio (already camelCase)

Note: Unknown attributes generally pass through to the DOM in modern React, but TypeScript may flag them. Prefer the React-recognized camelCase form for best DX and typings.

Styles in JSX: Practical Patterns

In HTML, style is a serialized string. In JSX it’s a plain JavaScript object:

• Keys are camelCased: background-color → backgroundColor.
• Units: numbers default to px for many properties; otherwise use strings like '1.5rem', '2ch', '50%'.
• Vendor prefixes: capitalize the prefix: -webkit-line-clamp → WebkitLineClamp.

Examples:

<div style={{ width: 320, lineHeight: '1.5', WebkitLineClamp: 3 }} />

TypeScript:

const box: React.CSSProperties = {
  backgroundColor: '#0ea5e9',
  marginTop: 12,
  transform: 'translateY(2px)',
}

When to use inline styles:

• Dynamic values computed at runtime (e.g., width from data).
• Very small one-offs (avoid creating ad-hoc CSS classes).

When not to use inline styles:

• Theming, hover/focus states, media queries, or large styling sets. Prefer CSS Modules, Tailwind, or CSS-in-JS libraries.

SVGs in JSX: What Breaks and How to Fix It

Raw SVG pasted into JSX often breaks due to attribute casing and XML-specific features. Typical fixes:

• Kebab-case attributes → camelCase (see mapping above).
• Numeric attributes can be numbers: strokeWidth={2} instead of '2'.
• xlink:href becomes xlinkHref (note: SVG2 deprecates xlink; many assets still use it).

Example:

<!-- Before (SVG in HTML) -->
<svg viewBox='0 0 24 24' fill-rule='evenodd'>
  <path stroke-width='2' clip-path='url(#clip)' xlink:href='#shape' />
</svg>

// After (JSX)
<svg viewBox='0 0 24 24' fillRule='evenodd'>
  <path strokeWidth={2} clipPath='url(#clip)' xlinkHref='#shape' />
</svg>

For long, designer-exported SVGs (hundreds or thousands of lines), manual conversion is error-prone. A professional sanitizer/converter should:

• Rename attributes (camelCase) to React’s expectations.
• Remove unsafe inline scripts and event handlers.
• Preserve IDs/defs and optionally namespace them to avoid collisions across components.
• Optionally optimize paths, precision, and viewBox via SVGO-like passes.

Recommended:

• ZenixTools automated HTML/SVG → JSX conversion: https://www.zenixtools.com
• React SVG reference: https://react.dev/reference/react-dom/components/svg
• MDN SVG attributes: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute

Accessibility First: Don’t Ship Broken Semantics

JSX makes semantic, accessible markup easier, but a naive copy-paste from HTML can regress a11y. Prioritize:

• Use the correct elements: button for actions, a for navigation, label for inputs, ul/ol/li for lists.
• Keep aria-* as-is; ensure attributes reflect current state (e.g., aria-expanded, aria-selected).
• Associate labels correctly via htmlFor (on label) and matching input id.
• Alt text: images must have meaningful alt. Decorative images can use alt=''.
• Focus management: don’t overuse tabIndex. Only add positive tab indexes for special cases (generally avoid).
• Keyboard interactions: ensure interactive elements respond to keyboard (Enter/Space) and have visible focus.
• Live regions: aria-live='polite' for non-critical updates; assertive sparingly.
• Headings: maintain a logical outline (h1 → h2 → h3...).

Audit tools:

• eslint-plugin-jsx-a11y for static checks.
• Axe DevTools or Lighthouse for runtime audits.

Common Pitfalls and How to Avoid Them

1. class vs className

• Always use className. class compiles but can lead to warnings or unexpected behavior with TypeScript/linters.

2. for vs htmlFor

• Only use htmlFor on label. It must match the id of the related input.

3. Boolean attributes

• In JSX, the presence of the prop enables it; use {condition} for dynamics: <button disabled={isSaving} />.

4. Self-closing tags

• Void elements must self-close in JSX: <input />, <img />, <br />, <hr />, <meta />, <link />, <source />, <track />.

5. Selected options in <select>

• Preferred: control via value (or defaultValue) on the select. Example:

<select value={role} onChange={e => setRole(e.target.value)}>
  <option value='user'>User</option>
  <option value='admin'>Admin</option>
</select>

• For an uncontrolled default: <select defaultValue='user'>.

6. HTML comments

• Use {/* comment */} in JSX.

7. Entities and special characters

• You can write   in JSX just like HTML. For literal braces, use {'{'} ... {'}'}.

8. Event attributes

• onclick → onClick, onchange → onChange, etc. Use functions, not strings: <button onClick={handleClick} />.

9. Dangerous HTML

• Don’t inject raw HTML strings. If you must, use dangerouslySetInnerHTML={{ __html: safeHtml }} with a trusted sanitizer.

10. Inline scripts/styles in pasted HTML

• <script> tags in JSX won’t execute as you expect when injected dynamically. Move logic into React effects.

Security and Sanitization: Handling Raw HTML Safely

Sometimes you must render CMS or legacy HTML. Keep the bar high on safety:

• Sanitize server-side and/or client-side (e.g., DOMPurify) before rendering.
• Render with:

<div dangerouslySetInnerHTML={{ __html: sanitizedHtml }} />

• Never interpolate untrusted strings directly into attribute props (e.g., href, src) without validation.
• For external links, use rel='noopener noreferrer' with target='_blank'.
• Prefer strict Content Security Policy (CSP) and avoid inline event handlers entirely.

Server, Client, and Framework Nuance (Next.js, Remix, Vite)

• Next.js and Remix both use JSX for server-rendered components. Attribute mapping rules remain the same.
• Server Components (where supported):
  • You can author JSX on the server; however, event handlers and browser-only APIs are not available there. Move interactivity to client components.
  • DOM attributes still follow JSX naming conventions.
• Hydration and mismatches:
  • Ensure generated IDs, timestamps, and random values are stable across server and client or are gated to client-only effects.
  • Avoid including Date.now() or Math.random() directly in render output; compute them in useEffect or provide deterministic values.

TypeScript, Linting, and Formatting Setup

Strong static checks catch most conversion mistakes early.

• TypeScript tsconfig basics:

// tsconfig snippet (JSX transform)
{
  "compilerOptions": {
    "jsx": "react-jsx",        // modern JSX transform
    "strict": true,
    "noUncheckedIndexedAccess": true
  }
}

• ESLint essentials:

  • eslint-plugin-react for React/JSX rules.
  • eslint-plugin-react-hooks for hooks rules.
  • eslint-plugin-jsx-a11y for accessibility.
  • Enable react/jsx-uses-react only if you are on the classic transform; otherwise rely on the automatic runtime.

• Prettier:

  • Enforce consistent quoting, trailing commas, and JSX formatting.

• Type definitions:

  • Install @types/react and @types/react-dom for TypeScript autocomplete of props and CSSProperties.

Testing Your Converted Components

• Unit tests (Jest/Vitest + React Testing Library):
  • Assert rendered roles and text, not implementation details.
  • Verify aria attributes and accessible names.
• Snapshot tests:
  • Great for large static blobs (marketing pages, long SVGs). Review snapshots carefully on each change.
• Visual regression tests (Chromatic, Loki, or Playwright):
  • Catch CSS/SVG rendering drifts after conversion and refactors.

Example test:

import { render, screen } from '@testing-library/react'
import { Card } from './Card'

test('renders title and description', () => {
  render(<Card title='Hello' description='World' />)
  expect(screen.getByRole('heading', { name: 'Hello' })).toBeInTheDocument()
  expect(screen.getByText('World')).toBeInTheDocument()
})

Tooling for Real-World Workflows

When the HTML/SVG isn’t tiny, automation pays for itself.

• ZenixTools (HTML/SVG → JSX converter):

  • Batch-convert large fragments, fix casing, strip unsafe script attributes, preserve IDs, and optimize SVGs.
  • URL: https://www.zenixtools.com

• SVGO:

  • Optimize SVG shape data and reduce file size before converting to JSX.

• SVGR:

  • Transform SVG files into React components with props like title, className, and role.

• Editor integrations:

  • Snippets and Emmet with JSX aware settings to avoid class insertion.

Migration Playbooks (Emails, Legacy Templates, jQuery-era UIs)

• Marketing pages or CMS exports:

  • Run through a converter.
  • Remove presentation-only wrappers; replace with semantic components.
  • Inline styles → CSS Modules or design system primitives.

• Old jQuery templates:

  • Replace onclick/onchange strings with real event handlers.
  • Convert imperative DOM updates to state-driven rendering.

• Email templates in React (MJML/React-email):

  • JSX still applies, but target email-safe markup. Test across clients.

Performance Notes for Converted Markup

• Avoid inline object/array literals that change identity on every render for props like style or options. Memoize when necessary.
• Large SVGs: prefer importing as components and memoizing or inlining as static markup.
• Images: use lazy-loading techniques where appropriate; in frameworks like Next.js, prefer the framework image component.
• Lists: provide stable keys to minimize DOM churn.

Practical Mini-Recipes

Convert a Hero Section with Background Image

<!-- Before -->
<section class='hero' style='background-image: url(/hero.jpg); height: 420px'>
  <h1>Welcome</h1>
  <p>Build faster with React</p>
</section>

// After
<section
  className='hero'
  style={{ backgroundImage: 'url(/hero.jpg)', height: 420 }}
>
  <h1>Welcome</h1>
  <p>Build faster with React</p>
</section>

Convert a Form with Labels and Validation State

<!-- Before -->
<form novalidate>
  <label for='email'>Email</label>
  <input id='email' type='email' required>
  <button disabled>Submit</button>
</form>

// After (uncontrolled example)
<form noValidate onSubmit={handleSubmit}>
  <label htmlFor='email'>Email</label>
  <input id='email' type='email' required aria-invalid={!isValid} />
  <button disabled={isSubmitting}>Submit</button>
</form>

Convert a Complex SVG Icon

<!-- Before -->
<svg width='24' height='24' stroke-width='1.5' stroke-linejoin='round'>
  <path d='M2 12h20' />
</svg>

// After
<svg width={24} height={24} strokeWidth={1.5} strokeLinejoin='round'>
  <path d='M2 12h20' />
</svg>

FAQ: Fast Answers to Common Questions

• Can I keep class in JSX?

  • Use className. Some tooling may tolerate class, but it’s not the recommended API and may trip TypeScript or linters.

• Do I need curly braces for strings?

  • No: <div title='Hello' /> is fine. Use {} for expressions: <div title={greeting} />.

• How do I conditionally add attributes?

  • Use short-circuits or ternaries: <input disabled={isSaving || undefined} /> or {condition && <span>....

• How do I add multiple classes dynamically?

  • Template strings or helper libs: className={[base, isActive && 'active'].filter(Boolean).join(' ')}.

• Why doesn’t my script tag inside JSX run?

  • Scripts added via JSX or dangerouslySetInnerHTML won’t execute like parser-inserted scripts. Use effects or dynamic module loading.

• How do I preselect an option?

  • Use value/defaultValue on select, not selected on option.

• Can I keep data-* and aria-* lowercase?

  • Yes. Keep them kebab-case exactly as in HTML.

• What about ref attributes?

Final Checklist: Ship-Ready JSX

Use this final pass before merging:

• Attributes: className, htmlFor, camelCased props everywhere except data-*/aria-*.
• Styles: object with camelCase keys; numbers where applicable.
• Tags: all self-closing void elements are closed.
• Events: onClick, onChange, etc., use functions (no strings).
• Accessibility: labels, roles, alt text, keyboard interactions verified.
• Testing: unit or snapshot coverage added for converted components.
• Linting/TS: repo passes ESLint and TypeScript checks.
• Security: no untrusted HTML unless sanitized; rel='noopener noreferrer' for external links.

References and Further Reading

• React docs: Writing Markup with JSX — https://react.dev/learn/writing-markup-with-jsx
• React DOM components and attributes — https://react.dev/reference/react-dom/components/common#all-supported-html-attributes
• React SVG elements — https://react.dev/reference/react-dom/components/svg
• MDN: JSX — https://developer.mozilla.org/en-US/docs/Web/JavaScript/JavaScript_extensions/JSX
• MDN: SVG attributes — https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute
• SVGO — https://github.com/svg/svgo
• SVGR — https://react-svgr.com/
• ESLint plugins: react, react-hooks, jsx-a11y

About the Author

I’m a senior front-end engineer and technical writer who has led React migrations for design systems, marketing sites, and high-traffic SaaS apps. I specialize in safe HTML/SVG → JSX conversions, accessibility-first audits, and setting up linting and testing workflows that prevent regressions at scale.

---

Appendix: Quick Attribute Reference (copy-paste)

HTML → JSX quick map
- class → className
- for → htmlFor (label only)
- tabindex → tabIndex
- readonly → readOnly
- maxlength → maxLength
- minlength → minLength
- contenteditable → contentEditable
- spellcheck → spellCheck
- srcset → srcSet
- crossorigin → crossOrigin
- enctype → encType
- autocomplete → autoComplete
- accept-charset → acceptCharset
- http-equiv → httpEquiv
- frameborder → frameBorder
- allowfullscreen → allowFullScreen (iframe)
- referrerpolicy → referrerPolicy
- novalidate → noValidate (form)
- autoplay → autoPlay (media)
- playsinline → playsInline (video)
- srcdoc → srcDoc (iframe)
- inputmode → inputMode
- autocapitalize → autoCapitalize
- aria-* → unchanged (kebab-case)
- data-* → unchanged (kebab-case)

SVG
- fill-rule → fillRule
- stroke-width → strokeWidth
- stroke-linecap → strokeLinecap
- stroke-linejoin → strokeLinejoin
- clip-path → clipPath
- stop-color → stopColor
- xlink:href → xlinkHref