viernes 12 julio 2024

Primeros pasos para utilizar Gatsby.js con React

Prerrequisitos
Instalación de Gatsby CLI
Creación de un Nuevo Proyecto Gatsby
Estructura del Proyecto
Ejecución del Proyecto
Creación de Páginas
Uso de Componentes
Utilización de GraphQL
Despliegue del Sitio
Conclusión

Prerrequisitos

Antes de empezar, asegúrate de tener instalados Node.js y npm (Node Package Manager) en tu sistema. Puedes verificar si están instalados ejecutando los siguientes comandos en tu terminal:

node -v
npm -v

Si no están instalados, puedes descargarlos e instalarlos desde Node.js.

Instalación de Gatsby CLI

El primer paso para trabajar con Gatsby.js es instalar la interfaz de línea de comandos (CLI) de Gatsby. Abre tu terminal y ejecuta el siguiente comando:

npm install -g gatsby-cli

Creación de un Nuevo Proyecto Gatsby

Una vez que tienes la CLI de Gatsby instalada, puedes crear un nuevo proyecto utilizando el siguiente comando:

gatsby new mi-sitio-gatsby

Este comando descargará e instalará los archivos necesarios para un proyecto Gatsby en una carpeta llamada mi-sitio-gatsby.

Estructura del Proyecto

La estructura básica de un proyecto Gatsby incluye varios directorios y archivos importantes:

/src: Aquí es donde vive el código fuente de tu aplicación.
/src/pages: Contiene los componentes de las páginas de tu sitio.
/src/components: Contiene los componentes reutilizables de tu sitio.
gatsby-config.js: Archivo de configuración principal de Gatsby.
gatsby-node.js: Archivo para extender la funcionalidad de Gatsby mediante APIs.

Ejecución del Proyecto

Para ejecutar tu proyecto Gatsby en un servidor de desarrollo local, navega al directorio del proyecto y ejecuta el siguiente comando:

cd mi-sitio-gatsby
gatsby develop

Esto iniciará un servidor de desarrollo en http://localhost:8000 donde podrás ver tu sitio en acción.

Creación de Páginas

En Gatsby, cada archivo JavaScript en el directorio src/pages se convierte automáticamente en una página con una ruta correspondiente. Por ejemplo, crea un archivo llamado index.js en src/pages:

// src/pages/index.js
import React from "react"

const IndexPage = () => (
  <main>
    <h1>Hola, mundo!</h1>
    <p>Bienvenido a tu nuevo sitio Gatsby.</p>
  </main>
)

export default IndexPage

Cuando navegas a http://localhost:8000, deberías ver el contenido de esta página.

Uso de Componentes

Puedes crear componentes reutilizables en el directorio src/components. Por ejemplo, crea un componente de encabezado:

// src/components/header.js
import React from "react"

const Header = () => (
  <header>
    <h1>Mi Encabezado Gatsby</h1>
  </header>
)

export default Header

Luego, puedes usar este componente en tu página:

// src/pages/index.js
import React from "react"
import Header from "../components/header"

const IndexPage = () => (
  <main>
    <Header />
    <h1>Hola, mundo!</h1>
    <p>Bienvenido a tu nuevo sitio Gatsby.</p>
  </main>
)

export default IndexPage

Utilización de GraphQL

Gatsby utiliza GraphQL para acceder a los datos de forma eficiente. Por ejemplo, puedes obtener información del sitio desde gatsby-config.js:

// src/pages/index.js
import React from "react"
import { graphql } from "gatsby"
import Header from "../components/header"

const IndexPage = ({ data }) => (
  <main>
    <Header />
    <h1>{data.site.siteMetadata.title}</h1>
    <p>Bienvenido a tu nuevo sitio Gatsby.</p>
  </main>
)

export const query = graphql`
  query {
    site {
      siteMetadata {
        title
      }
    }
  }
`

export default IndexPage

Asegúrate de definir siteMetadata en gatsby-config.js:

// gatsby-config.js
module.exports = {
  siteMetadata: {
    title: `Mi Sitio Gatsby`,
  },
  plugins: [
    // otros plugins
  ],
}

Despliegue del Sitio

Una vez que tu sitio está listo, puedes generar los archivos estáticos para producción ejecutando:

gatsby build

Esto creará una carpeta public con todos los archivos estáticos que puedes desplegar en cualquier servicio de alojamiento estático, como Netlify, Vercel, GitHub Pages, entre otros.

Conclusión

Gatsby.js es una poderosa herramienta para crear sitios web estáticos utilizando React y GraphQL. Con una configuración sencilla y un ecosistema de plugins robusto, puedes construir sitios rápidos, optimizados y fácilmente desplegables. Siguiendo los pasos anteriores, puedes comenzar a aprovechar las capacidades de Gatsby.js para tus proyectos web.

Etiquetas:

javascript react desarrollo web

Creado por:

Jorge García

Fullstack developer