JSX vs HTML: What's Actually Different?
JSX looks like HTML but the differences matter. Here is a clear list of what changes and why.
JSX vs HTML: What's Actually Different?
JSX borrows HTML's look but is JavaScript underneath. That creates a set of differences beginners must learn. Here is the practical list.
className Instead of class
class is a reserved word in JavaScript, so JSX uses className for the HTML class attribute. The same applies to htmlFor instead of for.
style Takes an Object
In HTML, style is a string. In JSX, style takes an object with camelCased keys, like backgroundColor and fontSize, not kebab-case.
All Tags Must Be Closed
HTML lets some tags like <br> be unclosed. JSX requires every tag to be closed, either with a closing tag or as a self-closing tag with a slash.
camelCase for Attributes
HTML attributes like tabindex become tabIndex in JSX. Most DOM attributes follow camelCase because JSX maps them to DOM properties.
Events Are camelCase
HTML uses onclick; JSX uses onClick. Event handlers are passed as functions, not strings.
Conditional Rendering
HTML has no logic. JSX lets you embed JavaScript expressions in curly braces for conditional rendering and dynamic values.
Comments Are Different
HTML comments look like <!-- -->. In JSX, comments are JavaScript expressions inside curly braces.
The Takeaway
JSX is HTML-shaped JavaScript. Close all tags, use camelCase attributes, pass style as an object, and remember you can embed expressions. Once you internalize these, JSX feels natural.
Because JSX is JavaScript, and class is a reserved word. JSX uses className for the HTML class attribute to avoid the conflict. The same logic applies to htmlFor instead of for.
In HTML, style is a string. In JSX, style takes an object with camelCased keys like backgroundColor and fontSize, not kebab-case strings, because JSX maps attributes to DOM properties.
Yes. Every tag must be closed, either with a closing tag or as a self-closing tag with a slash. Tags like br and img that are unclosed in HTML still need the closing slash in JSX.
Mostly, but they use camelCase. For example, tabindex becomes tabIndex. This is because JSX maps attributes to DOM properties, which use camelCase.
HTML uses lowercase attributes like onclick with string values. JSX uses camelCase like onClick and passes a function as the handler, not a string.
Ready to master React completely?
Want to upskill yourself, crack your next interview, and get your dream job? Join our comprehensive course to dive deeper with high-quality video tutorials, solve interview questions, and a premium community.
Master React
Want to upskill yourself, crack your next interview, and get your dream job? Join our comprehensive course.