¿Por qué React usa className sobre el atributo de clase?

Para todos los elementos DOM y SVG regulares como <button>, <li>, <a>, <div>, etc., si queremos aplicar las clases CSS, usamos el atributo className en lugar de class en React. Es por eso que te advierte cada vez que escribes por error class en lugar de className. 

De hecho, en épocas anteriores a React 16, si escribía JSX con un elemento desconocido que React no reconoce, simplemente lo omitía. Por ejemplo: 

<div myatrribute="xyz" />

 La línea de código anterior generaría un div vacío en el DOM en React 15, 

// React 15 output
<div />

Pero en React 16, este atributo desconocido «xyz» también terminará en el DOM. 

// React 16 output
<div myatrribute="xyz" />

Es por eso que, en React 15, cuando usas class para especificar una clase css a cualquier elemento, solo te advertiría e ignoraría eso. Pero ahora, debido al nuevo manejo de atributos DOM en React 16, aún advierte , pero convierte los valores en strings y también los pasa.

Creando la aplicación React:

Paso 1: Cree una aplicación React usando el siguiente comando:

npx create-react-app foldername

Paso 2: después de crear la carpeta de su proyecto, es decir , el nombre de la carpeta , acceda a ella con el siguiente comando:

cd foldername

Estructura del proyecto: Tendrá el siguiente aspecto.

Estructura del proyecto

Ejemplo 1: ahora, entendamos esto con alguna implementación práctica, supongamos que simplemente mostramos un encabezado <h1> con algún texto en su HTML interno de nuestro componente predeterminado App.js.

import "./App.css";
  
function App() {
  return <h1 class="heading1">This is an example code</h1>;
}
  
export default App;

Salida: En el código anterior, hemos usado class en lugar de className y, por lo tanto, en la consola, recibimos una advertencia que dice: » Propiedad DOM no válida ‘clase’. ¿Quiso decir ‘className’? Pero solo le advierte en React 16, y es por eso que la salida en el código anterior no se ha visto afectada.

Ejemplo 2: puede deshacerse de la advertencia del ejemplo anterior simplemente usando className en lugar de class, como se hace en el siguiente ejemplo:

import "./App.css";
  
function App() {
  return <h1 className="heading1">This is an example code</h1>;
}
  
export default App;

Producción:

Explicación: La única razón detrás del hecho de que usa className sobre class es que la clase es una palabra clave reservada en JavaScript y dado que usamos JSX en React, que en sí mismo es la extensión de JavaScript, tenemos que usar className en lugar del atributo de clase. Sin embargo, hay muy pocos escenarios en los que la propiedad DOM para un atributo HTML dado use un nombre diferente. Por ejemplo, clase como className. Pero nada ha cambiado con él, el significado semántico de className y class es el mismo, cuando se representa JSX, el atributo className se representa automáticamente como un atributo de clase.