I've just started exploring React, by adding a component with a simple render function:
render() {
return <div class="myApp"></div>
}
When I run the app, I get the following error:
Warning: Unknown DOM property class. Did you mean className?
I can solve this by changing class to className.
The question is; does React enforce this convention? Also why do I need to use className instead of the conventional class? If this is a restriction then is it due to JSX syntax or somewhere else?
Yes, its a React convention:
Since JSX is JavaScript, identifiers such as
classandforare discouraged as XML attribute names. Instead, React DOM components expect DOM property names likeclassNameandhtmlFor, respectively.
In React.js there is no for and class properties available so we need to use
for --> htmlFor
class --> className
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": [
"react-html-attrs"
]
}
And of course, you need to install this plugin using npm:
npm install --save-dev babel-plugin-react-html-attrs