Introducción a Gatsby

Gatsby es una plataforma para crear aplicaciones y sitios web usando React

Gatsby es una plataforma para crear aplicaciones y sitios web usando React.

Es una de las herramientas que le permite desarrollar un conjunto de tecnologías y prácticas conocidas colectivamente comoJAMstack.

Gatsby es uno de los chicos geniales en el espacio de Desarrollo Frontend en este momento. ¿Por qué? Creo que las razones son:

  • la explosión del enfoque JAMstack para crear aplicaciones web y sitios web
  • la rápida adopción de laAplicaciones web progresivastecnología en la industria, que es una de las características clave de Gatsby
  • está construido enReaccionaryGraphQL, que son dos tecnologías muy populares y emergentes
  • es realmente poderoso
  • es rápido
  • la documentación es genial
  • el efecto de red (la gente lo usa, crea sitios, hace tutoriales, la gente sabe más sobre él, crea un ciclo)
  • todo es JavaScript (no es necesario aprender un nuevo lenguaje de plantillas)
  • oculta la complejidad, al principio, pero nos permite acceder a cada paso para personalizar

Todos esos son puntos geniales, y definitivamente vale la pena echarle un vistazo a Gatsby.

¿Como funciona?

Con Gatsby, sus aplicaciones se crean utilizando componentes React.

El contenido que representará en un sitio generalmente se escribe usando Markdown, pero puede usar cualquier tipo de fuente de datos, como un CMS sin cabeza o un servicio web como Contentful.

Gatsby crea el sitio y está compilado en HTML estático que se puede implementar en cualquier servidor web que desee, comoNetlify, AWS S3, páginas de GitHub, proveedores de alojamiento habituales, PAAS y más. Todo lo que necesita es un lugar que sirva páginas HTTP simples y sus activos al cliente.

Mencioné Progressive Web Apps en la lista. Gatsby genera automáticamente su sitio como PWA, con un trabajador de servicio que acelera la carga de la página y el almacenamiento en caché de recursos.

Puede mejorar la funcionalidad de Gatsby a través de complementos.

Instalación

Puede instalar Gatsby ejecutando esto en suTerminal:

npm install -g gatsby-cli

Esto instala elgatsbyUtilidad CLI.

(cuando salga una nueva versión, actualícela llamando a este comando nuevamente)

Puede crear un nuevo sitio "Hola mundo" ejecutando

gatsby new mysite https://github.com/gatsbyjs/gatsby-starter-hello-world

Este comando crea un nuevo sitio de Gatsby en elmysitecarpeta, usando lainiciodisponible enhttps://github.com/gatsbyjs/gatsby-starter-hello-world.

Ainicioes un sitio de muestra sobre el que puede construir. Otro iniciador común esdefault, disponible enhttps://github.com/gatsbyjs/gatsby-starter-default.

Aquí puede encontrar una lista de todos los entrantes que puede usar

Ejecutando el sitio de Gatsby

Una vez que el terminal haya terminado de instalar el motor de arranque, puede ejecutar el sitio web llamando

cd mysite
gatsby develop

que iniciará un nuevo servidor web y servirá al sitio en el puerto 8000 en localhost.

Y aquí está nuestro motor de arranque Hello World en acción:

Inspeccionando el sitio

Si abre el sitio que creó con su editor de código favorito (yo usoCódigo VS), encontrará que hay 3 carpetas:

  • .cache, una carpeta oculta que contiene las partes internas de Gatsby, nada que debas cambiar ahora mismo
  • public, que contiene el sitio web resultante una vez que lo crea
  • srccontiene los componentes de React, en este caso solo elindexcomponente
  • staticque contendrá los recursos estáticos como CSS e imágenes

Ahora, hacer un simple cambio a la página predeterminada es fácil, simplemente abrasrc/pages/index.jsy cambiar "¡Hola mundo!" a otra cosa y ahorrar. El navegador debería instantáneamenterecarga en calienteel componente (lo que significa que la página en realidad no se actualiza, pero el contenido cambia, un truco que es posible gracias a la tecnología subyacente).

Para agregar una segunda página, simplemente cree otro archivo .js en esta carpeta, con el mismo contenido deindex.js(retoque el contenido) y guárdelo.

Por ejemplo, creé unsecond.jsarchivo con este contenido:

import React from 'react'

export default () => <div>Second page!</div>

y abrí el navegador parahttp: // localhost: 8000 / segundo:

Vinculación de páginas

Puede vincular esas páginas importando un componente React proporcionado por Gatsby llamadoLink:

import { Link } from "gatsby"

y usándolo en su componenteJSX:

<Link to="/second/">Second</Link>

Añadiendo CSS

Puede importar cualquier archivo CSS mediante una importación de JavaScript:

import './index.css'

Puedes usar el estilo React:

<p style={{
    margin: '0 auto',
    padding: '20px'
  }}>Hello world</p>

Usando complementos

Gatsby proporciona muchas cosas listas para usar, pero muchas otras funcionalidades las proporcionacomplementos.

Hay 3 tipos de complementos:

  • complementos de origenrecuperar datos de una fuente. Cree nodos que luego puedan ser filtrados por complementos de transformadores
  • complementos de transformadortransformar los datos proporcionados por los complementos de origen en algo que Gatsby pueda usar
  • complementos funcionalesimplementar algún tipo de funcionalidad, como agregar compatibilidad con mapas del sitio o más

Algunos complementos de uso común son:

Un complemento de Gatsby se instala en 2 pasos. Primero lo instalas usandonpm, luego lo agrega a la configuración de Gatsby engatsby-config.js.

Por ejemplo, puede instalar el complemento Catch Links:

npm install gatsby-plugin-catch-links

Engatsby-config.js(créelo si no lo tiene, en la carpeta raíz del sitio web), agregue el complemento alpluginsmatriz exportada:

module.exports = {
  plugins: ['gatsby-plugin-catch-links']
}

Eso es todo, el complemento ahora hará su trabajo.

Construyendo el sitio web estático

Una vez que haya terminado de ajustar el sitio y desee generar el sitio estático de producción, llamará

gatsby build

En este punto, puede comprobar que todo funciona como espera iniciando un servidor web local utilizando

gatsby serve

lo que hará que el sitio se parezca lo más posible a cómo lo verá en producción.

Despliegue

Una vez que construya el sitio usandogatsby build, todo lo que necesita hacer es implementar el resultado contenido en elpubliccarpeta.

Dependiendo de la solución que elija, necesitará diferentes pasos aquí, pero generalmente enviará a un repositorio de Git y dejará que los ganchos posteriores a la confirmación de Git hagan el trabajo de implementación.

Aquí hay algunas guías excelentes para algunas plataformas de alojamiento populares..

Descarga mi gratisReact Handbook


Más tutoriales de react: