Técnicas de estilo simples para elementos de reacción

Diseñar sus componentes React es una parte importante de la creación de una experiencia de usuario útil y significativa. Además, esos componentes determinan la forma en que 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 simples de lidiar con el problema de diseñar los componentes de React, sin embargo, puede encontrar 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 un 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 insignia de información de la insignia para diseñar el lapso.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

import React, { Component } from "react";   class Item extends Component {   state = {     count: 0   };     render() {     return (       <React.Fragment>         <span className="badge badge-info m-1">{this.styleCount()}</span>         <button>Increment</button>       </React.Fragment>     );   }     styleCount() {     const { count } = this.state;     return count === 0 ? "No Items" : count;   } }   export default Item;

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

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.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

import React, { Component } from "react";   class Item extends Component {   state = {     count: 0   };     render() {     return (       <React.Fragment>         <span className="badge badge-info m-1">{this.styleCount()}</span>         <button className="btn btn-primary">Increment</button>       </React.Fragment>     );   }     styleCount() {     const { count } = this.state;     return count === 0 ? "No Items" : count;   } }   export default Item;

---

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 usar el atributo de estilo en JSX, que acepta un objeto JavaScript simple como valor. Esto significa que no usa 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 para un objeto JavaScript. Ese objeto tiene pares clave-valor para indicar los estilos que se utilizarán.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

import React, { Component } from "react";   class Item extends Component {   state = {     count: 0   };     render() {     return (       <React.Fragment>         <span           style={{ border: "7px solid lightgray" }}           className="badge badge-info m-1"         >           {this.styleCount()}         </span>         <button className="btn btn-primary">Increment</button>       </React.Fragment>     );   }     styleCount() {     const { count } = this.state;     return count === 0 ? "No Items" : count;   } }   export default Item;

---

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 llenar con estilos de JavaScript. Este es un buen enfoque cuando puede tener varios pares de valores clave. El enfoque en línea se volverá desordenado y difícil de razonar. Aquí hay un ejemplo con algunos estilos más agregados.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

import React, { Component } from "react";   class Item extends Component {   state = {     count: 0   };     styles = {     border: "7px solid lightgray",     fontSize: 15,     fontStyle: "italic"   };     render() {     return (       <React.Fragment>         <span style={this.styles} className="badge badge-info m-1">           {this.styleCount()}         </span>         <button className="btn btn-primary">Increment</button>       </React.Fragment>     );   }     styleCount() {     const { count } = this.state;     return count === 0 ? "No Items" : count;   } }   export default Item;

---

Aplicar clases dinámicamente en React

A medida que cambia el estado, a menudo desea cambiar el estilo visual en la página para un elemento dado. De esta forma, puede utilizar una lógica simple para elegir si desea 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. Aquí está cómo hacer eso.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

import React, { Component } from "react";   class Item extends Component {   state = {     count: 10   };     render() {     let classes = "badge m-3 badge-";     classes += this.state.count === 0 ? "warning" : "info";       return (       <React.Fragment>         <span className={classes}>{this.styleCount()}</span>         <button className="btn btn-primary">Increment</button>       </React.Fragment>     );   }     styleCount() {     const { count } = this.state;     return count === 0 ? "No Items" : count;   } }   export default Item;

Con el recuento en 10, obtenemos ese color de insignia informativa.

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

1 2 3

state = {     count: 0   };

---

Extrayendo 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 Visual Studio Code podemos hacer esto automáticamente resaltando las líneas que queremos refactorizar, hacer clic derecho y luego elegir 'Refactorizar ...'.

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.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

import React, { Component } from "react";   class Item extends Component {   state = {     count: 0   };     render() {     return (       <React.Fragment>         <span className={this.styleBadge()}>{this.styleCount()}</span>         <button className="btn btn-primary">Increment</button>       </React.Fragment>     );   }     styleBadge() {     let classes = "badge m-3 badge-";     classes += this.state.count === 0 ? "warning" : "info";     return classes;   }     styleCount() {     const { count } = this.state;     return count === 0 ? "No Items" : count;   } }   export default Item;

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

---

Leer más sobre Styling In React

• Estilo y CSS - React
• Cuatro formas de diseñar componentes de reacción
• Estilo React - SurviveJS
• Estilo en React: de CSS externo a componentes con estilo - SitePoint
• Creación de un sistema de diseño para ReactJS desde cero
• Poner al día CSS cuadrícula y Flexbox para su uso con Reaccionar

---

Resumen de técnicas de diseño simples para elementos de reacción

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 de valores clave de estilos específicos.