Why React Uses 'className' Instead of 'class'
In React, we use className
instead of class
when defining CSS classes for HTML elements. This is because class
is a reserved keyword in JavaScript — it's used to declare classes when creating objects and handling inheritance. If React allowed class
, it would cause conflicts with JavaScript's syntax rules.
React follows JavaScript closely, so to avoid any ambiguity, it uses className
as a special property for adding CSS classes. Behind the scenes, React automatically translates className
into a regular class
attribute in the actual HTML rendered to the browser.
Here’s an example:
// Correct in React function MyComponent() { return <div className="container">Hello, World!</div>; }
If you mistakenly use class
in JSX, you will get a syntax error or a warning.
In short:
React uses className
to avoid clashing with JavaScript's reserved class
keyword while still enabling developers to assign CSS classes in JSX.