ReactJS: Diferencias en atributos de JSX y HTML

En esta ocasión, vamos a analizar de forma muy breve, algunos atributos de HTML que a la hora de crear nuestro componente con ReactJS deberemos de implementarlo de manera diferente. Uno de los motivos por los que nos enfrentamos a esto no es más que el hecho de que en JavaScript existen palabras reservadas(e.g: function, class, const, let, var…) por tanto algún que otro atributo que seguro que ya se te ha ocurrido nos causará problemas a la hora de transpilar nuestro código o simplemente será ignorado.

El atributo className

A la hora de establecer una clase en React, lo haremos usando el artibuto className en vez de class, ya que esta es una palabra registrada del lenguaje que estamos usando.

<div className="root"></div>

El atributo dangerouslySetInnerHTML

Este atributo no es más que la manera que tenemos de usar innerHTML dentro de React. Al llamar a este método debemos de indicarle una función, que a su vez retorne un objeto con una propiedad __html. Veamos un ejemplo:

function addHtml() {
    return {__html: 'Hello World}
}

function HelloWorld() {
    return(
        <h1 dangerouslySetInnerHTML={addHtml()}></h1>
    )
}

El atributo htmlFor

Este atributo pretente sustituir el for que solemos aplicar en las etiquetas <label />. El motivo es el mismo que el de className, puesto que for también es una palabra reservada.

<label htmlFor="name">Nombre:</label>
<input type="name" id="name" />

El método onChange

No es más que un método que nos permite obtener en tiempo real los cambios que un usuario realize en un formulario con el fin de autoguardar los cambios o mostrarlos en un componente.

[BANNER_SUSCRIPCION]

El atributo selected

Es un atributo que se le aplica a los elementos <option> con el fin de obtener el que está seleccionado en cada momento.

Estilos en línea. Usado el atributo style

En HTML contamos con añadir estilos en línea. La manera de realizar estos en React es algo peculiar. Para ello, usamos el atributo style y a este debemos pasarle un objeto que contendrá los estilos(con las propiedades en formato camelCase). Veamos un ejemplo:

const helloStyles = {
    color: 'red',
    fontSize: '16px' //camelCase property
}

function HelloWorld {
    return(
        <h1 style={helloStyles}>Hello World</h1>
    )
}

El atributo value

Nos sirve para establecerle un valor a un elemento <input /> o <textarea/>.

Conclusiones

Hemos visto algunos de los atributos más importantes que nos pueden causar problemas si estás empezando con React. Te dejo el enlace a la documentación con todos los cambios, así como con todos los elementos de HTML que sí soporta por defecto.

No olvides revisar revisar nuestro curso de Reactt en el que aprenderás a usar este framework con profundidad.

Differences in Attributes - DOM Elements React Docs