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:

 <div class="btn">Click</div>

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.

 <div className="btn">Click</div>

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.