Las cookies nos permiten ofrecer nuestros servicios. Al utilizar nuestros servicios, aceptas el uso que hacemos de las cookies. Más Información. Aceptar

ReactJS: Diferencias en atributos de JSX y HTML

Miguh Ruiz
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.

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 React en el que aprenderás a usar este framework con profundidad.

Differences in Attributes - DOM Elements React Docs

Relacionado

Te dejamos una selección de cursos, carreras y artículos

Diferencias entre Vue.js y React

Diferencias entre Vue.js y React

Frameworks

19 de Septiembre de 2017

¿No te decides entre usar Vue.js y React? En este artículo te contamos las diferencias entre Vue.js y React y ver cual es el mejor.

ReactJS: Introducción y Primeros Pasos

ReactJS: Introducción y Primeros Pasos

Desarrollo Web

16 de Agosto de 2017

Descubre el framework javascript creado por Facebook: ReactJS. Aprende a crear tu primer componente, los métodos básicos y sus conceptos: todo ello siguiendo un simple ejemplo.

Curso de React JS

Curso de React JS

curso

Con este curso aprenderás:

  • Aprenderás a crear aplicaciones web con React JS
  • Crearás un proyecto para poner en practica lo aprendido
  • Conectar React con una API

Duración: 4 horas y 18 minutos

Estas son algunas de las empresas que ya confían en OpenWebinars

Profesores y profesionales

Nuestros docentes son profesionales que trabajan día a día en la materia que imparten

Conviértete en profesor de OpenWebinars