IT-Trainer Jobs und Stellenangebote: Erstellen von Webseiten mit Gatsby

Seminardauer: 2 Tage

Trainer gesucht

IT-Trainer Jobs und Stellenangebote: Erstellen von Webseiten mit Gatsby, .

Anmelden / Registrieren als Trainer

Agenda

Einführung in Gatsby

  • Der JAM-Stack
  • Headless CMSes
  • Gatsbys Nutzenversprechen
  • Das Gatsby-Ökosystem

Erste Schritte

  • Installation von Gatsby
  • Erstellen eines Projekt mit Gatsby CLI
  • Benutzung eines Starters

Statische Seiten erstellen

  • Erstellen Sie eine Seite
  • Verwendung von statischen Assets
  • Erstellen von Komponenten mit React

Layouts und Styling

  • Hinzufügen globaler CSS-Stile
  • Verwendung von CSS-Modulen
  • Verwendung einer CSS in JS-Bibliothek
  • Verknüpfung zwischen Seiten mit
  • Hinzufügen einer Layout-Komponente

Gatsby Architektur

  • Datenquellen, Knotenpunkte und GraphQL
  • Quellen-Plugins und Transformator-Plugins
  • Verstehen des Erstellungsprozesses von Gatsby

Abfragen von Daten mit GraphQL

  • Verstehen von GraphQL
  • GraphQL-Abfragen von Seiten erstellen
  • Rendering der empfangenen Daten
  • Behandlung von Fehlern und Verzögerungen
  • Statische Abfragen vs. Seitenabfragen
  • Abfragen von Komponenten mit <staticquery></staticquery> durchführen
  • Verwendung des useStaticQuery-Befehls

Weitere Datenquellen abfragen

  • Abfrage von Daten aus dem Dateisystem
  • Verstehen des Nodes Namespace und des Speichermodells
  • Abfrage von Bilddaten
  • Verbindung mit einem Headless CMS

Arbeiten mit Images

  • Responsive Design für Images
  • Bandbreite und Ladezeit
  • Abfrage von Images mit GraphQL
  • Image-Transformationen
  • Rendering von Images

Arbeiten mit Markdown

  • Erstellen eines Blogs
  • Umwandlung von Markdown in HTML
  • Einführung in MDX
  • Anwendung von MDX

Programmgesteuertes Erstellen von Seiten

  • Gatsbys Bootstrap-Phase
  • Verstehen von gatsby-node und Gatsby's APIs
  • Erstellen von "Slugs" für generierte Seiten
  • Generieren der Seiten

Paginierung über Listen

  • Paginierung in GraphQL
  • Abfrage einer Liste
  • Rendering einer paginierten Liste

Umstellung auf Production

  • Erstellen eines Production-Builds
  • Ausliefern des Production-Builds
  • Hosting der Site
  • Verteilen auf Netlify

Verbesserung der Unterstützung für Progressive Web Apps (PWA):

  • PWAs
  • Ausführen eines Lighthouse-Audits
  • Hinzufügen eines Manifests
  • Hinzufügen von Offline-Unterstützung mit einem Service Worker