¿Conoces la diferencia entre elemento y componente en React? React es una librería JavaScript que nos permite crear interfaces de usuario para el desarrollo de aplicaciones de una sola página o SPA. Para ello, React utiliza una extensión JavaScript que le permite acceder a una sintaxis similar a HTML: JSX. Dentro de este lenguaje, existen dos objetos principales: los elementos y los componentes.
En este post, te enseñaremos cuál es la diferencia entre elemento y componente en React.
¿Cuál es la diferencia entre elemento y componente en React?
Antes de hablar de la diferencia entre elemento y componente en React, hagamos un repaso sobre qué es cada uno de estos objetos.
Elemento en React
Un elemento en React no es más que un objeto que creamos con el comando react.createElement. Este objeto tiene distintos atributos, también conocidos como propiedades. Dentro de estos atributos encontrarás un atributo type y un objeto props. Para conocer más sobre este tema, te invitamos a leer nuestro post sobre los atributos de un elemento React.
Entonces, un elemento es básicamente un objeto que crea React para poder renderizar algo en pantalla. Aquí radica la diferencia entre elemento y componente en React. Este objeto se crea con el código core de React y luego es transformado por React DOM en algo que puede visibilizarse en pantalla.
Componente en React
Por su parte, un componente es una función o una clase que nos permite jugar con las propiedades del objeto props y devolver un elemento React. Es decir, ya sea directamente con un elemento o con un componente, obtendremos un elemento React.
Diferencia entre elemento y componente en React
Cuando creamos un elemento React de manera directa, encontraremos que esta librería genera un createElement por el cual pasa un string del tipo de elemento, un objeto de props que puede ser null y un children según el tercer parámetro del elemento. Cuando creamos un elemento React a partir de un componente, encontraremos un createElement por el que se pasa la referencia de función del componente, en vez de un string del tipo de elemento. React interpreta la diferencia entre elemento y componente a través del uso o no de la primera letra mayúscula.
Entonces, si la primera letra es minúscula, React interpreta que este es un objeto nativo del DOM, asignándolo al atributo type. Pero si la primera letra de nuestro elemento es mayúscula, React sabrá que el objeto es una función. Entonces, React sabe que debe pasar dicha función como parámetro del comando createElement y de su atributo type. Así pues, tenemos la diferencia entre elemento y componente en React.
Imaginémonos que tenemos un elemento como el de nuestro post sobre componentes en React, donde se utiliza un div para crear el elemento. Entonces, si llegáramos a ese elemento React de manera directa, veríamos un string «div» como primer parámetro. Pero si lo creamos a partir de un componente tipo función o clase, obtendremos como primer parámetro el nombre de la función.
La diferencia entre elemento y componente se ve de manera más clara dentro del inspector de tu navegador, donde podrás desplegar los atributos del elemento para entender la diferencia en la categoría type.
¿Qué sigue?
Ahora que sabes cuál es la diferencia entre elemento y componente en React, ¡es la hora de que empieces a utilizar estos dos objetos en tus propios proyectos! Para ello, te recomendamos nuestro Desarrollo Web Full Stack Bootcamp, un programa de formación intensiva en el que aprenderás a dominar lenguajes y herramientas de programación para la web como JavaScript, React, CSS y HTML. ¡No te lo pierdas!
