HTML to JSX: The 2026 Guide to Clean React Components

Key Takeaways

• JSX looks like HTML but follows JavaScript rules.
• Replace class → className and for → htmlFor.
• Inline styles are objects with camelCased properties.
• All elements must be closed. Self-closing matters.
• SVG needs attribute renaming (fillRule, strokeWidth, clipPath, xlinkHref).
• Use tools to convert and sanitize large HTML/SVG safely.

Transitioning from traditional HTML to React's JSX can be tedious. But once you know the rules, it’s fast and safe. This guide gives you the essential transformations, clear examples, and practical checks to avoid bugs.

Why JSX is Not HTML

JSX is a syntax extension for JavaScript. It compiles to function calls. That’s why HTML rules don’t always apply.

Key implications:

• Attributes may change names to avoid JS keyword conflicts.
• Expressions live inside curly braces: { ... }.
• Everything must be valid JavaScript.

Further reading:

• React docs: 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

Quick Conversion Checklist

• class → className
• for (on <label>) → htmlFor
• style string → JS object with camelCased properties
• All tags closed (including <img />, <br />, <input />)
• Boolean attributes: disabled, checked, required, etc. As props (disabled, checked). Use {condition} for dynamics.
• tabindex → tabIndex; readonly → readOnly; maxlength → maxLength; spellcheck → spellCheck; srcset → srcSet; crossorigin → crossOrigin; autofocus → autoFocus; enctype → encType
• data-* and aria-* stay kebab-case (exactly as in HTML)
• SVG: stroke-width → strokeWidth; fill-rule → fillRule; clip-path → clipPath; xlink:href → xlinkHref
• Multiple root elements? Wrap in a fragment: <>...</>
• HTML comments → JSX comments: {/* ... */}

Core Attribute Mapping: HTML → JSX (Before/After)

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>

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: For TypeScript, annotate as React.CSSProperties.

Self-Closing Enforcement

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

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

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>

Events and Expressions

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

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

Data and ARIA Attributes

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

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

Common Attribute Renames

• tabindex → tabIndex
• readonly → readOnly
• maxlength → maxLength
• minlength → minLength
• contenteditable → contentEditable
• spellcheck → spellCheck
• srcset → srcSet
• crossorigin → crossOrigin
• enctype → encType
• autocomplete → autoComplete

CSS in JS: The Style Object

In HTML, style is a string. In JSX, it’s a JavaScript object. Keys are camelCased.

Examples:

• background-color → backgroundColor
• margin-top → marginTop
• -webkit-line-clamp → WebkitLineClamp

Numbers without units default to px in many cases. Use strings for custom units.

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

SVGs: The Tricky Part (Use a Converter for Big Files)

SVGs often break when pasted raw into JSX because of attribute names.

Typical fixes:

• fill-rule → fillRule
• stroke-width → strokeWidth
• clip-path → clipPath
• viewBox stays viewBox
• xlink:href → xlinkHref (SVG2 deprecates xlink, but React supports xlinkHref)

<!-- 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 complex, 1,000-line SVGs, manual conversion is error-prone. Use a professional sanitizer/converter to avoid runtime crashes and invalid props.

• Try ZenixTools for automated HTML/SVG → JSX conversion and sanitization: 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

Edge Cases and Gotchas

• Multiple roots: Wrap siblings with <>...</>.
• Dangerous HTML: Use dangerouslySetInnerHTML with sanitized input only.
• Comments: {/* comment */} instead of <!-- comment -->.
• Entities: HTML entities (e.g.,  ) render fine, but prefer {'\u00A0'} for clarity in code.
• Form controls: defaultValue and defaultChecked set initial state; value and checked make inputs controlled.
• Namespaces: xml:space becomes xmlSpace in JSX.

<div dangerouslySetInnerHTML={{ __html: sanitize(userHtml) }} />

Linting, Types, and Testing

• ESLint: Add eslint-plugin-react and rules like react/jsx-no-duplicate-props, react/no-unknown-property.
• TypeScript: Use React types (e.g., React.CSSProperties, React.SVGProps<SVGSVGElement>).
• Tests: Snapshot-test converted components to catch stray attribute issues.

Useful docs:

• React linting: https://react.dev/learn/editor-setup#linting
• TS + React types: https://react.dev/learn/typescript

Automation: Don’t Convert by Hand Every Time

Manual conversion is fine for a few elements. Not for big chunks.

• Batch-convert HTML to JSX.
• Auto-fix attribute casing.
• Sanitize SVG safely.

Start with tools at ZenixTools: https://www.zenixtools.com

On-Page SEO and Sharing Checklist for JSX Pages

• Title tag: Clear, keyword-aligned, under ~60 chars.
• Meta description: Compelling, under ~160 chars.
• Canonical URL: Point to the preferred version.
• Open Graph/Twitter: Set og:title, og:description, og:image; twitter:card.
• Internal links: Link to related React/JSX content and tools (e.g., ZenixTools).
• Schema: Add Article/BlogPosting JSON-LD.

Copy-Paste Structured Data (JSON-LD)

{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "HTML to JSX: The 2026 Guide to Clean React Components",
  "description": "A practical guide to converting HTML and SVG to JSX with examples, checklists, and tools.",
  "author": {
    "@type": "Person",
    "name": "Senior SEO Content Strategist"
  },
  "datePublished": "2026-01-01",
  "mainEntityOfPage": {
    "@type": "WebPage",
    "@id": "https://www.your-domain.com/html-to-jsx-guide"
  }
}

Conclusion

Clean JSX leads to faster builds and fewer bugs. Learn the core rules, automate the rest, and lint your code. For large HTML/SVG, use a converter and sanitizer to save hours and prevent runtime errors.

Need a fast, safe conversion? Start here: https://www.zenixtools.com