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.

1. 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.

1. 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.