Why is className used in JSX instead of class?

Why is className used in JSX instead of class?

• A. Because class is reserved word in JavaScript.
• B. Because className is shorter.
• C. Because className is required for React to work.
• D. Because class is deprecated in HTML.

Answer: (A)

The main idea is that JSX is JavaScript, and class is a reserved keyword in JavaScript used to declare classes. Using class as an attribute would clash with the language syntax, so React uses className in JSX to avoid that conflict. This className value maps to the element’s HTML class attribute (and the DOM’s className property), letting you apply CSS classes properly. It’s not about being shorter, nor is it a requirement for React to work, and HTML’s class attribute isn’t deprecated—the difference is just that JSX uses className to stay valid in JavaScript and align with the DOM.

The main idea is that JSX is JavaScript, and class is a reserved keyword in JavaScript used to declare classes. Using class as an attribute would clash with the language syntax, so React uses className in JSX to avoid that conflict. This className value maps to the element’s HTML class attribute (and the DOM’s className property), letting you apply CSS classes properly. It’s not about being shorter, nor is it a requirement for React to work, and HTML’s class attribute isn’t deprecated—the difference is just that JSX uses className to stay valid in JavaScript and align with the DOM.