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.