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.

免費的網頁開發者工具

HTML 轉 JSX 轉換器

HTML

JSX

HTML 轉 JSX 轉換器的運作方式

工具功能說明

常見的開發者使用情境

主要轉換項目

相關工具