Componentes de diseño en React

React es una fantástica biblioteca de JavaScript para crear interfaces de usuario ricas. Proporciona una excelente abstracción de componentes para organizar sus interfaces en un código que funcione bien, pero ¿qué pasa con la apariencia de la aplicación? Hay varias formas de diseñar los componentes de React, desde usar hojas de estilo hasta usar bibliotecas de estilo externas.

El diseño de los componentes de React a lo largo de los años ha mejorado y se ha vuelto mucho más fácil con diversas técnicas y estrategias. En este tutorial, aprenderemos cómo diseñar componentes de React usando cuatro estrategias de estilo principales, con ejemplos sobre cómo usarlas. En el proceso, explicaré las desventajas y ventajas de estas estrategias de diseño y, al final de este tutorial, sabrás todo sobre el diseño de componentes de React y cómo funcionan junto con los diversos métodos que se pueden usar para diseñar estos componentes. .

Nota: Sería bueno tener un conocimiento básico de ReactJS y CSS para este tutorial.

¿Qué significa 'estilo' en aplicaciones React?

La razón por la que diseñarás tu aplicación React no es diferente de la que tienes en mente al diseñar otros sitios web o aplicaciones web en las que has estado trabajando. El estilo en las aplicaciones React describe cómo se muestran los componentes o elementos de React en la pantalla o en cualquier otro medio.

La esencia de crear interfaces de usuario con React es cuán flexible es construir estas UI, especialmente como componentes, y también diseñarlas para brindarnos una excelente apariencia y experiencia. Es importante saber que cualquier estrategia de estilo que decida utilizar sigue siendo CSS: está escribiendo CSS como siempre lo ha hecho. La diferencia es que las estrategias (que veremos) ayudan a facilitar el proceso debido a la singularidad de React.

Principales estrategias de estilo en React

Hay varias estrategias a seguir al planificar el diseño de los componentes de React; estas estrategias también han aumentado y evolucionado a lo largo de los años. En este tutorial, hablaremos sobre las estrategias de estilo más populares y modernas, y cómo usarlas para diseñar nuestros componentes de React. Estas estrategias de estilo incluyen:

1. Hojas de estilo CSS y SCSS
   Esto implica el uso de hojas de estilo separadas, como nuestra forma convencional de diseñar nuestros sitios web HTML, ya sea con CSS o un preprocesador de CSS llamado SASS .
2. Módulos CSS
   Un módulo CSS es un archivo CSS en el que todos los nombres de clases y animaciones tienen un ámbito local de forma predeterminada.
3. styled-components
   styled-components es una biblioteca para React y React Native que le permite usar estilos a nivel de componente en su aplicación que están escritos con una mezcla de JavaScript y CSS usando una técnica llamada CSS-in-JS .
4. JSS
   JSS es una herramienta de creación de CSS que le permite utilizar JavaScript para describir estilos de forma declarativa, libre de conflictos y reutilizable. Puede compilarse en el navegador, en el lado del servidor o en el momento de la compilación en Node.

En la siguiente sección de este tutorial, hablaremos de cada una de estas estrategias de estilo con ejemplos de su sintaxis.

1. Hojas de estilo CSS y SASS

Las hojas de estilo CSS o SCSS son una estrategia de estilo que implica el uso de hojas de estilo CSS o SASS externas que se pueden importar a sus componentes de React dependiendo de dónde necesite aplicar el estilo.

Por ejemplo, tenemos un archivo SASS de estilos llamado que Box.scssnecesitamos usar en un componente llamado Box.js, a continuación se muestra el código de nuestro archivo SASS.

// Box.scss.Box {  margin: 40px;  border: 5px black;}.Box_content {  font-size: 16px;  text-align: center;}

Para hacer uso de este estilo dentro de nuestro componente Box, todo lo que necesitamos hacer es importar el archivo SASS directamente a nuestro Box.jscomponente de esta manera:

import React from 'react';import './Box.css';const Box = () = (  div className="Box"    p className="Box_content" Styling React Components /p  /div);export default Box;

Después de crear los estilos e importarlos al Box.jsarchivo, podemos configurar el classNameatributo para que coincida con lo que tenemos en la hoja de estilos.

Al utilizar esta estrategia, también puede aprovechar marcos existentes como; Bulma, Bootstrap, etc. Estos marcos le brindan clases y componentes existentes que puede conectar a su aplicación React sin diseñar cada aspecto de su aplicación.

Beneficios de usar hojas de estilo CSS y SASS

1. Es mucho más popular que el resto de estrategias de diseño, por lo que hay un montón de recursos útiles cuando te encuentras con un error.
2. Almacenamiento en caché y rendimiento
   Los archivos CSS estándar son fáciles de optimizar para el navegador, almacenan en caché los archivos localmente para visitas repetidas y, en última instancia, aumentan el rendimiento.
3. CSS y SASS universales y sin opiniones
   son universales y no tienen opinión sobre cómo representar su interfaz de usuario, lo que los convierte en una excelente opción para equipos que tienen CSS heredado y están migrando a un nuevo marco o reconstruyendo su sitio web o producto.
4. Iterar rápidamente un nuevo diseño
   Puede extraer muy fácilmente toda la hoja de estilo y crear una nueva para actualizar la apariencia de su aplicación sin tener que buscar en cientos de componentes potenciales.
5. Marcos CSS Los marcos
   CSS son útiles si es un desarrollador nuevo o desea trabajar rápidamente en un prototipo sin tener que profundizar en la escritura de sus propias hojas de estilo completas. Los marcos CSS le proporcionarán los elementos básicos para hacer despegar su idea. Algunos de estos marcos incluyen Bootstrap, Bulma, Semantic UI, Materialize.

Deficiencias del uso de hojas de estilo CSS y SASS

1. Legibilidad
   Si no está estructurada adecuadamente, una hoja de estilo CSS o SASS puede volverse larga y difícil de navegar a medida que la aplicación se vuelve compleja.
2. El CSS heredado puede perdurar durante años
   La mayoría de las veces, estas hojas de estilo realmente grandes pueden volverse tan complejas y largas que limpiar estilos antiguos, desactualizados o incluso no utilizados puede ser una molestia.

Nota : “Sass tiene dos sintaxis. La sintaxis más utilizada se conoce como "SCSS" (por "Sassy CSS") y es un superconjunto de sintaxis CSS. Esto significa que cada hoja de estilo CSS válida también es SCSS válida. Los archivos SCSS utilizan la extensión .scss.
La segunda sintaxis, más antigua, se conoce como sintaxis indentada (o simplemente “.sass”). Inspirado en la concisión de Haml, está destinado a personas que prefieren la concisión a la similitud con CSS. En lugar de corchetes y punto y coma, utiliza sangría de líneas para especificar bloques. Los archivos con sintaxis sangrada utilizan la extensión .sass”.

Módulos CSS

Un módulo CSS es un archivo CSS en el que todos los nombres de clases y animaciones tienen un ámbito local de forma predeterminada. Cuando se utilizan módulos CSS, cada componente de React recibe su propio archivo CSS, que se limita únicamente a ese archivo y componente.

La belleza de los módulos CSS ocurre en el momento de la compilación, cuando los nombres de clases locales, que pueden ser súper simples sin conflictos, se asignan directamente a los generados automáticamente y se exportan como un objeto JS literal para usar en React.

Podemos utilizar módulos CSS en nuestras aplicaciones React importando el archivo directamente al archivo componente.

Por ejemplo, el siguiente código es un ejemplo de cómo utilizar un módulo CSS en un componente de React.

//Box.css :local(.container) {   margin: 40px;   border: 5px dashed pink; } :local(.content) {   font-size: 15px;   text-align: center; }

:local(.className)se usa cuando usa el texto estándar de create-react-app debido a las configuraciones del paquete web.

Al usar webpack, puede agregar el cargador y también incluir el módulo en webpack.config.jsotro para que los módulos CSS funcionen con Webpack.

test: /.css$/,loader: 'style!css-loader?modulesimportLoaders=1localIdentName=[name]__[local]___[hash:base64:5]' }

Además, para hacer uso de este módulo CSS dentro de nuestro componente Box, necesitamos importar el archivo del módulo directamente a nuestro Box.jscomponente y usar en classNamelugar de styleprop para acceder al estilo de esta manera:

import React from 'react';import styles from './Box.css';const Box = () = (  div className={styles.container}    p className={styles.content} Styling React Components /p  /div);export default Box;

stylesAquí hay un objeto que contiene los estilos que creamos en Box.css. Este objeto contendrá las clases; containery contentque se corresponda con sus respectivos estilos. Para hacer uso de ellos, asignamos los elementos classNamea la clase apropiada que tenemos en Box.css.

Beneficios de usar módulos CSS

1. CSS modular y reutilizable,
2. No más conflictos de estilo,
3. Dependencias explícitas,
4. Ámbito local,
5. Dependencias claras,
6. Sin duplicación de código en caso de SSR,
7. Sin costos adicionales en la carga útil JS,
8. Variables, compartir variables en CSS y exponerlas a JavaScript.

Deficiencias del uso de módulos CSS

1. Herramientas de compilación adicionales (por ejemplo, paquete web).
2. Mezclar módulos CSS y clases CSS globales es engorroso.
3. Cuando se Referencerealiza un módulo CSS indefinido, se resuelve como indefinido sin previo aviso.
4. Usar el stylesobjeto siempre que se construya a classNamees obligatorio.
5. Solo permite el uso de nombres de clases camelCase CSS .

styled-components

styled-componentses una biblioteca para React y React Native que le permite usar estilos a nivel de componente en su aplicación que están escritos con una combinación de JavaScript y CSS.

Fue creado con el mismo método de operación de los Módulos CSS , una forma de escribir CSS que tiene como alcance un solo componente y no es accesible para ningún otro elemento de la página o incluso componente.

styled-componentspermite a los desarrolladores de React escribir CSS simple en componentes de React sin tener que preocuparse por el conflicto de nombres de clases.

Por ejemplo, si necesitamos implementar un estilo en nuestro Box.jsarchivo usando componentes con estilo, primero necesitaríamos realizar los siguientes pasos:

• Primero, necesitamos instalar styled-componentsla biblioteca ejecutando npm install styled-components --save.
• Luego necesitamos importar la biblioteca de componentes con estilo a nuestro componente escribiendo import styled from 'styled-components';.
• Ahora podemos crear una variable seleccionando un elemento HTML particular donde almacenamos nuestras claves de estilo.
• Luego usamos el nombre de nuestra variable que creamos como envoltorio alrededor de nuestros elementos JSX.

El siguiente código es una implementación de todos los pasos que mencionamos anteriormente.

import React from 'react';import styled from 'styled-components';const Box = styled.div`  margin: 40px;  border: 5px black;`;const Content = styled.p`  font-size: 16px;  text-align: center;`;const Box = () = (  Box    Content Styling React Components /Content  /Box);export default Box;

En el código anterior, importamos el styledobjeto desde styled-components, que utiliza literales de plantilla etiquetados para diseñar su componente. Luego creamos una variable que mantendría nuestro estilo y también actuaría como un contenedor alrededor del contenido, es por eso que tenemos las etiquetas Boxy Content, en estas variables, lo asignamos al styledobjeto más el elemento HTML al que queremos darle estilo y luego seguido por el archivo adjunto. estilos para el elemento HTML. Para usar las variables que creamos para diseñar, todo lo que necesitamos hacer es envolver nuestro JSX o contenido entre ellos como etiquetas.

Beneficios de utilizar componentes con estilo

1. La coherencia
   styled-components le facilita la publicación de un componente de React en NPM. Estos componentes se pueden personalizar mediante accesorios y/o extendiéndolos styled(Component)y sin chocar con los selectores de CSS.
2. Sintaxis de Sass lista para usar
   Puede obtener la sintaxis de la marca SASS lista para usar sin tener que instalar o configurar SASS o cualquier herramienta de compilación adicional.
3. Estilo dinámico
   Puede utilizar accesorios para cambiar dinámicamente los estilos de cualquier forma que le resulte natural a cualquiera que se sienta cómodo con React.
4. Temas
   Al usar la API de contexto de React, los componentes con estilo ofrecen un objeto ThemeContextal que puede pasar un objeto de tema directamente, haciéndolo muy accesible en cualquiera de sus componentes y, de forma predeterminada, se puede interpolar en sus definiciones con estilo.

Deficiencias del uso de componentes con estilo

1. Los desarrolladores de Learning Curve
   Frontend que ya se sienten cómodos escribiendo CSS tradicional tendrán que aprender una forma diferente de diseñar que sea diferente de cómo se escribe CSS tradicional.
2. La integración con CSS heredado puede resultar dolorosa.
   Si está utilizando una biblioteca de interfaz de usuario como Material UI o incluso CSS tradicional, integrar componentes con estilo junto con ellos puede resultar confuso para localizar y depurar estilos.
3. Performance
   styled-components convierte todas las definiciones de estilo en su componente React en CSS simple en el momento de la compilación e inyecta todo en las styleetiquetas en el encabezado de su index.htmlarchivo. Esto afecta el rendimiento en el sentido de que no sólo aumenta el tamaño de nuestro archivo HTML lo que puede tener un impacto en el tiempo de carga, sino que tampoco hay forma de fragmentar el CSS de salida.

jss

JSS es una herramienta de creación de CSS que le permite utilizar JavaScript para describir estilos de forma declarativa, libre de conflictos y reutilizable. Puede compilarse en el navegador, en el lado del servidor o en el momento de la compilación en Node. JSS es una nueva estrategia de estilo que no se ha adaptado tanto. Es independiente del marco y consta de múltiples paquetes: el núcleo, complementos, integraciones de marco y otros.

JSS tiene adaptadores API de terceros que se pueden usar para escribir estilos similares a JSS pero, de manera diferente, estos adaptadores API de terceros incluyen:

• Styled-JSS
  Este es un adaptador API de componentes con estilo.
• Glamour-JSS
  CSS con sabor a glamour con JSS bajo el capó.
• Afrodita-JSS
  Afrodita como API.

Reaccionar-JSS

React-JSS hace uso de JSS con React usando la nueva API Hooks. JSS y el ajuste preestablecido predeterminado ya están integrados en la biblioteca. Según los documentos oficiales de React-JSS , los siguientes son los beneficios de usar React-JSS en lugar de la biblioteca principal JSS en sus componentes de React.

• Temas dinámicos
  Esto permite la propagación de temas basados ​​en el contexto y actualizaciones en tiempo de ejecución.
• Extracción de CSS crítico
  Se extrae el único CSS de los componentes renderizados.
• Las hojas de estilo de evaluación diferida
  se crean cuando se monta un componente y se eliminan cuando se desmonta.
• La parte estática de una hoja de estilo se compartirá entre todos los elementos.
• Los valores y reglas de las funciones se actualizan automáticamente con cualquier dato que usted pase useStyles(data). Puede pasar accesorios, estado o cualquier cosa del contexto, por ejemplo.

El siguiente código es un ejemplo de cómo se utiliza React-JSS.

import React from 'react'import {render} from 'react-dom'import injectSheet, { ThemeProvider } from 'react-jss'const styles = (theme) = ({  wrapper: {    padding: 40,    background: theme.background,    textAlign: 'center'  },  title: {    font: {      size: 40,      weight: 900,    },    color: props = props.color  },  link: {    color: theme.color,    ':hover': {      opacity: 0.5    }  }})const Comp = ({ classes }) = (  div className={classes.wrapper}    h1 className={classes.title}Hello React-JSS!/h1    a      className={classes.link}      href="https://cssinjs.org/react-jss"      traget="_blank"          See docs    /a  /div)const StyledComp = injectSheet(styles)(Comp)const theme = {  background: '#aaa',  color: '#24292e'}const App = () = (  ThemeProvider theme={theme}    StyledComp color="red"/  /ThemeProvider)render(App /, document.getElementById("root"))

En el código anterior, que es algo similar al uso de componentes con estilo, importamos injectSheety ThemeProviderdesde la react-jssbiblioteca. Es ThemeProviderun componente de alto orden en React, que pasa el objeto del tema por el árbol de React mediante el uso de contexto. Contendrá el tema raíz del componente. Mientras injectSheetse utiliza para inyectar la hoja de estilo que hemos creado en este caso stylesen el componente principal.

const Comp = ({ classes }) = (  div className={classes.wrapper}    h1 className={classes.title}Hello React-JSS!/h1    a      className={classes.link}      href="https://cssinjs.org/react-jss"      traget="_blank"          See docs    /a  /div)

El código anterior es el componente principal de React que no ha sido inyectado con el objeto de estilos que hemos creado, contiene el código principal para nuestro componente de React y se le aplicará estilo cuando lo inyectemos con el objeto de estilos que hemos creado.

const StyledComp = injectSheet(styles)(Comp)

La línea de código anterior inyecta los estilos que hemos creado en el componente para el que creamos la injectSheet()función.

const theme = {  background: '#aaa',  color: '#24292e'}

El código anterior contiene el objeto de tema que se pasaría al ThemeProviderHOC a través del contexto y actúa como el tema raíz de nuestro componente.

const App = () = (  ThemeProvider theme={theme}    StyledComp color="red"/  /ThemeProvider)

En esta parte del código, lo que estamos haciendo aquí es usar ThemeProviderHOC, estamos renderizando nuestro componente en el que hemos inyectado la hoja de estilo que creamos StyledComp color= "red"/.

Al final del renderizado, esto es lo que se mostrará en su navegador:

Beneficios de JSS

1. Alcance local
   JSS admite el alcance local, llevándolo al siguiente nivel al automatizarlo, lo que conduce a un alto nivel de previsibilidad.
2. Encapsulación
   La encapsulación facilita el mantenimiento y elimina errores, ya que puede modificar todo el código y estilo relacionados con los componentes en el mismo lugar, sin tener que preocuparse por cambiar inesperadamente otras partes de la aplicación.
3. Reusabilidad
   Los componentes son reutilizables, por lo que solo tiene que escribirlos una vez y luego puede ejecutarlos en todas partes manteniendo también su estilo.
4. Estilo dinámico
   Puede utilizar accesorios para cambiar dinámicamente los estilos de cualquier forma que le resulte natural a cualquiera que se sienta cómodo con React.

Deficiencias de JSS

1. Curva de aprendizaje
   Aprender JSS puede ser muy complicado, especialmente para los desarrolladores frontend que ya están acostumbrados a escribir CSS tradicional.
2. Capa adicional de complejidad
   Poner en uso una biblioteca CSS-in-JS agrega una capa adicional a su aplicación React, que a veces puede ser innecesaria.
3. Legibilidad del código
   Los selectores personalizados o generados automáticamente pueden ser muy difíciles de leer, especialmente cuando se utilizan las herramientas de desarrollo de su navegador para depurar.

Conclusión

Cada uno de estos tiene sus ventajas y desventajas, y todo depende de sus preferencias personales/de empresa y de la complejidad de su aplicación. Además, sea cual sea la estrategia de estilo que decida utilizar, sigue siendo básicamente CSS. Puedes escribir CSS como siempre lo has hecho, pero React y otras bibliotecas ofrecen soluciones que también pueden ayudar con el estilo.

Espero que hayas disfrutado trabajando en este tutorial. Siempre puedes leer más sobre cómo diseñar componentes de React en las referencias siguientes. Si tienes alguna pregunta, deja un comentario a continuación y estaré encantado de responder a todas y cada una de ellas.

Recursos

• JSS (documentos)
• “ Estilismo en React ”, Jacob Evans, V School
• “ Componentes estilizados ”, Flavio Copes
• " Cuatro formas de diseñar componentes de React ", Agata Krzywda
• “ CSS-in-JS 101: todo lo que necesitas saber ”, estéreobooster, GitHub
• “ Componentes con estilo frente a hojas de estilo CSS ”, Luke Smetham, Stream.io
• “ Mejores prácticas para diseñar componentes de React ”, Chris Parker, Pluralsight
• “ Componentes con estilo frente a hojas de estilo CSS ”, Luke Smetham, Stream.io

(ks, ra, yk, il)Explora más en

• Reaccionar
• javascript
• Herramientas