How to Convert HTML to JSX: A Practical Guide for React Developers

Introduction

If you need to convert HTML to JSX for a React project, you’re in the right place. This guide shows you the fastest, safest path from plain HTML to clean, production-ready JSX. You’ll get rules, examples, and a repeatable process—plus a free workflow you can run in minutes.

Quick answer (Featured Snippet): To convert HTML to JSX: 1) Replace class with className and for with htmlFor. 2) Close void tags (img, input, br). 3) Convert style to a JS object. 4) Use camelCase props (tabIndex, readOnly). 5) Wrap dynamic values in {}. 6) Remove inline scripts; use onClick, onSubmit, etc. 7) For raw HTML, use dangerouslySetInnerHTML.

AI Overview: Converting HTML to JSX means adapting markup to React’s JavaScript-first syntax. Key steps include renaming attributes (class → className, for → htmlFor), closing self-closing tags, converting inline styles to objects, camelCasing attributes, and moving scripts to event handlers. Use a reliable converter for speed, then lint, test, and refactor into components. This guide covers rules, edge cases (SVG, forms, props), and pitfalls, with examples and tooling tips to ship JSX that compiles, reads well, and scales.

Key Takeaways

• HTML and JSX look similar but differ in attributes, styles, and expressions.
• Use a converter for speed, then review by hand for correctness and style.
• Watch for className, htmlFor, camelCase props, style objects, and self-closing tags.
• Inline scripts don’t run in JSX—replace them with React event handlers.
• Avoid dangerouslySetInnerHTML unless you sanitize content.
• Test components after conversion to catch missing props or event mismatches.
• Split large HTML into small, reusable React components.

Table of Contents

• What is “convert HTML to JSX”
• Why it Matters
• Benefits
• How to Convert HTML to JSX (Step-by-Step)
• Real World Examples
• Common Mistakes
• Best Practices
• Expert Tips
• Comparison Table
• Frequently Asked Questions
• External References
• Internal Link Suggestions (ZenixTools)
• Conclusion
• Call To Action

What is “convert HTML to JSX”

“Convert HTML to JSX” means taking standard HTML markup and transforming it into JSX, the syntax React uses to describe UI in JavaScript. JSX looks like HTML, but it is not a string—it compiles to JavaScript function calls (like React.createElement). That adds rules:

• Attributes may be different (class → className).
• Styles become JavaScript objects, not CSS strings.
• Many attributes become camelCase (tabindex → tabIndex).
• Expressions and variables live inside curly braces {}.

In short, you keep the structure of the HTML but adapt it to React’s rules so it compiles and runs in your app.

Why it Matters

Most teams start with existing HTML: marketing pages, prototypes, CMS themes, or UI libraries. To move into React, you must convert that HTML to JSX. Doing it well:

• Speeds up migrations from legacy codebases.
• Reduces errors that break builds.
• Makes components testable and reusable.
• Enables type safety and linting.
• Keeps styles and behaviors predictable.

Without a reliable process, you’ll chase compile errors and subtle bugs. With one, you ship faster and safer.

Benefits

• Faster onboarding: Move existing HTML into React quickly.
• Fewer syntax errors: Apply consistent, proven rules.
• Cleaner code: Style objects, camelCase, and self-closing tags improve clarity.
• Reusability: Split markup into components with props.
• Better tooling: ESLint, Prettier, TypeScript all work smoothly in JSX.
• Easier testing: Use React Testing Library and Jest on real components.

How to Convert HTML to JSX (Step-by-Step)

1) Start with a reliable converter

• Use a trusted “HTML to JSX” converter to handle the basics. This catches 80% of changes in seconds and highlights tricky areas.
• Paste your HTML, copy the JSX, then review and test in your app.

Note: Converters are fast, but they don’t know your component structure. Plan to refactor after.

2) Replace attributes that differ in JSX

• class → className
• for → htmlFor (labels)
• tabindex → tabIndex
• maxlength → maxLength
• readonly → readOnly
• onclick → onClick (and other events: change → onChange, submit → onSubmit)
• autoplay → autoPlay (media)
• srcset → srcSet (images)
• crossorigin → crossOrigin
• spellcheck → spellCheck
• allowfullscreen → allowFullScreen

Example:

<!-- HTML -->
<label for="email" class="form-label">Email</label>
<input id="email" class="form-control" maxlength="64" />

// JSX
<label htmlFor="email" className="form-label">Email</label>
<input id="email" className="form-control" maxLength={64} />

3) Close self-closing tags

Void elements must be self-closed in JSX:

• img, input, br, hr, meta, link, source, track, area, base, col, embed, param, wbr

<!-- HTML -->
<img src="/logo.png">

// JSX
<img src="/logo.png" />

4) Convert inline styles to objects

• CSS becomes a JavaScript object.
• Property names use camelCase.
• Numeric values (without units) can be numbers; others remain strings.

<!-- HTML -->
<div style="background-color: #fff; padding: 16px; line-height: 1.5"></div>

// JSX
<div style={{ backgroundColor: '#fff', padding: 16, lineHeight: 1.5 }} />

Warning: Do not overuse inline styles. Prefer CSS Modules, styled-components, or Tailwind for maintainability.

5) Wrap dynamic values in {}

• When you pass variables, numbers, booleans, or expressions, use curly braces.

// JSX
<h2>{title}</h2>
<img src={avatarUrl} alt={user.name} />
<button disabled={isLoading}>Save</button>

6) Move inline scripts to React logic

Inline JS like onclick="..." or <script> blocks won’t run inside JSX. Replace them with event handlers and hooks.

<!-- HTML -->
<button onclick="increment()">Add</button>
<script>
  function increment(){ counter++ }
</script>

// JSX
function Counter(){
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(c => c + 1)}>Add ({count})</button>;
}

7) Handle dangerouslySetInnerHTML carefully

If you need to inject raw HTML, use dangerouslySetInnerHTML with sanitized input only.

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

Warning: Never pass user-generated HTML without sanitizing. Consider DOMPurify or server-side sanitization.

8) Comments and whitespace

• HTML comments <!-- ... --> do not work. Use {/* ... */} in JSX.
• Conditionally render whitespace with {' '} if needed.

{/* This is a JSX comment */}
<p>Hello{' '}<strong>world</strong></p>

9) SVG and XML-like attributes

• SVG often uses hyphenated names in HTML. Many work as-is, but some need camelCase: strokeWidth, viewBox, clipPath, xlinkHref.

<!-- HTML -->
<svg viewBox="0 0 20 20"><path stroke-width="2" /></svg>

// JSX
<svg viewBox="0 0 20 20"><path strokeWidth={2} /></svg>

Tip: For complex SVGs, use SVGR to convert SVG files into React components.

10) Forms and controlled inputs

In React, inputs are often “controlled.” After conversion, decide if you’ll control value via state.

function EmailField(){
  const [email, setEmail] = useState('');
  return (
    <label htmlFor="email">
      Email
      <input
        id="email"
        type="email"
        value={email}
        onChange={e => setEmail(e.target.value)}
      />
    </label>
  );
}

11) Boolean attributes

Boolean props are true by presence in HTML, but JSX is explicit:

<!-- HTML -->
<input disabled>

// JSX
<input disabled /> // OK, true by presence
// or
<input disabled={true} />

12) Data attributes and ARIA

• data-* and aria-* work as-is in JSX. Keep them lowercase.

<div data-test="hero" aria-live="polite">Loading…</div>

13) Import assets the React way

• When using bundlers (Vite, Next.js, CRA), import local images or use public paths.

import logo from './logo.svg';
<img src={logo} alt="Logo" />

14) Refactor into components

After your first pass:

• Identify repeated blocks.
• Extract components.
• Introduce props and types.
• Add tests.

function Card({ title, children }){
  return (
    <section className="card">
      <h3>{title}</h3>
      <div className="content">{children}</div>
    </section>
  );
}

Real World Examples

Example 1: Marketing hero block

Original HTML:

<section class="hero">
  <h1>Build faster with Acme</h1>
  <p class="lead">Modern tools to ship in days, not months.</p>
  <a href="#signup" class="btn btn-primary">Get Started</a>
  <img src="/img/hero.png" alt="Screenshot">
</section>

Converted JSX:

export function Hero(){
  return (
    <section className="hero">
      <h1>Build faster with Acme</h1>
      <p className="lead">Modern tools to ship in days, not months.</p>
      <a href="#signup" className="btn btn-primary">Get Started</a>
      <img src="/img/hero.png" alt="Screenshot" />
    </section>
  );
}

Refactor with props:

export function Hero({ title, subtitle, ctaHref = '#signup', ctaText = 'Get Started', imageSrc }){
  return (
    <section className="hero">
      <h1>{title}</h1>
      <p className="lead">{subtitle}</p>
      <a href={ctaHref} className="btn btn-primary">{ctaText}</a>
      {imageSrc && <img src={imageSrc} alt="Screenshot" />}
    </section>
  );
}

Example 2: Bootstrap navbar snippet

Original HTML:

<nav class="navbar">
  <button class="navbar-toggler" aria-controls="nav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div id="nav" class="collapse navbar-collapse">
    <ul class="navbar-nav">
      <li class="nav-item"><a class="nav-link" href="/">Home</a></li>
    </ul>
  </div>
</nav>

Converted JSX with state:

function Navbar(){
  const [open, setOpen] = useState(false);
  return (
    <nav className="navbar">
      <button
        className="navbar-toggler"
        aria-controls="nav"
        aria-expanded={open}
        aria-label="Toggle navigation"
        onClick={() => setOpen(o => !o)}
      >
        <span className="navbar-toggler-icon" />
      </button>
      <div id="nav" className={`collapse navbar-collapse ${open ? 'show' : ''}`}>
        <ul className="navbar-nav">
          <li className="nav-item"><a className="nav-link" href="/">Home</a></li>
        </ul>
      </div>
    </nav>
  );
}

Example 3: WordPress content block with raw HTML

Original HTML may include inline styles and <script> tags. In React:

• Move scripts to hooks or handlers.
• Sanitize and inject HTML only if needed.

import DOMPurify from 'dompurify';

function PostBody({ html }){
  const safe = useMemo(() => DOMPurify.sanitize(html), [html]);
  return <div className="post-body" dangerouslySetInnerHTML={{ __html: safe }} />;
}

Common Mistakes

• Forgetting to change class → className.
• Leaving for on <label> instead of htmlFor.
• Not closing <img>, <input>, or <br />.
• Keeping inline style as a string instead of an object.
• Using HTML comments instead of {/* ... */}.
• Trusting un-sanitized HTML in dangerouslySetInnerHTML.
• Expecting inline onclick strings to work.
• Misusing key in lists or omitting keys entirely.
• Not camelCasing attributes like tabIndex or readOnly.
• Breaking accessibility by removing ARIA roles or labels.

Best Practices

• Convert with a tool, then run ESLint (eslint-plugin-react) and Prettier.
• Add TypeScript props for clarity and safety.
• Use semantic HTML elements; JSX supports them all.
• Prefer CSS Modules, Tailwind, or styled-components over huge inline style objects.
• Extract repeated blocks into small components with clear props.
• Add tests for critical interactions after conversion.
• Keep accessibility top of mind: labels, roles, aria-attributes.
• Use React Fragments (<></>) instead of empty wrapper divs.

Expert Tips

• Use SVGR for SVG icons and illustrations to get typed, reusable components.
• For large migrations, automate with codemods (jscodeshift) and track progress.
• If content comes from a CMS, sanitize on the server, not just client-side.
• In Next.js, prefer Image and Link components for performance and prefetching.
• Add prop-type checks (PropTypes or TypeScript) immediately after extracting components.
• Consider a design system: convert once, reuse everywhere.
• Profile bundle sizes; remove unused inline assets during conversion.

Comparison Table

Frequently Asked Questions

1. What does it mean to convert HTML to JSX?

• It adapts HTML markup to React’s JSX syntax, changing attributes, styles, and scripts so the code compiles and runs inside components.

2. Do I need to change every attribute?

• No. Many attributes stay the same. Focus on class → className, for → htmlFor, style, events, and camelCase props.

3. Do data-* and aria-* attributes work in JSX?

• Yes. Keep them lowercase. They’re first-class in React.

4. How do I handle inline scripts in HTML?

• Move them to React logic with event handlers, hooks, or effects. Inline JS strings won’t execute in JSX.

5. What about inline styles?

• Convert to a JavaScript object with camelCase keys. Consider moving larger styles to CSS.

6. Are self-closing tags required?

• Yes, for void elements like img, input, br, hr, meta, link.

7. How do I inject raw HTML?

• Use dangerouslySetInnerHTML with sanitized content only.

8. Can I paste Bootstrap or Tailwind HTML into JSX?

• Yes. Update attributes and self-closing tags. Tailwind classes go in className.

9. How do I convert SVG?

• Many SVG attributes work as-is; convert hyphenated names to camelCase when needed. Or use SVGR.

10. How do I manage forms?

• Use controlled or uncontrolled inputs. Controlled fields bind value and onChange to state.

11. What if I see compile errors after converting?

• Check attributes, missing self-closing tags, style objects, and comments. Run ESLint for hints.

12. Is TypeScript required?

• No, but it improves safety and API clarity after conversion.

13. Will SEO suffer when I switch to React?

• Use server-side rendering (Next.js) or static generation. Provide semantic HTML and metadata.

14. How do I test the converted JSX?

• Use React Testing Library and Jest: render, query by role/text, and fire events.

15. Can I automate a large migration?

• Yes. Use a converter for syntax and codemods for patterns. Add CI checks and incremental refactors.

External References

• React Docs (JSX): https://react.dev/learn/writing-markup-with-jsx
• MDN Web Docs (HTML elements): https://developer.mozilla.org/docs/Web/HTML/Element
• MDN Web Docs (ARIA): https://developer.mozilla.org/docs/Web/Accessibility/ARIA
• W3C HTML Standard: https://html.spec.whatwg.org/
• Google Search Central (JavaScript SEO): https://developers.google.com/search/docs/crawling-indexing/javascript
• Schema.org (Structured Data): https://schema.org/

Internal Link Suggestions (ZenixTools)

• HTML to JSX Converter
• SVG to React Component (SVGR) Online
• JSX Linter & Formatter
• Regex Tester for JSX Props
• React PropTypes & TypeScript Props Generator

Conclusion

Converting HTML to JSX is a repeatable process once you know the rules. Start with a converter to save time, then fix attributes, styles, and event handlers. Sanitize any raw HTML. Refactor into components, add types and tests, and keep accessibility in focus. With these steps, you can convert HTML to JSX confidently and ship clean React code faster.

Call To Action

Ready to move faster? Paste your markup into the ZenixTools HTML to JSX Converter, fix small issues in seconds, then refactor with our JSX Linter & Formatter. Convert HTML to JSX today and turn static snippets into scalable React components.