Header Ads Widget

Ticker

6/recent/ticker-posts

Técnicas de estilo simples para React Elements

 

Diseñar los componentes de React es una parte importante para crear una experiencia de usuario útil y significativa. Además, esos bloques de construcción determinan cómo se siente y se ve un producto o marca. En React, como en la mayoría de las cosas del desarrollo web, hay más de unas pocas formas de resolver el desafío. Veremos dos formas sencillas de abordar el problema de diseñar los componentes de React, sin embargo, es posible que encuentre formas que se ajusten más a sus preferencias. Vamos a diseñar algunos elementos en React ahora.


Agregar estilo con className

Dentro de JSX, podemos aplicar estilo a los elementos. Sin embargo, dado que JSX se compila en JavaScript, no puede usar la palabra clave de clase normal como atributo. En su lugar, debe usar className como atributo para diseñar cualquier elemento en JSX. JavaScript ya tiene su propia palabra clave de clase, por lo que si intenta usarla obtendrá errores. Así que agreguemos un estilo de insignia simple a nuestro elemento span. Elegiremos la información de la insignia para diseñar el tramo.

También agregamos un toque de margen usando m-1 para dar un efecto agradable.
ejemplo de reaccionar className

Ya que estamos en eso, usemos ese atributo className una vez más en el elemento del botón y hagamos que se vea mucho mejor. Probemos btn btn-primary para ver cómo se ve.

reaccionar className btn


Clases vs estilos

Ahora sabemos cómo aplicar clases a un elemento en JSX usando el atributo className. Este es un buen enfoque para el rendimiento y la facilidad de uso. La otra opción es utilizar el atributo de estilo en JSX, que acepta un objeto JavaScript simple como valor. Esto significa que no utiliza la sintaxis CSS, sino la versión de JavaScript en mayúsculas y minúsculas de la sintaxis CSS. Esto se puede hacer en línea o con un objeto distinto. Veamos los dos enfoques.


Estilos en línea

Observe que para el atributo de estilo hay llaves dobles {{}} . Esta no es una sintaxis especial. Las llaves exteriores le dicen a JSX que lo que viene es contenido dinámico. Si fuera estático, se podrían utilizar comillas dobles ”“ . Las llaves internas son la sintaxis de un objeto JavaScript. Ese objeto tiene pares de valores clave para indicar los estilos que se utilizarán.

ejemplo de estilo en línea de reacción


Estilos que utilizan un objeto JavaScript

Al igual que creamos un objeto de estado en el componente, también podemos crear una propiedad de estilos para completar con estilos de JavaScript. Este es un buen enfoque cuando puede tener varios pares clave-valor. El enfoque en línea se volverá complicado y difícil de razonar. Aquí hay un ejemplo con algunos estilos más agregados.

ejemplo de objeto de estilo de reacción


Aplicar clases dinámicamente en React

A medida que cambia el estado, a menudo desea cambiar el estilo visual de la página para un elemento determinado. De esta manera, puede usar una lógica simple para elegir si aplicar una clase u otra. Entonces, lo que haremos aquí es mirar el valor en la variable de conteo. Si el recuento tiene un valor de 0, aplicaremos una insignia amarilla; de lo contrario, aplicaremos un color informativo a la insignia. Así es como se hace.

Con el recuento en 10, obtenemos ese color de insignia informativa.
reaccionar renderizar clases dinámicamente

Establezca ese recuento en 0 y veremos el otro estilo. ¡Frio!

reaccionar renderizar clases dinámicamente ejemplo


Extraer lógica a un método

El código anterior funciona, pero limpiémoslo. Queremos eliminar la lógica del método render () para el estilo y ponerlo en su propio método en la clase Item. En el código de Visual Studio, podemos hacer esto automáticamente al resaltar las líneas que queremos refactorizar, hacer clic derecho y luego elegir 'Refactorizar ...'.
refactor de código de visual studio

Durante el proceso de refactorización, puede elegir un nombre para el nuevo método. Esto es lo que obtuvimos una vez que completamos este paso.

Esto mantiene limpio el método render () y hace que el código sea más fácil de leer.



Resumen de técnicas de estilo simples para React Elements

En este tutorial, vimos cómo diseñar algunos elementos simples de React usando un par de técnicas diferentes. La forma más fácil es simplemente incluir un excelente marco CSS como Bootstrap o Foundation y usar esas clases en combinación con el atributo className . Otra opción es hacer uso del atributo de estilo en combinación con objetos JavaScript que contienen pares clave-valor de estilos específicos.


Publicar un comentario

0 Comentarios