Processed in your browser. Your data never leaves your device.

React JSX Cheatsheet

A quick-reference guide for JSX syntax covering attribute names, style objects, event handlers, and common patterns. Bookmark this page for fast lookups when converting HTML to React components.

HTML to JSX Converter

Convert HTML to valid JSX — transforms attributes, inline styles, comments, void elements, event handlers, and SVG attributes.

Examples

Wrap in component

HTML Input

JSX Output

<div className="container">
  <h1 className="title">Hello World</h1>
  <p className="text-gray-500">Welcome to my app.</p>
</div>

Changes Made

class→className×3

HTML → JSX Quick Reference

HTML	JSX	Why
class="..."	className="..."	"class" is a reserved word in JavaScript
for="..."	htmlFor="..."	"for" is a reserved word in JavaScript
style="color: red"	style={{ color: 'red' }}	JSX styles are objects, not strings
<!-- comment -->	{/* comment */}	JSX uses JS comment syntax
<br>	<br />	JSX requires self-closing void tags
<img ...>	<img ... />	All void elements must self-close
tabindex="0"	tabIndex="0"	JSX uses camelCase attributes
onclick="..."	onClick={() => {}}	Event handlers are camelCase functions
colspan="2"	colSpan="2"	Multi-word attributes are camelCase
stroke-width="2"	strokeWidth="2"	SVG attributes use camelCase in JSX

Attribute name mappings

The most common attribute renames: class → className, for → htmlFor, tabindex → tabIndex, readonly → readOnly, maxlength → maxLength, colspan → colSpan, rowspan → rowSpan, cellpadding → cellPadding, crossorigin → crossOrigin, autocomplete → autoComplete, autofocus → autoFocus, enctype → encType, datetime → dateTime.

SVG attribute names in JSX

SVG attributes with hyphens become camelCase: stroke-width → strokeWidth, fill-opacity → fillOpacity, stroke-linecap → strokeLinecap, clip-path → clipPath, font-size → fontSize, text-anchor → textAnchor, dominant-baseline → dominantBaseline. The viewBox attribute is already camelCase and stays unchanged.

Event handler patterns

HTML event attributes are lowercase (onclick, onchange, onsubmit). In JSX they're camelCase: onClick, onChange, onSubmit. Instead of inline JavaScript strings, pass function references: onClick={handleClick} or arrow functions: onClick={() => doSomething()}. The event object is a React SyntheticEvent.

Conditional rendering patterns

JSX doesn't support if/else in expressions. Use ternary operators: {isLoggedIn ? <Dashboard /> : <Login />}. For show/hide, use logical AND: {showModal && <Modal />}. For multiple conditions, extract the logic into a variable or function before the return statement.

Frequently Asked Questions

Do all HTML attributes change in JSX?

No — most attributes stay the same. Only about 20 common HTML attributes change names (class, for, tabindex, etc.) plus SVG attributes with hyphens. Standard attributes like id, href, src, alt, type, and value all work unchanged in JSX.

How do I handle data- and aria- attributes in JSX?

data-* and aria-* attributes work exactly the same in JSX as in HTML. They're the exception to the camelCase rule — keep the hyphens: data-testid, aria-label, aria-hidden. React passes these through unchanged to the DOM.

Is JSX the same as TSX?

TSX is JSX with TypeScript. The syntax is identical — the only difference is that .tsx files support TypeScript type annotations, generics, and interfaces. All JSX conversion rules (className, style objects, etc.) apply equally to TSX.

Related Convert Tools

cURL

cURL to Code

Convert cURL commands to JavaScript, Python, Go, PHP, Ruby, and Java code instantly

J→C

JSON to CSV Converter

Convert JSON arrays to CSV with nested object flattening, column selection, and .csv download

TML

TOML ↔ JSON/YAML

Convert between TOML, JSON, and YAML — perfect for Cargo.toml and pyproject.toml

E/D

Encode / Decode Multi-Tool

Base64, Base32, Hex, Binary, URL, and HTML encoding & decoding all in one tool