Aviso: classe de propriedade DOM desconhecida. Você quis dizer className?

Acabei de começar a explorar o React, adicionando um componente com uma função de renderização simples:

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

Quando executo o aplicativo, recebo o seguinte erro:

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

Posso resolver isso mudando classpara className.

A questão é; O React cumpre esta convenção? Além disso, por que preciso usar em classNamevez do convencional class? Se for uma restrição, é devido à sintaxe JSX ou a algum outro lugar?

Sim, é uma convenção do React:

Como JSX é JavaScript, identificadores como classe forsão desencorajados como nomes de atributos XML. Em vez disso, os componentes React DOM esperam nomes de propriedade DOM como classNamee htmlFor, respectivamente.

JSX em profundidade .

O Meteor usa o babel para transpilar ES5 para ES6 (ES2015), então podemos lidar com isso como um aplicativo Node normal com o transpilador babel adicionado.

Você precisa adicionar o .babelrcarquivo à pasta raiz do seu projeto e adicionar os seguintes itens

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

E, claro, você precisa instalar este plug-in usando npm:

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

Em React.js não há propriedades para e classes disponíveis, então precisamos usar

for   --> htmlFor
class --> className

Você não pode usar classe para qualquer atributo de tag HTML porque JS tem outro significado de classe. É por isso que você deve usar className em vez de class.

E também use o atributo htmlFor em vez de for.

Em HTML usamos

class="navbar"

mas em React e ReactNative não há HTML, usamos JSX (Javascript XML) aqui usamos

className="navbar"

A sintaxe JSX quando compilada usando babel, a sintaxe subjacente que será usada para criar o elemento HTML será

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

Se usarmos a classe em vez de className, o react irá inferir como classe javascript em vez de atributo de classe html. [Motivo pelo qual o nome da variável 'classe' já é usado no arquivo para criar uma classe javascript e está reservado para o mesmo propósito]. O que está errado e o compilador gera o erro, já que a classe javascript não é uma propriedade válida para elementos HTML DOM.

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

Portanto, é necessário usar className em vez de class.

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