Accepted answer

Yes, its a React convention:

Since JSX is JavaScript, identifiers such as class and for are discouraged as XML attribute names. Instead, React DOM components expect DOM property names like className and htmlFor, respectively.

JSX In Depth.


The JSX syntax when compiled using babel, underlying syntax it will use to create the HTML element will be

   React.createElement('div', {attributes}, "Hello");

If we use the class instead of className, the react will infer it as javascript class instead of html class attribute. [Reason the variable name 'class' is already used in the file to create a javascript class and is reserved for the same purpose]. Which is wrong and compiler does throws the error, since javascript class is not a valid property for html DOM elements.

   React.createElement("p", {"class": "header"}, "Hello");

Hence it is necessary to use className instead of class.

   React.createElement("p", {"className": "header"}, "Hello")


In react 16.13.1 you can use class attribute. It throws a "warning" exception but it don'T stop the execution.

enter image description here


You can't use class for any HTML tag attribute because JS has another meaning of class. That why you have to use className instead of class.

And also use htmlFor attribute instead of for.


In HTML we use


but in React and ReactNative there is no HTML, we use JSX(Javascript XML) here we use



Meteor uses babel to transpile ES5 to ES6 (ES2015), so we can deal with it as a normal Node application with babel transpiler added.

You need to add .babelrc file to your project's root folder, and add the following items

  "plugins": [

And of course, you need to install this plugin using npm:

npm install --save-dev babel-plugin-react-html-attrs


In React.js there is no for and class properties available so we need to use

for   --> htmlFor
class --> className

Related Query

More Query from same tag