Estilos en React

Autor: | Última modificación: 31 de agosto de 2022 | Tiempo de Lectura: 2 minutos
Temas en este post:

¿Sabes qué son los estilos en React y cómo puedes añadirlos? Diseñar y estilizar son partes fundamentales para la usabilidad de cualquier proyecto de desarrollo web. Nuestras líneas de código pueden estar perfectamente escritas, pero si un usuario no entiende lo que debe hacer con nuestros elementos, hemos fallado.

Por ello, en este post, te enseñaremos cómo funcionan los estilos en React, fundamentales para distinguir nuestros proyectos.

¿Qué son los estilos en React?

Existen muchas maneras de insertar estilos en React. Cómo puedes leer en nuestro post sobre añadir estilos a un elemento React, las formas más comunes de insertar estas propiedades son las clases y la etiqueta style. A continuación, te explicamos cómo funciona cada una de estas formas de aplicar estilos en componentes.

className

En React podemos pasarle un atributo className a cualquier elemento. Al igual que en HTML, estas clases son una forma de identificar nuestro elemento. A continuación, te presentamos un ejemplo de cómo se inserta este atributo en nuestro código:

render ( ) {

return <span className = ‘menu navigation.menu’>Menu</span>

Entonces, podremos utilizar el atributo className junto a un poco de código CSS para añadir estilos en React.

Si utilizas esta manera de añadir estilos en React, te recomendamos la librería classnames, que puedes instalar usando su npm. Esta librería nos da la posibilidad de usar una función para crear clases complejas. Es decir, facilita el proceso de unir más de una clase. Con ella, podemos pasar distintos tipos de argumentos por una función y obtener siempre el className que queremos insertar en nuestro componente. Para explorar más la funcionalidad de esta librería, te invitamos a leer este post en Github sobre classnames.

Ten presente que la posibilidad de insertar archivos CSS para usar estilos en React no es una funcionalidad propia de esta librería. Para habilitar esta función, te sugerimos utilizar create-react-app, una herramienta que crea un ambiente predeterminado en el que podemos usar CSS modules, Sass y post.css.

style

Otra forma de insertar estilos en React es a través del atributo style. Con este atributo podemos pasar un objeto de estilos inline que contenga atributos en la nomenclatura camelCase. A continuación, te ponemos un ejemplo de este método:

const divStyle = {

color: ‘blue’,

backgroundImage: ‘url’ (‘+ imgUrl + ‘)’,

}

function HelloWorldComponent () {

return <div style = {divStyle}>Hello World!</div>;

}

Como puedes ver en las líneas de código anteriores, podemos insertar el atributo style directamente dentro del elemento que nos devuelve nuestro componente. Este atributo abre una ventana a JavaScript con el uso de las llaves y, dentro de él, llamamos al objeto que contiene nuestros estilos.

¿Qué sigue?

Ahora que sabes qué son y cómo funcionan los estilos en React, ¡es el momento de que los utilices en tus propios proyectos! Para aprender cómo desarrollar todo tipo de proyectos de programación web, no solo en React sino también en JavaScript, CSS y HTML, entre muchas otras cosas, te invitamos a participar en nuestro Desarrollo Web Full Stack Bootcamp. ¡No te lo pierdas!

👉 Descubre más del Desarrollo Web Full Stack Bootcamp ¡Descarga el temario!

👉 Prueba el Bootcamp Gratis por una Semana ¡Empieza ahora mismo!

👉 Conoce nuestros otros Bootcamps en Programación y Tecnología

[email protected]

¿Sabías que hay más de 40.000 vacantes para desarrolladores de software sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso! 

¿Sabías que hay más de 40.000 vacantes para desarrolladores web sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso!