Introduction à Gatsby

Gatsby est une plate-forme pour créer des applications et des sites Web à l'aide de React

Gatsby est une plate-forme pour créer des applications et des sites Web à l'aide de React.

C'est l'un des outils qui vous permettent de vous appuyer sur un ensemble de technologies et de pratiques collectivement appeléesJAMstack.

Gatsby est actuellement l'un des enfants cool de l'espace de développement Frontend. Pourquoi? Je pense que les raisons sont:

  • l'explosion de l'approche JAMstack pour la création d'applications Web et de sites Web
  • l'adoption rapide duApplications Web progressivestechnologie dans l'industrie, qui est l'une des principales caractéristiques de Gatsby
  • c'est intégréRéagiretGraphQL, qui sont deux technologies très populaires et en plein essor
  • c'est vraiment puissant
  • c'est rapide
  • la documentation est excellente
  • l'effet de réseau (les gens l'utilisent, créent des sites, font des tutoriels, les gens en savent plus à ce sujet, créent un cycle)
  • tout est JavaScript (pas besoin d'apprendre un nouveau langage de création de modèles)
  • il cache la complexité, au début, mais nous permet d'accéder à chaque étape pour personnaliser

Ce sont tous de bons points, et Gatsby vaut vraiment le coup d'œil.

Comment ça marche?

Avec Gatsby, vos applications sont construites à l'aide de composants React.

Le contenu que vous rendrez dans un site est généralement écrit à l'aide de Markdown, mais vous pouvez utiliser n'importe quel type de source de données, comme un CMS headless ou un service Web comme Contentful.

Gatsby construit le site et il est compilé en HTML statique qui peut être déployé sur n'importe quel serveur Web de votre choix, commeNetlify, AWS S3, pages GitHub, fournisseurs d'hébergement réguliers, PAAS et plus encore. Tout ce dont vous avez besoin est un endroit qui sert des pages HTTP simples et vos actifs au client.

J'ai mentionné Progressive Web Apps dans la liste. Gatsby génère automatiquement votre site en tant que PWA, avec un service worker qui accélère le chargement des pages et la mise en cache des ressources.

Vous pouvez améliorer les fonctionnalités de Gatsby via des plugins.

Installation

Vous pouvez installer Gatsby en l'exécutant dans votreTerminal:

npm install -g gatsby-cli

Cela installe legatsbyUtilitaire CLI.

(lorsqu'une nouvelle version est sortie, mettez-la à jour en appelant à nouveau cette commande)

Vous créez un nouveau site "Hello World" en exécutant

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

Cette commande crée un tout nouveau site Gatsby dans lemysitedossier, en utilisant leentréedisponible àhttps://github.com/gatsbyjs/gatsby-starter-hello-world.

UNEentréeest un exemple de site sur lequel vous pouvez vous appuyer. Un autre démarreur courant estdefault, disponible àhttps://github.com/gatsbyjs/gatsby-starter-default.

Ici vous pouvez trouver une liste de tous les démarreurs que vous pouvez utiliser

Exécution du site Gatsby

Une fois que le terminal a fini d'installer le démarreur, vous pouvez exécuter le site Web en appelant

cd mysite
gatsby develop

qui démarrera un nouveau serveur Web et desservira le site sur le port 8000 sur localhost.

Et voici notre starter Hello World en action:

Inspection du site

Si vous ouvrez le site que vous avez créé avec votre éditeur de code préféré (j'utiliseCode VS), vous y trouverez 3 dossiers:

  • .cache, un dossier caché qui contient les éléments internes de Gatsby, rien que vous ne devriez changer pour le moment
  • public, qui contient le site Web résultant une fois que vous l'avez créé
  • srccontient les composants React, dans ce cas juste leindexcomposant
  • staticqui contiendra les ressources statiques comme le CSS et les images

Désormais, il est facile de modifier simplement la page par défaut, il suffit d'ouvrirsrc/pages/index.jset changez "Bonjour tout le monde!" à autre chose, et enregistrez. Le navigateur devrait instantanémentrechargement à chaudle composant (ce qui signifie que la page ne se rafraîchit pas réellement, mais le contenu change - une astuce rendue possible par la technologie sous-jacente)

Pour ajouter une deuxième page, créez simplement un autre fichier .js dans ce dossier, avec le même contenu queindex.js(ajustez le contenu) et enregistrez-le.

Par exemple, j'ai créé unsecond.jsfichier avec ce contenu:

import React from 'react'

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

et j'ai ouvert le navigateur pourhttp: // localhost: 8000 / seconde:

Lier des pages

Vous pouvez lier ces pages en important un composant React fourni par Gatsby appeléLink:

import { Link } from "gatsby"

et en l'utilisant dans votre composantJSX:

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

Ajout de CSS

Vous pouvez importer n'importe quel fichier CSS à l'aide d'une importation JavaScript:

import './index.css'

Vous pouvez utiliser le style React:

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

Utiliser des plugins

Gatsby fournit beaucoup de choses prêtes à l'emploi, mais de nombreuses autres fonctionnalités sont fournies parplugins.

Il existe 3 types de plugins:

  • plugins sourcerécupérer des données à partir d'une source. Créez des nœuds qui peuvent ensuite être filtrés par des plugins de transformateur
  • plugins de transformateurtransformer les données fournies par les plugins sources en quelque chose que Gatsby peut utiliser
  • plugins fonctionnelsmettre en œuvre une sorte de fonctionnalité, comme l'ajout de la prise en charge du plan de site ou plus

Certains plugins couramment utilisés sont:

Un plugin Gatsby s'installe en 2 étapes. Vous l'installez d'abord en utilisantnpm, puis vous l'ajoutez à la configuration Gatsby dansgatsby-config.js.

Par exemple, vous pouvez installer le plugin Catch Links:

npm install gatsby-plugin-catch-links

Dansgatsby-config.js(créez-le si vous ne l'avez pas, dans le dossier racine du site Web), ajoutez le plugin aupluginstableau exporté:

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

Ca y est, le plugin va maintenant faire son travail.

Construire le site Web statique

Une fois que vous avez terminé de peaufiner le site et que vous souhaitez générer le site statique de production, vous appellerez

gatsby build

À ce stade, vous pouvez vérifier que tout fonctionne comme prévu en démarrant un serveur Web local à l'aide de

gatsby serve

qui rendra le site aussi proche que possible de la façon dont vous le verrez en production.

Déploiement

Une fois que vous avez créé le site en utilisantgatsby build, il vous suffit de déployer le résultat contenu dans lepublicdossier.

Selon la solution que vous choisissez, vous aurez besoin de différentes étapes ici, mais en général, vous allez pousser vers un référentiel Git et laisser les hooks post-commit Git faire le travail de déploiement.

Voici quelques excellents guides pour certaines plates-formes d'hébergement populaires.

Téléchargez mon gratuitManuel React


Plus de tutoriels de réaction: