Introducción a Gatsby

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

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

Es una de las herramientas que permiten desarrollar un conjunto de tecnologías y prácticas conocidas colectivamente como JAMstack .

Gatsby es uno de los chicos más interesantes en el ámbito del 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 la tecnología Progressive Web Apps en la industria, que es una de las características clave de Gatsby
• Está construido en React y GraphQL , que son dos tecnologías muy populares y en ascenso.
• Es realmente poderoso
• Es rápido
• La documentación es genial
• El efecto red (la gente lo usa, crea sitios, hace tutoriales, la gente sabe más sobre ello, creando 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 personalizarlo.

Todos estos son puntos excelentes y definitivamente vale la pena echarle un vistazo a Gatsby.

¿Cómo funciona?

Con Gatsby, sus aplicaciones se crean utilizando componentes React.

El contenido que mostrarás en un sitio generalmente se escribe usando Markdown, pero puedes usar cualquier tipo de fuente de datos, como un CMS sin interfaz gráfica o un servicio web como Contentful.

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

Mencioné Progressive Web Apps en la lista. Gatsby genera automáticamente su sitio como una PWA, con un service worker 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

Puedes instalar Gatsby ejecutando esto en tu terminal :

npm install -g gatsby-cli

Esto instala la gatsbyutilidad CLI.

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

Crea un nuevo sitio “Hola mundo” ejecutando

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

Este comando crea un nuevo sitio Gatsby en la mysitecarpeta, utilizando el iniciador disponible en https://github.com/gatsbyjs/gatsby-starter-hello-world .

Un starter es un sitio de muestra sobre el que puedes construir. Otro starter común es default, disponible en https://github.com/gatsbyjs/gatsby-starter-default .

Aquí puedes encontrar una lista de todos los entrantes que puedes utilizar.

Administrando el sitio de Gatsby

Una vez que la terminal haya terminado de instalar el iniciador, puede ejecutar el sitio web llamando

cd mysitegatsby develop

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

Y aquí está nuestro iniciador de Hola Mundo en acción:

Inspeccionando el sitio

Si abres el sitio que creaste con tu editor de código favorito (yo uso VS Code ), encontrarás que hay 3 carpetas:

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

Ahora, realizar un cambio simple en la página predeterminada es fácil: basta con abrirla src/pages/index.js, cambiar “Hola mundo” por otra cosa y guardarla. El navegador debería volver a cargar el componente al instante (lo que significa que la página en realidad no se actualiza, sino que cambia el contenido, un truco que es posible la tecnología subyacente).Te recomendamos Blog sobre Salud dental

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

Por ejemplo, creé un second.jsarchivo con este contenido:

import React from 'react'export default () = divSecond page!/div

y abrí el navegador en https://localhost:8000/second :

Vinculación de páginas

Puedes vincular esas páginas importando un componente React proporcionado por Gatsby llamado Link:

import { Link } from "gatsby"

y usarlo en tu componente JSX :

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

Uso de complementos

Gatsby proporciona muchas cosas listas para usar, pero muchas otras funcionalidades se proporcionan mediante complementos .

Hay 3 tipos de complementos:

• Los complementos de origen obtienen datos de una fuente. Crean nodos que luego pueden filtrarse mediante complementos de transformador.
• Los complementos de transformación transforman los datos proporcionados por los complementos de origen en algo que Gatsby puede usar
• Los complementos funcionales implementan algún tipo de funcionalidad, como agregar compatibilidad con mapas del sitio o más.

Algunos complementos comúnmente utilizados son:

• gatsby-plugin-react-helmet que permite editar el headcontenido de la etiqueta
• gatsby-plugin-catch-links que utiliza la API de historial para evitar que el navegador vuelva a cargar la página cuando se hace clic en un enlace, cargando el nuevo contenido usando AJAX en su lugar

Un complemento de Gatsby se instala en dos pasos. Primero lo instalas usando npm, luego lo agregas a la configuración de Gatsby en gatsby-config.js.

Por ejemplo, puedes instalar el complemento Catch Links:

npm install gatsby-plugin-catch-links

En gatsby-config.js(créelo si no lo tiene, en la carpeta raíz del sitio web), agregue el complemento a la pluginsmatriz 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 puedes comprobar que todo funciona como esperas iniciando un servidor web local usando

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 usando gatsby build, todo lo que necesita hacer es implementar el resultado contenido en la publiccarpeta.

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

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

Tal vez te puede interesar:

1. Introducción a React
2. Agregar evento de clic a los elementos DOM devueltos desde querySelectorAll
3. Cómo cambiar el valor de un nodo DOM
4. Cómo comprobar si un elemento DOM tiene una clase

Introducción a Gatsby

¿Cómo funciona?InstalaciónAdministrando el sitio de GatsbyInspeccionando el sitioVinculación de páginasAñadiendo CSSUso de complementosConstruyendo el si

programar

es

2025-01-16

Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente