clase vs className en React 16

Solución:

class es una palabra clave en javascript y JSX es una extensión de javascript. Esa es la razón principal por la que React usa className en lugar de class.

Nada ha cambiado en ese sentido.

Para expandir esto un poco más. A palabra clave significa que un token tiene un significado especial en la sintaxis de un lenguaje. Por ejemplo en:

class MyClass extends React.Class {

Simbólico class denota que el siguiente token es un identificador y lo que sigue es una declaración de clase. Consulte Palabras clave de Javascript + Palabras reservadas.

El hecho de que un token sea una palabra clave significa que no podemos usarlo en algunas expresiones, p. Ej.

// invalid in older versions on Javascript, valid in modern javascript
const props = {
  class: 'css class'
}

// valid in all versions of Javascript
const props = {
 'class': 'css class'
};

// invalid!
var class="css";

// valid
var clazz = 'css';

// invalid!
props.class="css";

// valid
props['class'] = 'css';

Uno de los problemas es que nadie puede saber si no surgirá algún otro problema en el futuro. Todos los lenguajes de programación todavía están evolucionando y class se puede utilizar en una nueva sintaxis conflictiva.

No existen tales problemas con className.

El equipo de React va a cambiar a class en lugar de className en el futuro próximo (fuente):

• className → class (# 4331, vea también # 13525 (comentario) a continuación). Esto se ha propuesto innumerables veces. Ya estamos permitiendo pasar la clase al nodo DOM en React 16. La confusión que esto está creando no vale la pena por las limitaciones de sintaxis contra las que está tratando de protegerse.

¿Por qué cambiar y no admitir ambos?

Si admitimos ambos sin advertencias, la comunidad se dividirá sobre cuál usar. Cada componente de npm que acepte una prop de clase tendrá que recordar reenviar ambos. Si incluso un componente en el medio no funciona e implementa solo un accesorio, la clase se pierde, o corre el riesgo de terminar con class y className en la parte inferior “en desacuerdo” entre sí, sin que React pueda resolver ese conflicto. Así que pensamos que sería peor que el statu quo y queremos evitarlo.

Así que deberías estar atento.
Yo todavía usaría className siempre que esto sea lo que espera la API.

Solo para arrojar un poco más de luz, además de las otras buenas respuestas ya dadas:

Notarás que React usa className en lugar de la clase DOM tradicional. De los documentos, “Dado que JSX es JavaScript, los identificadores como class y for no se recomiendan como nombres de atributos XML. En cambio, los componentes de React DOM esperan nombres de propiedades DOM como className y htmlFor, respectivamente”.

http://buildwithreact.com/tutorial/jsx

Además, para citar a zpao (un colaborador de React / empleado de Facebook)

Nuestros componentes DOM usan (principalmente) la API de JS, por lo que optamos por usar las propiedades de JS (node.className, no node.class).

---

---

Utiliza Nuestro Buscador