Why React uses className over class attribute ?

To all the regular DOM and SVG elements like <button>, <li>, <a>, <div>, etc., if we want to apply the CSS classes, we use the className attribute instead of class in React. That’s why it warns you every time when you mistakenly write class instead of className. 

There are very few scenarios where the DOM property for a given HTML attribute uses a different name. For example class as className. But nothing has changed with it, the semantic meaning of both className and class is the same, when JSX is rendered, the className attribute is automatically rendered as a class attribute.

Why React uses className over class attribute ?

The only reason behind the fact that it uses className over class is that the class is a reserved keyword in JavaScript and since we use JSX in React which itself is the extension of JavaScript, so we have to use className instead of class attribute. Also, when the JSX is transpiled to JavaScript if we are using a class attribute it will conflict with the JavaScript classes. That’s why to achieve better compatibility and consistency with other libraries React use className instead of the class attribute.

In earlier times before React 16, if you wrote JSX with an unknown element that was not recognized by React, it would simply skip it.

For example, The below line of code would render an empty div to the DOM in React 15, 

// React 15 output
<div myatrribute="xyz" />   =>  <div />

 But in React 16, this unknown attribute “xyz” will end up in the DOM as well. 

// React 16 output
<div myatrribute="xyz" />

That’s why, in React 15, when you use class to specify a CSS class to any element, it just warns you and ignores that. But now due to the new DOM attributes handling in React 16, it still warns but converts values to strings and passes them through as well.

Creating React Application

Step 1: Create a React application using the following command:

npx create-react-app foldername

Step 2: After creating your project folder i.e. foldername, move to it using the following command:

cd foldername

Project Structure

It will look like the following.

Project Structure

Example 1: Now, Let’s understand this with some practical implementation, suppose we simply render a heading <h1> with some text in its inner HTML from our default component App.js.

Javascript

// Filename - App.js

import "./App.css";

function App() {
    return (
        <h1 class="heading1">
            This is an example code
        </h1>
    );
}

export default App;

Steps to Run: Use this command in terminal.

npm start

Output: In the above code, we have used class instead of className and hence in the console, we received a warning which says: “Invalid DOM property ‘class’, Did you mean ‘className’? ” But it only warns you in React 16, and that is why output in above code has not get affected by it.

Example 2: You can get rid of the above example’s warning by simply using the className in place of class, as done in below example:

Javascript

// Filename - App.js
import "./App.css";

function App() {
    return (
        <h1 className="heading1">
            This is an example code
        </h1>
    );
}

export default App;

Output: As we can see no worning are there in console window for that existed for using class attribute.