JSX vs HTML
Last updated: 2026-11-02
JSX vs HTML JSX vs HTML
JSX looks like HTML, but a few rules differ: attributes use lower camel case, class becomes className, style takes an object, and every tag must be closed. Learning these differences up front saves you from the compile errors that trip up most React beginners, and it makes existing HTML snippets easy to translate.
| Group | Core Concepts |
|---|---|
| Kind | Reference |
| Since | Earliest React versions |
ℹ️ Info The editor transpiles JSX to JavaScript and renders the real UI in a sandbox; components mount automatically — no manual render call needed.
📝 Syntax
<div className="box" style={{ fontSize: 14 }}>
// ↑ class becomes className ↑ style is an object with camelCase keys
<img src="a.png" /> {/* Void elements must be self-closed */}
<label htmlFor="mail">Email</label> {/* for becomes htmlFor */}
</div>Returns：No return value — a coding convention and mental model.
▶ Example
The example runs out of the box: it auto-renders when expanded, and edits take effect instantly.
Output：
A bordered, rounded card holding a heading, an "Email" label, a placeholder input and one line of red explanatory text — all rendered with JSX camelCase attributes and an object style.💡 Key Points
⚠️ Warning Writing class fails to compile outright — you must use className; style={{}} is an object literal, hence the double braces.
💡 Tip Void elements such as img, br and input must be self-closed in JSX: <img />, or the build fails.
ℹ️ Info Most other attributes just switch to lower camel case: onclick → onClick, tabindex → tabIndex. The semantics do not change.
🏷️ More Core Concepts
💡 Related Cases
More case studies coming soon.
📚 Related Tutorials
❓ FAQ
Q Why does JSX use className instead of class?
A Because JSX is part of JavaScript and class is a reserved word in the language, so React picked className to match element.className in the DOM API.
Q How do I write style in JSX?
A style takes an object rather than a string: style={{ fontSize: 14, color: 'red' }}. Keys use lower camel case and numbers are treated as pixels automatically.
Q Can JSX tags stay unclosed?
A No. Strict XML-style closing is a JSX rule — <img>, <br> and <input> all have to be written in self-closing form.
