¿Quieres aprender a añadir estilos a un elemento React? ¡Esto artículo te da la respuesta!
React es una librería JavaScript que nos permite crear interfaces de usuario en el proceso de desarrollar una aplicación de una sola página. A este tipo de aplicaciones también se les conoce como SPA por sus siglas en inglés: single page application. Para ello, React piensa en la aplicación como pequeños bloques que se van uniendo para crear el bloque mayor, la aplicación en sí misma. El bloque más pequeño que podremos encontrar en React es un elemento. En este post, te enseñaremos cómo añadir estilos a un elemento React.
¿Cómo añadir estilos a un elemento React?
Un elemento React es un objeto creado en esta librería JavaScript que tiene determinadas características. Este elemento se crea utilizando el comando createElement y a las características que lo componen las llamamos atributos. Si quieres saber más sobre este tema, te invitamos a leer nuestro post sobre atributos de un elemento React.
Una vez hemos creado este objeto, hay varias maneras de añadir estilos a un elemento React. Una de las maneras que tenemos para hacer esto es pasarle una clase al elemento.
Para ello, basta con abrir llaves en el elemento, dentro de las cuales podemos insertar distintas propiedades en términos de clave:valor. Estas propiedades se encontrarán dentro del elemento bajo el atributo props, el cual puedes analizar dentro del inspector de tu navegador en la sección console. Dentro de estas llaves, podrás insertar una clase a tu elemento usando la clave className. Al valor de esta clave puedes agregarle el número de clases que quieras. Luego, usando un documento CSS, podrás llamar a estas clases para agregarle estilos de modo tradicional.
Otra manera de añadir estilos a un elemento React es a través del objeto style. Dentro de las llaves, podrás pasar un objeto style a todos los elementos React. Con este objeto, podrás abrir otro set de llaves que funcionan de manera similar al styling line. Dentro de estas nuevas llaves que conforman el objeto, definirás las propiedades de estilo que quieres tener en tu elemento. Ten en cuenta que estas propiedades se definen en términos de camelCase. Es decir, en vez de insertar background-color, escribimos backgroundColor.
NOTA: El objeto style se encontrará dentro del atributo props. En el inspector de tu navegador podrás desplegar este atributo para encontrar las propiedades children, className y, ahora, style.
A continuación, te mostramos un ejemplo de cómo hemos añadido los estilos color rojo y color de fondo verde a un elemento React. El elemento que te presentamos a continuación es un hello world, que puedes aprender a escribir en nuestro post crear un hello world en React.
<html>
<body>
<div id= “root”></div>
</body>
<script type = “text/javascript”>
const rootElement = document.getElementById (‘root’);
const element = React.createElement {
‘div’,
{
className = ‘container’;
children: ‘Hello World’
style {color: ’red’, backgroundColor: ‘green’},
},
console.log (element);
ReactDOM.reader (element, rootElement);
</script>
</html>
Ahora que sabes cómo añadir estilos a un elemento React, seguro que tienes ganas de seguir aprendiendo sobre esta extensa librería de JavaScript. Para ello, te recomendamos echarle un vistazo a nuestro Desarrollo Web Full Stack Bootcamp, donde aprenderás a dominar esta y otras herramientas de la programación para la web. Así, en pocos meses, dominarás lenguajes como CSS, HTML, JavaScript y JSX. ¿A qué esperas para cumplir tu sueño de ser un desarrollador web? ¡Inscríbete ya!
