Convertir HTML to JSX for React
JSX es HTML con JavaScript expressions. Convertir HTML a JSX por closing void etiquetas, converting clase a className, y style cadenas a objetos.
- 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 Minificador HTML →
Minificar 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 Formateador JS →
Formatear 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 />).
Preguntas frecuentes
- 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.