React es una de las librerías más populares del mundo de la programación. Con ella, podemos utilizar una mezcla entre el lenguaje HTML y el lenguaje JavaScript con el fin de desarrollar interfaces de usuario para aplicaciones de una sola página. Por ello, entender su funcionamiento y filosofía es muy útil para cualquier desarrollador web. En este post, te enseñaremos cuáles son los atributos de un elemento React, fundamentales en esta herramienta.
¿Qué es un elemento React?
React es una librería que se inspira en otros lenguajes para simplificar la ejecución de ciertas acciones. Esto quiere decir que podríamos realizar las mismas acciones con los otros lenguajes. Sin embargo, React lo hace de un modo diferente.
Una de las acciones más comunes en la programación es la creación de elementos. En React, lo hacemos con el comando createElement, que nos crea un elemento con determinadas características. Es decir, un elemento React no es más que un objeto con características particulares, a las que, a partir de ahora, llamaremos atributos.
¿Cuáles son los atributos de un elemento React?
Hay muchos atributos de un elemento React. Algunos, como key y $$typeof funcionan para configurar la parte interna de React. Otros corresponden a los atributos que nosotros le hemos dado en nuestro editor de texto. Para revisar estos atributos, te sugerimos abrir el inspector de tu navegador y explorar sus secciones. A continuación, te explicamos cuáles son los atributos de un elemento React más relevantes para tu día a día desarrollando con esta librería.
type
El atributo type en un elemento React nos da a conocer el tipo de elemento. Entonces, si has usado createElement para crear un elemento div, aquí verás “div”. Si abres el inspector de tu navegador, lo verás reflejado tanto en el elemento pasado en la sección console como en la sección elements.
props
El objeto props es uno de los atributos de un elemento React. En el inspector de tu navegador, en la sección console, podrás desplegar este objeto para ver lo que lo conforma. Si le has dado un nombre de clase a tu elemento, aquí verás dos partes: una parte className con la clave que le has dado a tu elemento y otra parte denominada children. Esta parte corresponderá al tercer atributo que le has pasado a tu elemento.
Ten en cuenta que en React le llamamos props a las propiedades de un elemento. Es aquí donde verás conceptos como el estilo. Para conocer más sobre este tema, te invitamos a leer nuestro post sobre añadir estilos a un elemento React.
children
Children corresponde al atributo props de un elemento React. Esta prop es una de las más importantes y la verás frecuentemente. La prop children siempre corresponderá a lo que nosotros insertemos como tercer parámetro de un elemento React. También puedes insertar la propiedad children dentro de las llaves de tu elemento. Para ello, basta con que uses children como clave y le des cualquier valor. Esto genera el mismo resultado que tener dicho valor en el tercer parámetro. Ten presente que, si tu tercer parámetro sobrescribe esta propiedad, será este valor el que se tome como referencia.
La librería React nos permite crear este tipo de elementos porque maneja el core o núcleo del código. Sin embargo, son las extensiones ReactDOM y React Native las que saben procesar estos elementos para crearlos según la necesidad del proyecto. Como puedes haber leído en nuestro post sobre los principios básicos de React, la extensión React DOM nos permite crear aplicaciones para la web, pues es la que nos da acceso a elementos como divs y spans. Por su parte, la extensión React Native nos da acceso a conceptos como views, que nos permiten crear aplicaciones para dispositivos móviles.
Para hacer que React DOM procese el código React y lo convierta en un elemento para la web, utilizamos normalmente el comando ReactDOM.render. A este comando le pasaremos el nombre del elemento que hemos creado con el código React.
¿Te animas a seguir aprendiendo?
Después de leer este post, sabes exactamente cuáles son los atributos de un elemento React y estás un paso más cerca de dominar su lenguaje y filosofía. Sin embargo, ¡todavía queda mucho por aprender sobre esta extensa librería JavaScript! Si quieres seguir formándote en relación a esta y otras herramientas de programación para la web, te invitamos a formar parte de nuestro Desarrollo Web Full Stack Bootcamp, donde te enseñaremos a dominar lenguajes y herramientas esenciales, como son JavaScript, HTML, CSS y React. ¿Te animas a seguir aprendiendo con nosotros? ¡Te esperamos!
