Question 1

What changes are needed to convert HTML to JSX?

Accepted Answer

JSX (JavaScript XML) looks like HTML but has several differences: class becomes className (class is a reserved word in JS); for becomes htmlFor; all tags must be self-closing if empty (
not
); style takes an object not a string (style={{color: 'red'}} not style='color:red'); event handlers are camelCase (onClick not onclick); HTML comments are not valid JSX (use {/* comment */}); and custom data attributes (data-*) work unchanged.

Question 2

Why does React use className instead of class?

Accepted Answer

JSX compiles to JavaScript (React.createElement calls). In JavaScript, class is a reserved keyword used for ES6 class definitions. Using class as a JSX attribute would create a syntax ambiguity for parsers. React chose className to avoid this conflict. The DOM property is also called className (element.className), so it's consistent with the underlying web API. All HTML attributes with reserved-word names have JSX equivalents: class → className, for → htmlFor, tabindex → tabIndex.

Question 3

How do I handle inline styles in JSX?

Accepted Answer

In HTML:

. In JSX:

— note the double braces (outer = JSX expression, inner = JS object) and camelCase property names. CSS property values are strings (except unitless numbers like opacity: 0.5, zIndex: 1). Vendor prefixes use camelCase: -webkit-transform → WebkitTransform. For complex styling in React, prefer CSS modules, Tailwind, or styled-components over inline styles.

Question 4

What happens to HTML comments when converting to JSX?

Accepted Answer

HTML comments () are not valid JSX syntax and must be converted to JSX comments: {/* comment */}. JSX comments use JavaScript block comment syntax wrapped in an expression container. They must be inside a JSX expression context — you cannot have a JSX comment as a sibling of elements without wrapping. The HTML-to-JSX converter automatically replaces HTML comments with their JSX equivalents.

免费的 Web 开发者工具

HTML 转 JSX 转换器

HTML

JSX

HTML 转 JSX 转换器的工作原理

工具功能

常见开发者使用场景

执行的关键转换

相关工具