¿Cómo maquetar en Gatsby? Componentes y Props
En la sesión anterior tuvimos la oportunidad de conocer Gatsby y entender cómo poder iniciar una aplicación básica con este framework de React. También pudimos ver como integrar una plantilla existente, y Bootstrap y sus estilos en nuestro sistema.
Concluyendo aquél artículo mencionamos que una de las características más importantes de Gatsby y/o React son sus componentes. De hecho, el centro de React, y por consecuencia de Gatsby son los componentes.
El objetivo del artículo de hoy es que entiendas qué son los componentes de Gatsby y/o React y de qué forma representan un beneficio para tu desarrollo de aplicaciones web, además de responder a la pregunta “¿Cómo dividir mi plantilla en componentes?”
Antes de seguir, recomiendo que leas el artículo sobre “Cómo maquetar en Gatsby? Una breve introducción”. Si quieres, también puedes saltar directamente a la sección de cómo dividir tu código en pequeños componentes.
¿Qué son componentes?
Un componente de React es una clase o función de JavaScript que puede aceptar entradas, en el lenguaje de React, props o propiedades, y que retorna un elemento que describe como una sección de la interfaz de usuario (UI) debe aparecer en pantalla.
Puedes pensar en componentes como bloques de construcción que te permiten dividir la interfaz de usuario en piezas independientes y reutilizables.
¿Por qué son importantes las props?
Las props o propiedades de React son importantes, porque permiten pasar datos de componente a componente, entre otras cosas.
React también utiliza clases ES6. Imagina, por ejemplo un componente genérico Button (botón), con sus estilos. Quieres utilizar el mismo botón en diferentes sitios, pero lo único que te interesa cambiar es la etiqueta del botón.
De una forma muy resumida y básica, en React/Gatsby podrías tener lo siguiente:
Cómo puedes ver, tu componente Button con la clase de CSS “mi-estilo”, puede ser reutilizado en diferentes componentes, y además puedes darle el “name”, la propiedad name que quieras.
¿Por qué usa Gatsby los componentes de React?
Todo en Gatsby se desarrolla usando componentes (de React). Gatsby - siendo una herramienta “casi React” se beneficia de la arquitectura de componentes de React, pues esta arquitectura simplifica el desarrollo de sitios web grandes, fomentando abstracciones más claras, la modularidad y la reusabilidad como hemos visto anteriormente.
Diferentes tipos de componentes
Los diferentes tipos de componentes de Gatsby te permiten tener o desarrollar funcionalidades de forma rápida. Te dejo algunos ejemplos:
Componentes de páginas
Si te acuerdas de la estructura inicial que Gatsby crea, sabes que existe una carpeta pages dentro de src. Esta carpeta es importante para Gatsby, pues, si por ejemplo, quieres crear una nueva página itdo.com/servicios, en Gatsby solamente tienes que crear un fichero src/pages/servicios.js o src/pages/servicios.jsx. Es buena idea que dentro del fichero haya algún componente de React. ;)
Componentes de plantillas de páginas
Entraremos en detalle sobre esta característica en próximas sesiones, pero Gatsby te permite crear páginas mediante programación, usando “componentes de plantillas de páginas”. Esto es particularmente interesante para cuando tengas que utilizar GraphQl para hacer consultas, generar “slugs” y crear las páginas para tu blog.
Componente HTML
El fichero “html.jsx”/”html.js” que existe por defecto en Gatbsy es responsable por todo lo que hay dentro de <body /> y es suficiente para tu sitio web. Si por alguna razón extraordinaria necesitas modificar los metadatos de <head>, o la estructura general del documento, puedes copiar el fichero que existe en Gatsby por defecto a tu carpeta src:
$> cp .cache/default-html.js src/html.js
Ejemplo práctico. ¿Cómo dividir la plantilla?
Estoy convencido que aún estás leyendo este artículo gracias a esta sección. Por lo tanto, ¿cómo dividir nuestro componente de (la) página inicial en varios componentes?
Para que este artículo no se haga demasiado pesado, te explico como hacerlo en una hipotética sección de nuestra página web a que llamaré “Nav”. Si tienes alguna duda en tus siguientes implementaciones, p.e., header, footer, logo, etc... lo comentamos aquí. ¿Qué te parece?
Dividir mi plantilla en pequeños componentes
Si bien recuerdas, la plantilla de "PIPE" que estamos utilizando tiene un elemento <nav />. Lo que queremos ahora es que este elemento esté en su propio componente para no reescribir el código en diferentes páginas de nuestra aplicación. Además, si es necesario también queremos pasarle alguna prop según la página que estamos navegando. Lo siguiente es lo que debes hacer:
En la carpeta components, creas un nuevo fichero de nombre nav.js y añades la estructura básica de tu componente. Por ejemplo:
React utiliza el concepto de fragmentos que te permiten agrupar un listado de elementos sin que tengas que añadir nodos extras al DOM. Puedes usar “<></>” como si fueran otros elementos, por ejemplo “<div></div>“. Eso sí, “<></>” no soporta claves o atributos.
El siguiente paso es copiar el código HTML de index.js, o directamente de "PIPE", introducirlo en nav.js y eliminar este fragmento de index.js.
Lo siguiente que debes hacer es llamar tu nuevo componente en index.js y declararlo para que se pueda mostrar por pantalla. Guarda los cambios y espera que el hot-reloading haga su trabajo.
Si todo ha funcionado bien, a partir de este momento tu menú de navegación tiene su propio componente donde puedes hacer cambios y verlos plasmados en todos los sitios donde llames <Nav />
Props
¿Qué pasa si quiero añadir alguna palabra al lado del logo?
Pues, ¡las props vienen al rescate! Por ejemplo, desde index.js puedes enviar la prop pais con el valor “Perú”:
Y en el componente Nav declarar esta prop { props.pais }.
Guarda el fichero, ¡y verás el resultado por pantalla!
Naturalmente nos hemos dejado algunos detalles, pero en producción, o en una aplicación "real" debes tener especial atención si la propiedad existe, si está definida, o otros posibles bugs de implementación. Pero creo que ya puedes tener una idea general sobre componentes.
Asimismo, puedes crear otros componentes aún más simples de Nav, que hagan tareas más específicas. ¡ Y eso es todo por hoy!
Conclusión
Como has podido ver, conocer los componentes y props de Gatsby/React es muy útil para maquetar tu sitio web. Tener componentes más pequeños e independientes te permite no solamente tener un código de frontend más organizado y fácil de leer, pero también te permite desarrollar de forma óptima y más rápida ya que puedes reutilizar piezas que hayas creado para el efecto.
¿Cómo has visto la utilización de componentes y propiedades (props) en Gatsby? Utilizas Gatsby en tus proyectos? ¡Cuéntanos tu experiencia!
Fotografía: www_slon_pics en Pixabay