Advertencia: clase de propiedad DOM desconocida. ¿Quiso decir className?

Acabo de comenzar a explorar React, agregando un componente con una función de renderizado simple:

render() {
  return <div class="myApp"></div>
}

Cuando ejecuto la aplicación, me sale el siguiente error:

Warning: Unknown DOM property class. Did you mean className?

Puedo resolver esto cambiando class a className.

La pregunta es; ¿React hace cumplir esta convención? Además, ¿por qué necesito usar className en lugar de lo convencional class? Si se trata de una restricción, ¿se debe a la sintaxis JSX o a algún otro lugar?

Sí, es una convención React:

Dado que JSX es JavaScript, los identificadores como class y for se desaconsejan como nombres de atributo XML. En cambio, los componentes React DOM esperan nombres de propiedad DOM como className y htmlForrespectivamente.

JSX en profundidad.

En React.js no hay propiedades for y class disponibles, por lo que debemos usar

for   --> htmlFor
class --> className

Meteor usa babel para transpilar ES5 a ES6 (ES2015), por lo que podemos manejarlo como una aplicación Node normal con babel transpiler agregado.

Necesitas agregar .babelrc archivo a la carpeta raíz de su proyecto y agregue los siguientes elementos

{
  "plugins": [
    "react-html-attrs"
  ]
}

Y, por supuesto, necesita instalar este complemento usando npm:

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

En HTML usamos

class="navbar"

pero en React y ReactNative no hay HTML, usamos JSX (Javascript XML) aquí usamos

className="navbar"

No puede usar clase para ningún atributo de etiqueta HTML porque JS tiene otro significado de clase. Por eso tienes que usar className en lugar de class.

Y también use el atributo htmlFor en lugar de for.

En reaccionar 16.13.1 puede usar el atributo de clase. Lanza una excepción de “advertencia” pero NO detiene la ejecución.

La sintaxis JSX cuando se compila usando babel, la sintaxis subyacente que usará para crear el elemento HTML será

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

Si usamos la clase en lugar de className, la reacción la inferirá como una clase javascript en lugar de un atributo de clase html. [Reason the variable name ‘class’ is already used in the file to create a javascript class and is reserved for the same purpose]. Lo cual es incorrecto y el compilador arroja el error, ya que la clase javascript no es una propiedad válida para los elementos DOM html.

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

Por lo tanto, es necesario usar className en lugar de class.

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