Sommario
  1. Struttura del progetto
  2. Componenti React
  3. Pagine e Routing
    1. File System Route API
    2. CreatePage
    3. Links
  4. Plugins
  5. Lo Starter Greater Gatsby
  6. Altri Starters

Gatsby Step 2 - Analisi

Struttura, Componenti, Plugins e Starters: di quali ingredienti abbiamo bisogno?

Nello step 1 abbiamo installato ed avviato lo starter greater-gatsby:

gatsby new esempio https://github.com/rbutera/greater-gatsby
cd esempio
gatsby develop

In questa parte della guida analizzeremo i seguenti aspetti di un progetto Gatsby:

Struttura del progetto

Questi sono i file principali:

|-- /src
    |-- /pages
|-- gatsby-browser.js
|-- gatsby-config.js
|-- gatsby-node.js
|-- gatsby-ssr.js

in particolare:

  • gatsby-config.js — configura il sito: title, description, plugins, etc
  • gatsby-node.js — estende il processo di build attraverso le API NodeJs
  • gatsby-browser.js — estende le funzionalità attraverso le API browser
  • gatsby-ssr.js — estende le funzionalità attraverso le API di rendering server-side

Componenti React

ReactJs estende HTML creando nuovi Componenti riusabili. Una pagina in Gatsby è un'insieme di Componenti React.

Questo è l'aspetto della pagina index.tsx dello start usato:

Gatsby index page su VsCode

Per creare nuove pagine basta creare nuovi file nella cartella /src/pages/.

Pagine e Routing

Il routing riguarda la gestione delle URL, le rotte per le pagine del sito.

Le rotte possono essere create in tre modi:

  1. Creando Componenti React in src/pages.
  2. Usando File System Route API per mostrare i contenuti del database GrapQL.
  3. Usando createPages in gatsby-node.js per un maggiore controllo.

Come abbiamo visto nel paragrafo precedente, la cosa più semplice è creare nuovi file e costruire la pagina tramite componenti React.

File System Route API

Avendoci invece delle risorse GrapQL, il File System Route API è il modo più semplice di trasformarle in pagine web.

Data una risorsa GrapQL (ad esempio Products) usando le parentesi graffe nel nome del file ({ }), si possono generare tutte le pagine di quella data risorsa:

src/pages/prodotti/{Product.name}.js
=> /prodotti/strega

src/pages/prodotti/{Product.name}/recipes.js
=> /prodotti/strega/ricette

La notazione con . consente di accedere alle proprietà della risorsa:

src/pages/prodotti/{Product.name}/{Product.color}.js
=> /prodotti/salsiccia/rossa

La notazione con __ consente di accedere ad un sotto-campo della risorsa:

src/pages/prodotti/{Product.fields__date__createdAt}.js
=> /prodotti/2021-02-03

CreatePage

Per creare le pagine con maggior controllo possiamo usare il punto di estensione createPages in gatsby-node.js e generearle dinamicamente:

exports.createPages = async function ({ actions, graphql }) {
  const { data } = await graphql(query)
  data.posts.forEach(node => {
    const slug = node.fields.slug
    actions.createPage({
      path: slug,
      component: require.resolve(`./src/templates/blog-post.js`),
      context: { slug: slug },
    })
  })
}

Gatsby usa @reach/router i cui vantaggi sono:

  1. preloading avanzato
  2. accessibilità
  3. supporto per server side rendering
  4. supporto per scroll restoration
  5. supporto per autenticazione e pagine protette

I link sono gestiti tramite il componente <Link />

import React from "react"
import { Link } from "gatsby"

const CallToAction = () => (
  <p>
    Leggi il mio <Link to="/blog">blog</Link>!
  </p>
)

Lo scroll restoration preserva la posizione della pagina quando si naviga tra i Links.

Plugins

Gatsby offre plugins per qualsiasi cosa. Possiamo raggrupparli in:

  • Fondamentali
  • Source e Transformer
  • Plugin per CSS & UI
  • Plugin per Analytics

Qui troverai un elenco di plugin selezionati

Lo Starter Greater Gatsby

Lo starter che suggerisco è greater-gatsby, uno starter senza pagine e componenti ma con una struttura completa per sviluppare seriamente con Gatsby:

  • TypeScript - aggiunge i Tipi a JavaScript
  • Eslint configurato via xo e Prettier per la correzione del codice
  • Storybook - per testare i componenti React
  • PostCSS Styled Components con TailwindCSS tramite twin.macro
  • lint-staged per la Code Quality
  • Cypress per fare end-to-end testing
  • Jest per fare unit testing

Altri Starters

InstagramGitHubVimeoLePietre bnbThinkSannio