Cómo lograr la composición de diseño en React

¡Hola, React Summit, y bienvenidos a mi charla sobre cómo lograr la composición de diseño en React. Mi nombre es Travis Waithmer, y pueden encontrarme en Twitter, en Travis Waithmer, todo en mi cuenta en Canvas, o en mi blog en non-traditional.dev.

Ahora, un poco sobre mí, trabajo para Plex, que es una plataforma de transmisión en línea que te permite transmitir tanto tus video de tus medios personales como video a pedido que curamos para ti. Y estamos contratando, por supuesto, Plex.tv slash careers. También soy el creador y mantenedor de Bedrock Layout Primitives. Es una biblioteca de diseño diseñada para facilitar el diseño de tus aplicaciones de React en la web. Y ese es el punto de esta charla, ¿cómo logramos la composición de diseño? ¿Cómo usamos el modelo de composición de React en nuestro diseño web?

Bueno, veamos este diseño de héroe. Esto es probablemente algo que todos hemos hecho en algún momento de nuestra carrera. Ahora, una forma ingenua de abordar esto es abordarlo a nivel de componente. Tenemos un contenedor de héroe, tenemos un héroe superior, izquierdo, derecho, y así sucesivamente. Y así es como nos enseñan a escribir nuestro CSS, de arriba hacia abajo, con un enfoque basado en excepciones. Ahora, desafortunadamente, esto se vuelve muy difícil de escalar en nuestras aplicaciones, por lo que comenzamos a reutilizar nuestros componentes. Ahora, podemos tener metodologías de CSS que nos ayuden, pero solo nos llevan hasta cierto punto. Nos ayudan a administrar nuestras hojas de estilo a gran escala, pero cuando abordamos cada componente y, específicamente, el diseño de cada componente, como algo único, estamos perdiendo una oportunidad fantástica para reutilizar el diseño. Entonces, ¿qué tal si te dijera que el diseño de CSS se puede componentizar? ¿Qué tal si creamos algunas primitivas de diseño? Por ejemplo, ¿qué tal si tuviéramos un componente stack que apilara cosas una encima de la otra? Un inline que colocara las cosas en línea con espacios entre ellas? Un componente split que dividiera las cosas solo desde el lado izquierdo y derecho, de manera uniforme a lo largo del ancho del padre? ¿Qué tal si tuviéramos un componente cover que cubriera un área y centrara verticalmente los hijos en su interior? Y un componente frame que tomara cosas como medios, imágenes o cualquiera de sus hijos y lo forzara a tener una relación de aspecto? Ahora, individualmente, cada uno solo puede hacer una cosa única. Pero cuando los combinamos, podemos lograr ese mismo diseño de héroe. Podemos tener un inline, un par de stacks, un cover, frame, split. A través de una composición cuidadosa, ahora hemos logrado ese diseño de héroe. Pero eso no es todo. Podemos colocarlo en JSX de esta manera y simplemente usar la composición de React. Y luego podemos usar eso en nuestros otros componentes, como un formulario de registro, un feed de publicaciones de blog, una página de características. Todos estos pueden usar exactamente los mismos componentes, exactamente los mismos diseños, pero simplemente compuestos de diferentes maneras para lograr sus diseños individuales. Y eso es exactamente para lo que está diseñada la biblioteca de primitivas de diseño de Bedrock. Es el guión bajo de los diseños web. Luego podemos tomar... Y si quieres obtener más información, está en bedrocklayout.dev. Pero tomemos, por ejemplo, un simple componente stack. Probablemente todos tengamos algo como esto, donde necesitamos colocar un espacio consistente encima de otros elementos. Bueno, utilizando solo uno de los componentes de diseño de Bedrock, el stack, por ejemplo, podemos lograr este componente de suscripción. Ahora, otro patrón común es que necesitamos hacer cosas de manera similar a como funciona nuestro párrafo en la web.

Cuando nos quedamos sin espacio, nuestras palabras se envolverán automáticamente a la siguiente fila según la justificación que establezcamos. Ahí es donde entra en juego el componente de agrupación en línea. Podemos tener cosas en línea. Pero a medida que nos quedamos sin espacio, se envolverá automáticamente según la justificación.

Y esto es cómo se ve en el código. Tenemos nuestro componente de menú que obviamente compone ese lado derecho dentro de él. Y simplemente usamos un grupo en línea para colocar todos nuestros elementos de navegación en una fila, y luego se agruparán una vez que el ancho no permita que todos se mantengan en una sola fila.

¿Y qué tal algo mucho más complicado como una alineación de tarjetas? Esto parece bastante simple al principio, pero hay algunas cosas a tener en cuenta. Cada una de estas tarjetas debe ocupar la altura completa de la fila en la que se encuentra, pero el imagen y los encabezados de todas las tarjetas deben alinearse. Pero la descripción, sin importar su tamaño, debe estar centrada verticalmente dentro de cada una de estas tarjetas.

Además de eso, todas las imágenes deben mantener una relación de aspecto, y las imágenes deben ser recortadas para mantener esa relación de aspecto. Y finalmente, cada una de estas tarjetas debe estar en una cuadrícula receptiva, deben mantener un ancho de columna mínimo, y si no pueden mantener ese ancho de columna y mantenerlos todos en la misma fila, debemos comenzar a envolver y ajustar las columnas en consecuencia.

Entonces, en el código, podríamos escribir nuestro componente de tarjeta usando un cover, que nos permite especificar la parte superior y la inferior. En este caso, la parte superior es un h3 y la parte inferior utiliza un componente frame para forzar una relación de aspecto de 16 por 9, y luego tenemos nuestra descripción que estará centrada verticalmente dentro de ese cover. Y luego establecemos esa altura en 100% para que siempre sea la altura completa de la fila en la que se encuentra. Y luego usaremos todas estas tarjetas dentro de una cuadrícula y podemos establecer el ancho mínimo del elemento a 40 ch para que las columnas sean lo más anchas posible para incluir todo en su interior. Pero si no pueden caber todos y sin tener al menos una columna de 40 ch, entonces comenzará a envolver y optimizar eso. Eso es todo el tiempo que tengo para ustedes hoy. Pueden obtener más información en bedrock-layout.dev o pueden ir a mi curso en newline.co donde les enseño más sobre la composición de diseños en React. Gracias por su excelente tiempo y espero que tengan un excelente resto de su conferencia.