Exercice - Créer une application statique avec Gatsby

  • 6 minutes

Dans cette unité, vous créez une application Gatsby et y ajoutez une seule page.

Installer Gatsby

Exécutez la commande suivante dans un terminal pour installer Gatsby globalement sur votre système :

npm install -g gatsby-cli

Créer et exécuter un site Gatsby

Tous les projets Gatsby sont créés par l’interface CLI Gatsby. L’interface CLI peut vous aider pour générer automatiquement un nouveau projet Gatsby, l’héberger et générer également le produit final, qui est un ensemble statique de fichiers que vous pouvez déployer sur l’hôte statique de votre choix.

Créer une application Gatsby

Maintenant, créez une nouvelle application Gatsby en tapant la commande suivante dans le terminal :

gatsby new myApp

gatsby new crée une application Gatsby, à laquelle vous pouvez commencer à ajouter des pages de contenu.

Exécuter Gatsby

Pour commencer le développement avec Gatsby, vous devez accéder au répertoire du projet avant de démarrer le serveur de développement.

Exécutez les commandes suivantes pour accéder à votre dossier de projet et démarrer le serveur :

cd myApp
gatsby develop

Vous devez voir la sortie suivante dans le terminal :

You can now view gatsby-starter-default in the browser.
  http://localhost:8000.
View GraphQL, an in-browser IDE, to explore your site's data and schema
  http://localhost:8000/___graphql

Ouvrez un navigateur et accédez à http://localhost:8000.

Screenshot of the Gatsby app.

Si vous voyez ce qui précède, vous avez créé votre première application Gatsby. Félicitations !

Ajouter un composant de page

Vous créez maintenant un composant auquel vous pouvez accéder dans le navigateur : un composant de page.

  1. Ouvrez le dossier du projet « myApp » dans Visual Studio Code. Recherchez le répertoire pages/.

    Screenshot of the pages folder in VS Code.

  2. Créez un fichier et appelez-le about.js. Donnez le contenu suivant au fichier :

    import React from 'react';
import { Link } from 'gatsby';

export default () => (
  <React.Fragment>
    <div>About page</div>
    <Link to="/">Back to home</Link>
  </React.Fragment>
)

Le code ci-dessus crée un composant de présentation uniquement pour afficher les données. Ce composant affiche simplement le texte « About page » et un lien pointant vers la racine de l’application.

Une fois que vous avez collé le code et l’avez enregistré dans le fichier about.js, le serveur de développement recompile automatiquement l’application. Si vous visitez à présent http://localhost:8000/about, le contenu suivant doit s’afficher :

Screenshot showing the loaded page component.

Vous avez votre première page ! Vous pouvez maintenant voir comment accéder aux composants du répertoire /pages.