Cómo crear una página de destino para una librería con Gatsby y TypeScript

El autor seleccionó el Fondo de Diversidad en Tecnología para recibir una donación como parte del programa Write for DOnations .

Introducción

Las páginas de destino son páginas web que promocionan un producto o servicio y ofrecen un lugar al que los clientes pueden acceder cuando llegan a un sitio. Para las empresas, suelen ser el destino de los enlaces en los anuncios en línea y los correos electrónicos de marketing. El objetivo principal de una página de destino comercial es convertir a los visitantes en clientes potenciales. Por este motivo, crear una página de destino es una habilidad valiosa para un desarrollador web.

En este tutorial, crearás una página de destino con las siguientes dos tecnologías:

• Gatsby , un framework frontend basado en React diseñado para generar sitios web estáticos. Gatsby te permite generar páginas de destino rápidamente, lo que puede resultar útil al crear muchas páginas de destino para diferentes proyectos.

• TypeScript es un superconjunto de JavaScript que introduce tipos estáticos y comprobación de tipos en el momento de la compilación. TypeScript se ha convertido en una de las alternativas a JavaScript más utilizadas debido a su sólido sistema de tipado, que alerta a los desarrolladores sobre problemas en el código antes de que este entre en funcionamiento. En el caso de la página de destino, TypeScript ayudará a proteger contra datos tipificados de forma no válida para valores dinámicos, como el texto del discurso de venta o la entrada del formulario de registro.

La página de destino de ejemplo que creará en este tutorial promocionará una librería e incluirá los siguientes componentes comunes de una página de destino:

• Un encabezado para la librería
• Una imagen de héroe que se relaciona con la tienda.
• Un discurso de ventas con una lista de características/servicios
• Un formulario de registro por correo electrónico que se puede utilizar para agregar al lector a una lista de correo sobre la empresa.

El proyecto de muestra se verá como la siguiente imagen al final del tutorial:

Prerrequisitos

• Necesitará tener Node y npm instalados en su máquina para ejecutar un servidor de desarrollo y trabajar con paquetes. Este tutorial se ha probado con Node.js versión 14.17.2 y npm 6.14.13. Para instalar en macOS o Ubuntu 20.04, siga los pasos de Cómo instalar Node.js y crear un entorno de desarrollo local en macOS o la sección Instalación mediante un PPA de Cómo instalar Node.js en Ubuntu 20.04 .

• Necesitará tener instalada la herramienta CLI de Gatsby y crear un nuevo sitio de Gatsby a partir de la gatsby-starter-defaultplantilla. Siga el paso 1 de Cómo configurar su primer sitio web de Gatsby para iniciar un nuevo proyecto. En este tutorial, nos referiremos a este proyecto como bookstore-landing-page.

• Necesitarás configurar tu proyecto Gatsby para que funcione con TypeScript. Sigue los pasos 1 a 4 de Cómo configurar un proyecto Gatsby con TypeScript para instalar las dependencias adecuadas, crear un archivo nuevo tsconfig.jsony refactorizar el seo.tsxarchivo en TypeScript.

• Deberás estar familiarizado con los componentes de React y JSX , ya que Gatsby es un framework basado en React. Este tutorial también incluirá el uso de controladores de eventos en formularios . Puedes aprender estos conceptos y más en nuestra serie Cómo codificar en React.js .

Paso 1: refactorización de los componentes HeaderyLayout

En este paso, comenzarás por refactorizar los componentes existentes header.tsxdel layout.tsxproyecto bookstore-landing-pageque creaste en el tutorial de requisitos previos. Esto incluirá reemplazar las definiciones de tipo predeterminadas con interfaces de tipo personalizadas y revisar algunas consultas GraphQL. Una vez que hayas completado este paso, habrás completado el encabezado de tu página de destino con el título y la descripción de la página y habrás creado un componente de diseño para implementar componentes futuros.

Header

El Headercomponente mostrará el título y la descripción de su página en la parte superior de la ventana del navegador. Pero antes de refactorizar este componente, deberá abrir el gatsby-config.jsarchivo en el directorio raíz del proyecto para actualizar los metadatos del sitio. Más tarde, realizará una consulta gatsby-config.jsdesde el Layoutcomponente para recuperar estos datos.

Ábralo gatsby-config.jsen el editor de texto que prefiera. siteMetaDataEn el módulo exportado, cambie el valor de titley descriptionpor el nombre de la librería y un eslogan comercial, como se muestra en el siguiente código resaltado:

Página de inicio de la librería/gatsby-config.js

module.exports = {  siteMetadata: {    title: `The Page Turner`,    description: `Explore the world through the written word!`,    author: `@gatsbyjs`,  },  plugins: [    ...

Después de realizar estos cambios, guarde y cierre el gatsby-config.jsarchivo.

A continuación, dentro del bookstore-landing-page/src/componentsdirectorio, abre el header.tsxarchivo. Desde aquí, refactorizarás el Header /componente para que utilice la escritura TypeScript en lugar del valor predeterminado PropTypes. Realiza los siguientes cambios en tu código:

página de destino de la librería/src/components/header.tsx

import * as React from "react"import { Link } from "gatsby"interface HeaderProps {  siteTitle: string,  description: string}const Header = ({ siteTitle, description }: HeaderProps) = (  ...)export default Header

Eliminaste los objetos Header.PropTypesy después de la declaración y los reemplazaste con una interfaz de tipo personalizado , usando las propiedades y . Luego, agregaste a la lista de argumentos pasados ​​al componente funcional y los asignaste al tipo. La interfaz recién definida actuará como un tipo personalizado para los argumentos pasados ​​al componente desde la consulta GraphQL en el componente.Header.defaultPropsHeaderHeaderPropssiteTitledescriptiondescriptionHeaderPropsHeaderPropsHeader/Layout/

A continuación, en el JSX del Header /componente, cambie el estilo en la headeretiqueta de apertura para que el color de fondo sea azul y el texto esté alineado al centro. Manténgalo siteTitleen el componente incrustado Link/, pero agréguelo descriptiona una etiqueta separada h3/y asígnele un color de fuente blanco:

página de destino de la librería/src/components/header.tsx

...const Header = ({ siteTitle, description }: HeaderProps) = (  header    style={{      background: `#0069ff`,      textAlign: `center`,    }}      div      style={{        margin: `0 auto`,        maxWidth: 960,        padding: `1.45rem 1.0875rem`,      }}          h1 style={{ margin: 0 }}        Link          to="/"          style={{            color: `white`,            textDecoration: `none`,          }}                  {siteTitle}        /Link      /h1      h3 style={{        color: 'white'      }}        {description}      /h3    /div  /header)export default Header

Ahora tendrá estilo en línea cuando se pasen datos a este componente.

Guarde los cambios en el header.tsxarchivo, luego ejecútelo gatsby developy acceda a él localhost:8000en su navegador. La página se verá como la siguiente:

Tenga en cuenta que la descripción aún no se ha generado. En el siguiente paso, la agregará a la consulta GraphQL layout.tsxpara asegurarse de que se muestre.

Con el Header/componente listo, ahora puedes refactorizar el Layout/componente predeterminado para la página de destino.

Layout

El Layout /componente envolverá su página de destino y puede ayudar a compartir estilos y formatos para futuras páginas de su sitio.

Para comenzar a editar este componente, ábralo layout.tsxen su editor de texto. Elimine las definiciones de tipo predeterminadas al final del archivo y defina una nueva interfaz con el nombre de LayoutPropslas importinstrucciones. Luego, asigne el tipo de interfaz a los argumentos pasados ​​a Layout/:

página de destino de la librería/src/components/layout.tsx

/** * Layout component that queries for data * with Gatsby's useStaticQuery component * * See: https://www.gatsbyjs.com/docs/use-static-query/ */import * as React from "react"import { useStaticQuery, graphql } from "gatsby"import Header from "./header"import "./layout.css"interface LayoutProps {  children: ReactNode}const Layout = ({ children }: LayoutProps) = {  ...}default export Layout

La interfaz utiliza el ReactNodetipo que importó con la biblioteca React. Esta definición de tipo se aplica a la mayoría de los componentes secundarios de React, que es lo que Layout/se representa de forma predeterminada. Esto le permitirá definir una interfaz de tipo personalizado para Layout/.

A continuación, revise la consulta GraphQL predeterminada ubicada dentro del Layout/componente. Dentro del siteMetaDataobjeto, agregue el descriptionque se configuró en gatsby-config.js. Luego, como con siteTitle, almacene el valor obtenido en una nueva descriptionvariable:

página de destino de la librería/src/components/layout.tsx

...const Layout = ({ children }: LayoutProps) = {  const data = useStaticQuery(graphql`    query SiteTitleQuery {      site {        siteMetadata {          title          description        }      }    }  `)  const siteTitle = data.site.siteMetadata?.title || `Title`  const description = data.site.siteMetadata?.description || 'Description' ...

Ahora puedes pasar descriptioncomo propiedad al Header/componente en el JSX devuelto del diseño. Esto es importante porque descriptionse definió como una propiedad obligatoria en la HeaderPropsinterfaz:

página de destino de la librería/src/components/layout.tsx

...  return (          Header siteTitle={siteTitle} description={description}/      ...    /  )export default Layout

Guardar y salir del layout.tsxarchivo.

Como cambio final en su diseño, proceda layouts.cssa realizar un cambio de estilo centrando todo el texto en el centro bodyde la página:

página de destino de la librería/src/components/layout.css

.../* Custom Styles */body {  margin: 0;  -webkit-font-smoothing: antialiased;  -moz-osx-font-smoothing: grayscale;  color: hsla(0, 0%, 0%, 0.8);  font-family: georgia, serif;  font-weight: normal;  word-wrap: break-word;  font-kerning: normal;  -moz-font-feature-settings: "kern", "liga", "clig", "calt";  -ms-font-feature-settings: "kern", "liga", "clig", "calt";  -webkit-font-feature-settings: "kern", "liga", "clig", "calt";  font-feature-settings: "kern", "liga", "clig", "calt";  text-align: center;}...

Guarde y cierre el layout.cssarchivo, luego inicie el servidor de desarrollo y visualice su sitio en el navegador. Ahora encontrará el descriptionvalor representado en el encabezado:

Ahora que ha refactorizado los archivos base de su sitio Gatsby, puede agregar una imagen destacada a su página para hacerla visualmente más atractiva para los clientes.

Paso 2: Agregar una imagen principal

Una imagen principal es un elemento visual que respalda el producto o servicio en la página de destino. En este paso, descargará una imagen para la página de destino de su librería y la mostrará en el sitio mediante el StaticImage /componente del gatsby-plugin-imagecomplemento.

Nota : este proyecto utiliza la versión 3.9.0 de Gatsby, por lo que no podrá utilizar el gatsby-imagepaquete obsoleto. Este paquete fue reemplazado por gatsby-plugin-image. Este nuevo complemento, junto con la ayuda de gatsby-plugin-sharp, generará imágenes responsivas con funcionalidad de procesamiento.

Primero, descarga la imagen de la estantería de Unsplash , un sitio que proporciona imágenes que puedes usar libremente:

curl https://images.unsplash.com/photo-1507842217343-583bb7270b66 -o src/images/bookshelf.png

Este comando se utiliza curlpara descargar la imagen. La -obandera designa la salida, que ha configurado como un archivo con nombre bookshelf.pngen el imagesdirectorio.

Ahora abre el src/pages/index.tsxarchivo. La plantilla de inicio predeterminada de Gatsby ya tiene un StaticImage/componente, así que reemplaza los atributos para que apunten a la imagen que acabas de descargar:

página de destino de la librería/src/pages/index.tsx

import * as React from "react"import { StaticImage } from "gatsby-plugin-image"import Layout from "../components/layout"import Seo from "../components/seo"const IndexPage = () = (  Layout    Seo /    StaticImage      src="../images/bookshelf.png"      alt="Bookshelf hero image"    /  /Layout)export default IndexPage

Agregó un srcatributo para dirigir a Gatsby a la imagen correcta en su imagesdirectorio y luego agregó el altatributo para proporcionar texto alternativo para la imagen.

Guarde y cierre el archivo, luego reinicie el servidor de desarrollo. Ahora, la imagen de la estantería descargada aparecerá en el centro de su página:

Una vez que tu imagen ya esté representada en tu sitio, puedes continuar agregando contenido a la página.

Paso 3: Creación de un componente de características y presentación de ventas

Para la siguiente parte de la página de destino, creará un nuevo componente que contenga el discurso de venta de su librería. Esto explicará por qué sus clientes deberían acudir a su tienda.

Dentro de bookstore-landing-page/src/components, cree un nuevo archivo llamado salesPitchAndFeatures.tsx. Dentro del nuevo archivo, importe React, cree un nuevo componente funcional llamado SalesPitchAndFeatures, y expórtelo:

página de destino de la librería/src/components/salesPitchAndFeatures.tsx

import * as React from "react"const SalesPitchAndFeatures = () = {    /}export default SalesPitchAndFeatures

La interfaz de este componente incluirá una salesPitchpropiedad opcional de tipo string. También tendrá una lista de featuresde tipo Arraystring, que es obligatoria:

página de destino de la librería/src/components/salesPitchAndFeatures.tsx

import * as React from "react"interface SalesPitchAndFeaturesProps {  salesPitch?: string  features: Arraystring}...

Los datos de salesPitchy featuresse codificarán de forma fija en salesPitchAndFeatures.tsx, pero también puedes almacenarlos en otro lugar (como gatsby-config.js) y consultar los datos necesarios con GraphQL. El contentobjeto será del tipo SalesPitchAndFeaturesProps:

página de destino de la librería/src/components/salesPitchAndFeatures.tsx

...interface salesPitchAndFeaturesProps {    salesPitch?: string     features: Arraystring}const content: SalesPitchAndFeaturesProps = {    salesPitch: "Come and expand your world at our bookstore! We are always getting new titles for you to see. Everything you need is here at an unbeatable price!",    features: [     "Tens of thousands of books to browse through",    "Engage with the community at a book club meeting",    "From the classics to the newest publications, there's something for everybody!"]}const SalesPitchAndFeatures = () = {    return (                  ...

Tenga en cuenta que la salesPitchpropiedad es una cadena y la featurespropiedad es una matriz de cadenas, tal como las configura en su interfaz.

También necesitarás una función que muestre la lista de funciones. Crea una showFeatures(f)función.

página de destino de la librería/src/components/salesPitchAndFeatures.tsx

...const showFeatures: any = (f: string[]) = {    return f.map(feature = li{feature}/li)}const SalesPitchAndFeatures = () = {    return (                  ...

El argumento fque se pasa a showFeatureses del tipo Arraystringque sea coherente con la matriz de características del tipo string. Para devolver la lista transformada en JSX renderizado, se utiliza el .map()método array.

Complete la returndeclaración con su contenido, envuelto divscon nombres de clase asignados para darle estilo:

página de destino de la librería/src/components/salesPitchAndFeatures.tsx

...const SalesPitchAndFeatures = () = {    return (        div className='features-container'            p className='features-info'                {content.salesPitch}            /p            ul className='features-list'                {showFeatures(content.features)}            /ul        /div    )}export default SalesPitchAndFeatures

Guardar y cerrar salesPitchAndFeatures.tsx.

A continuación, ábralo layout.csspara agregar estilo a los nombres de clase agregados en el SalesPitchAndFeatures/componente:

página de destino de la librería/src/components/layout.css

....features-container {  border: 1px solid indigo;  border-radius: 0.25em;  padding: 2em;  margin: 1em auto;}.features-list {  text-align: left;  margin: auto;}

Esto agrega un borde alrededor del discurso de venta y la lista de características, luego agrega espacio entre los elementos para aumentar la legibilidad.

Guardar y cerrar layout.css.

Por último, renderizarás este componente en la página de destino. Ábrelo index.tsxen el src/pages/directorio. Agrega el SalesPitchAndFeatures/componente a los elementos secundarios del diseño renderizado:

página de destino de la librería/src/pages/index.tsx

import * as React from "react"import { StaticImage } from "gatsby-plugin-image"import Layout from "../components/layout"import SalesPitchAndFeatures from "../components/salesPitchAndFeatures"import SEO from "../components/seo"const IndexPage = () = (  Layout    SEO /    div style={{ maxWidth: `450px`, margin: ' 1em auto'}}      StaticImage        src="../images/bookshelf.png"        alt="Bookshelf hero image"      /      SalesPitchAndFeatures/    /div  /Layout)export default IndexPage

También agregó una divpara aplicar algo de estilo tanto a la imagen como al discurso de venta.

Guarde y salga del archivo. Reinicie su servidor de desarrollo y encontrará su propuesta de venta y la lista de características debajo de su imagen:

Ahora tienes un discurso de ventas en tu página de destino, que te ayudará a comunicar a los clientes potenciales por qué deberían visitar tu negocio. A continuación, crearás el componente final para la página de destino: un formulario de registro por correo electrónico.

Paso 4: creación de un componente de formulario de registro

Un botón de registro por correo electrónico es un componente común de las páginas de destino que permite al usuario ingresar su dirección de correo electrónico y registrarse para recibir más noticias e información sobre el producto o la empresa. Agregar esto a su página de destino le dará al usuario un paso práctico que puede seguir para convertirse en su cliente.

Para comenzar, crea un nuevo archivo en bookstore-landing-page/src/componentsllamado signupForm.tsx. Este componente no tendrá ningún tipo personalizado, pero tendrá un controlador de eventos , que tiene su propio tipo especial basado en React.

Primero, construya el SignUpForm/componente y su returndeclaración, con un encabezado dentro:

[label bookstore-landing-page/src/components/signupForm.tsx] import * as React from "react"const SignUpForm = () = {  return (    h3Sign up for our newsletter!/h3  )}export default SignupForm

A continuación, agregue algunas marcas para crear un formelemento con un onSubmitatributo, inicializado nullpor ahora como . Pronto contendrá el controlador de eventos, pero por ahora, termine de escribir el formulario con las etiquetas label, inputy button:

página de destino de la librería/src/components/signupForm.tsx

import * as React from "react"const SignUpForm = () = {  return (    React.Fragment      h3Sign up for our newsletter!/h3      form onSubmit={null}        div style={{display: 'flex'}}            input type='email' placeholder='email@here'/                button type='submit'Submit/button        /div      /form    React.Fragment  )}export default SignupForm

Si escribe su dirección de correo electrónico en el campo de texto y hace clic en Registrarse en la página de destino mostrada ahora mismo, no ocurrirá nada. Esto se debe a que aún necesita escribir un controlador de eventos que se active cada vez que se envíe el formulario. Una práctica recomendada es escribir una función independiente fuera de la returndeclaración para el controlador de eventos. Esta función generalmente tiene un objeto especial eque representa el evento activado.

Antes de escribir la función separada, escribirá la función en línea para determinar cuál es el tipo estático del objeto de evento, de modo que pueda usar ese tipo más adelante:

página de destino de la librería/src/components/signupForm.tsx

...    return (        React.Fragment            h3Sign up for our newsletter!/h3            form onSubmit={(e) = null}                div style={{display: 'flex'}}                    input type='email' placeholder='email@here' style={{width: '100%'}}/                    button type="submit"Submit/button                /div            /form        /React.Fragment    )...}export default SignupForm

Si está utilizando un editor de texto como Visual Studio Code , al pasar el cursor sobre el eparámetro se utilizará IntelliSense de TypeScript para mostrarle su tipo esperado, que en este caso es React.FormEventHTMLFormElement.

Ahora que sabe cuál será el tipo esperado de su función separada, continúe y use esto para escribir una nueva función separada llamada handleSubmit:

página de destino de la librería/src/components/signupForm.tsx

import * as React from "react"const SignupForm = () = {    const handleSubmit = (e: React.FormEventHTMLFormElement) = {        e.preventDefault();        alert(alert('The submit button was clicked! You're signed up!'))    }    return (        React.Fragment            h3Sign up for our newsletter!/h3            form onSubmit={handleSubmit}                div style={{display: 'flex'}}                  input type='email' placeholder='email@here'/                  button type='submit'Submit/button                /div            /form        /React.Fragment  )}export default SignupForm

La handleSubmitfunción ahora activará una alerta del navegador cuando se envíe el formulario. Tenga en cuenta que se trata de un marcador temporal; para agregar realmente al usuario a una lista de correo electrónico, deberá conectarla a una base de datos de back-end, lo cual está fuera del alcance de este tutorial.

Guarde y cierre el signupForm.tsxarchivo.

Ahora, abra el index.tsxarchivo y agregue el nuevo SignupForm/componente:

página de destino de la librería/src/pages/index.tsx

import * as React from "react"import { StaticImage } from "gatsby-plugin-image"import Layout from "../components/layout"import SalesPitchAndFeatures from "../components/salesPitchAndFeatures"import SignupForm from "../components/signupForm"import Seo from "../components/seo"const IndexPage = () = (  Layout    Seo /    div style={{ maxWidth: `450px`, margin: ' 1em auto'}}      HeroImage /      SalesPitchAndFeatures /      SignupForm /    /div  /Layout)export default IndexPage

Guardar y salir del archivo.

Reinicie su servidor de desarrollo y encontrará la página de destino completa en su navegador, junto con el botón de registro por correo electrónico:

Ahora has terminado de construir todos los componentes principales de la página de destino de tu librería.

Conclusión

Dado que Gatsby crea sitios web estáticos rápidos y TypeScript permite que los datos se tipifiquen estáticamente, crear una página de destino es un excelente caso de uso. Puede dar forma a los tipos de sus elementos comunes (encabezado, imagen principal, registro por correo electrónico, etc.) de modo que las formas incorrectas de datos generen errores antes de que entren en producción. Gatsby proporciona la mayor parte de la estructura y el estilo de la página, lo que le permite construir sobre ella. Puede utilizar este conocimiento para crear otras páginas de destino para promocionar otros productos y servicios de forma más rápida y eficiente.

Si desea obtener más información sobre TypeScript, consulte nuestra serie Cómo codificar en TypeScript , o pruebe nuestra serie Cómo crear sitios web estáticos con Gatsby.js para obtener más información sobre Gatsby.