Why JSX Differs from HTML
JSX is a syntax extension for JavaScript that looks like HTML but follows JavaScript naming conventions. Since class and for are reserved words in JavaScript, React uses className and htmlFor instead. Inline styles must be JavaScript objects with camelCase properties rather than CSS strings. Understanding these differences is essential for writing correct React components.
Key Attribute Transformations
The most common transformations include class to className, for to htmlFor, tabindex to tabIndex, and onclick to onClick. Inline styles change from strings to objects where property names use camelCase: background-color becomes backgroundColor. Boolean attributes like disabled and checked work without explicit values in JSX, matching their HTML behavior while following JSX syntax rules.
Self-Closing Tags in JSX
HTML allows void elements like img, br, and input without closing tags or trailing slashes. JSX requires all elements to be explicitly closed; void elements must use self-closing syntax with a trailing slash like <img /> and <br />. This strict requirement ensures the JSX parser can correctly build the component tree without ambiguity about element boundaries.
Best Practices After Conversion
After converting HTML to JSX, review the output for hardcoded values that should become props or state variables. Extract repeated JSX patterns into reusable components. Replace static class names with dynamic expressions using template literals or libraries like clsx. Convert inline styles to CSS modules or styled components for better maintainability in production React applications.
