Konvertieren HTML to JSX for React
JSX ist HTML mit JavaScript expressions. Konvertieren HTML in JSX durch closing void Tags, converting Klasse in className, und style Zeichenketten in Objekte.
- 1
JSX differs from HTML: all tags must be closed (<img /> instead of <img>), class becomes className, for becomes htmlFor, style is an object not a string, and inline event handlers use camelCase (onClick not onclick). The conversion automates these transformations.
- 2 HTML-Minifier →
Minifizieren the HTML before conversion to clean up whitespace and ensure consistent structure. This makes the JSX output cleaner and more predictable. Remove comments and unnecessary whitespace.
- 3 JS-Formatierer →
Formatieren the resulting JSX for readability. The conversion from HTML to JSX produces valid React components — format to ensure proper indentation and syntax. Verify that all attributes were correctly renamed.
- 4
Manual fixes after conversion: HTML attributes that are reserved words (class → className, for → htmlFor), style="color: red" → style={{color: "red"}}, data-* and aria-* attributes stay as-is, SVG attributes use camelCase (stroke-width → strokeWidth). Self-close void tags (<br> → <br />).
Häufige Fragen
- Why does class become className in JSX?
- Because JSX compiles to JavaScript (React.createElement), and class is a reserved word in JavaScript (ES6 classes). React uses className to avoid the conflict. Similarly, for becomes htmlFor because for is a reserved word in JavaScript.
- How do I convert inline styles?
- HTML style="color: red; font-size: 14px" becomes JSX style={{color: "red", fontSize: "14px"}}. Note: property names are camelCase (fontSize not font-size), values are strings, and the outer braces are JSX expression delimiters while inner braces are the object literal.