Allow className and for in JSX element declaration

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.

from: https://facebook.github.io/react/docs/jsx-in-depth.html

• Instead of <div className='foo'> we should be able to have <div class='foo'>.
• Instead of <div htmlFor='bar'> we should be able to have <div for='bar'>.

It is true that class and for are reserved keywords in ECMAScript. However, JSX is not part of the ECMAScript. JSX is being transpiled to JavaScript. Just because JSX can be inlined with JavaScript, it should not be restricted by the same limitations. The transpiler should carry the weight of the incompatibilities.

Babel

Babel transpiler is able to read class and for attributes for what they are and convert them to:

React.createElement('div', { 'class': 'foo' });
React.createElement('div', { 'for': 'bar' });

Refer to: https://github.com/babel/babel/issues/2039

React should support class and for element properties and not throw a warning (Warning: Unknown DOM property class. Did you mean className?).

[sophiebits]

The JSX transform used to do that, but we don’t recommend it because it’s confusing if you ever try to pass class= or for= as a prop to your own components – you wouldn’t expect to access them with a different name.

[ericclemmons]

Interestingly enough, https://github.com/insin/babel-plugin-react-html-attrs continues to be one of the first installs when we convert a project to React.

Apparently adding .eslintrc is more divisive 😉