Why React uses `className` over `class` attribute?

React uses className instead of class because of a JavaScript naming conflict with the class keyword.

1. class is a reserved keyword in JavaScript In JavaScript, class is used to define ES6 classes:

class Person {
constructor(name) {
this.name = name;
}
}

If you try to use class as a variable or property name, it will throw a syntax error. Since JSX is just JavaScript with XML-like syntax, using class directly in JSX would break the parser.

2. JSX Is JavaScript

When you write JSX like this:

It will be compiled to:

React.createElement('div', { class: 'btn' }, 'Click');

But class is invalid in this object literal context (since it clashes with the JS keyword), hence React instead uses className.

which compiles to:

React.createElement('div', { className: 'btn' }, 'Click');

React then translates className to class in the final HTML DOM.

3. Aligns with DOM APIs In vanilla JavaScript, you interact with element classes using:

element.className = 'my-class';

React follows this convention, staying consistent with the DOM API's property name rather than HTML’s attribute.