React components use JSX, not HTML. So we need to use JSX attributes and React replicate the respective HTML property/attribute while rendering. Use of HTML property in JSX can sometimes lead to errors. For example, class is a keyword in JavaScript (JSX is an extension of JavaScript), so it will throw an error. However, in HTML it is a valid attribute.

Note: If you use React with Web Components, use the class attribute instead.

Bad Practice

import React from 'react';
const Hello = <div class="hello">Hello World</div>;

Recommended

import React from 'react';
const Hello = <div className="hello">Hello World</div>;

References

• DOM elements in React