Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. React
Code

Construye un sistema de diseño reutilizable con React

by
Difficulty:IntermediateLength:MediumLanguages:

Spanish (Español) translation by Steven (you can also view the original English article)

React ha hecho mucho para simplificar el desarrollo web. La arquitectura basada en componentes de React facilita en principio la descomposición y reutilización del código. Sin embargo, no siempre está claro para los desarrolladores cómo compartir sus componentes entre proyectos. En este post, te mostraré algunas maneras de arreglar eso.

React ha hecho que sea más fácil escribir código magnífico y expresivo. Sin embargo, sin patrones claros para la reutilización de componentes, el código se vuelve divergente con el tiempo y se vuelve muy difícil de mantener. ¡He visto bases de código donde el mismo elemento de interfaz de usuario tenía diez implementaciones diferentes! Otro problema que pasa más a menudo es que los desarrolladores tienden a acoplar la interfaz de usuario y la funcionalidad del negocio de manera estrecha y más adelante tienen problemas cuando cambian la interfaz de usuario.

Hoy veremos cómo podemos crear componentes de interfaz de usuario que se pueden compartir y cómo establecer un lenguaje de diseño coherente en toda la aplicación.

Empecemos

Necesitas un proyecto de React vacío para comenzar. La forma más rápida de hacerlo es a través de create-react-app, pero se necesita un poco de esfuerzo para configurar Sass con esto. He creado una aplicación de esqueleto, que se puede clonar desde GitHub. También puedes encontrar el proyecto final de nuestro tutorial el repositorio de GitHub.

Para empezar, ejecuta yarn-install para extraer todas las dependencias y, a continuación, ejecuta yarn start para abrir la aplicación.

Todos los componentes visuales residirán bajo la carpeta design_system junto con los estilos correspondientes. Cualquier estilo o variable global estará bajo src/styles.

Project folder structure

Configurando la línea base del diseño

¿Cuándo fue la última vez que conseguiste un 'estás muerto para mí' de tus compañeros de diseño?, porque te equivocaste en medio pixel en el relleno, o porque no puedes diferenciar entre varios tonos de gris? (Me dicen que hay una diferencia entre #eee y #efefef, y tengo la intención de averiguarlo uno de estos días.)

Uno de los objetivos de la creación de una librería para la interfaz de usuario es mejorar la relación entre el equipo de diseño y desarrollo. Los desarrolladores front-end han estado coordinando con diseñadores de API desde hace un tiempo y son buenos para establecer contratos de API. Pero por alguna razón, nos elude mientras coordinamos con el equipo de diseño. Si lo piensas, solo hay un número finito de estados en los que puede existir un elemento de interfaz de usuario. Si vamos a diseñar un componente de Encabezado, por ejemplo, puede ser cualquier cosa entre h1 y h6 y puede ser negrita, cursiva o subrayada. Debe ser sencillo codificar esto.

El sistema de cuadrícula

El primer paso antes de embarcarte en cualquier proyecto de diseño es entender cómo se estructuran las cuadrículas. Para muchas aplicaciones, es sólo al azar. Esto conduce a un sistema de espaciado disperso y hace que sea muy difícil para los desarrolladores medir qué sistema de espaciado utilizar. ¡Así que elige un sistema! Me enamoré del sistema de cuadrícula de 4px - 8px cuando leí por primera vez sobre él. Pegarse a eso ha ayudado a simplificar una gran cantidad de problemas de estilo.

Comencemos configurando un sistema de cuadrícula básico en el código. Comenzaremos con un componente de aplicación que establece el diseño.

A continuación, definimos una serie de estilos y componentes para el contenedor.

Por último, definiremos nuestros estilos CSS en SCSS.

Hay mucho que desempacar aquí. Empecemos desde abajo. En el archivo variables.scss es donde definimos nuestras variables globales como el color y configuramos la cuadrícula. Ya que estamos usando la cuadrícula de 4px-8px, nuestra base será de 4px. El componente primario es Page y controla el flujo de la página. A continuación, el elemento de nivel inferior es Box, que determina cómo se representa el contenido en una página. Es sólo un div que sabe cómo renderizarse contextualmente.

Ahora, necesitamos un componente Container que junte varios div. Hemos elegido flex-box, de ahí es que hemos nombrado creativamente el componente como Flex.

Definición de un sistema de tipos

El sistema de tipos es un componente crítico de cualquier aplicación. Normalmente, definimos una base a través de estilos globales y anulamos cuando sea necesario. Esto a menudo conduce a incoherencias en el diseño. Veamos cómo se puede resolver fácilmente agregando a la librería de diseño.

En primer lugar, definiremos algunas constantes de estilo y una clase contenedora.

Luego, definiremos los estilos CSS que se usarán para los elementos de texto.

Se trata de un componente simple que es Text y representa los distintos estados de la interfaz de usuario en los que puede estar el texto. Podemos extender esto aún más para manejar micro-interacciones como la renderización de tooltips cuando el texto se recorta, o la renderización de una pepita diferente para casos especiales como correo electrónico, tiempo, etc.

Los átomos forman moléculas

Hasta ahora, hemos creado solo los elementos más básicos que pueden existir en una aplicación web, y no sirven de nada por sí solos. Vamos a ampliar este ejemplo mediante la creación de una ventana modal simple.

En primer lugar, definimos la clase de componente para la ventana modal.

Luego, podemos definir los estilos CSS para el modal.

Para los no iniciados, createPortal es muy similar al método render, excepto que representa los elementos secundarios en un nodo que existe fuera de la jerarquía DOM del componente primario. Fue introducido en React 16.

Usando el componente modal

Ahora que el componente está definido, veamos cómo podemos usarlo en un contexto del negocio.

Podemos usar el modal en cualquier lugar y mantener el estado cuando se llame. Es simple, ¿verdad? Pero aquí hay un error. El botón Cerrar no funciona. Eso es porque hemos construido todos los componentes como un sistema cerrado. Sólo consume los props que necesita y no tiene en cuenta el resto. En este contexto, el componente de texto omite el controlador de eventos onClick. Afortunadamente, solucionarlo es fácil

ES6 tiene una forma práctica de extraer los parámetros restantes como una matriz. Simplemente aplícalo y extiéndelos al componente.

Hacer que los componentes sean detectables

A medida que tu equipo va escalando, es difícil sincronizar a todos los miembros y avisarles sobre los componentes que están disponibles. Los Storybooks (libros de historia) son una excelente manera de hacer que tus componentes sean detectables. Vamos a configurar un componente básico de un libro de historia.

Para empezar, ejecuta:

Esto configura lo necesario para el libro de historia. A partir de aquí, es fácil hacer el resto de la configuración. Vamos a agregar una historia simple para representar diferentes estados de Type.

La superficie de la API es simple. storiesOf define una nueva historia, normalmente el componente. A continuación, puedes crear un nuevo capítulo con add, para mostrar los diferentes estados de este componente.

A simple Type storybook

Por supuesto, esto es bastante básico, pero los libros de historia tienen varios complementos que te ayudarán a agregar funcionalidad a tus documentos. ¿Y mencioné que tienen soporte para emojis? 😲�

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.