Erstellen von Webseiten mit Gatsby

Ziele der Schulung

In dieser 2-tägigen Schulung "Erstellen von Webseiten mit Gatsby" lernen Sie einen neuen Ansatz für die Bereitstellung webbasierter Lösungen kennen, der sich von einem monolithischen CMS hin zu einem Content Mesh mit einer entkoppelten Infrastrukturebene für Websites bewegt.

Der Kurs beginnt mit einer Einführung in Gatsby, einschließlich Installation, Projekterstellung mit Gatsby CLI, Erstellung statischer Seiten sowie Gestaltung von Layouts und Styling. Sie erhalten Einblicke in die Architektur von Gatsby, das Abfragen von Daten mit GraphQL und die Arbeit mit Bildern und Markdown. Abschließend werden die Bereitstellung in der Produktion und die Verbesserung der Unterstützung für Progressive Web Apps (PWA) behandelt.

Zielgruppe Seminar

• Entwickler

Voraussetzungen

Für eine optimale Teilnahme am Kurs empfehlen wir folgende Vorkenntnisse:

• Erfahrung in der JavaScript-Entwicklung
• Erfahrung mit React ist hilfreich, aber nicht erforderlich.

Seminarinhalt

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 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

Open Badge für dieses Seminar - Ihr digitaler Kompetenznachweis

Durch die erfolgreiche Teilnahme an einem Kurs bei IT-Schulungen.com erhalten Sie zusätzlich zu Ihrem Teilnehmerzertifikat ein digitales Open Badge (Zertifikat) – Ihren modernen Nachweis für erworbene Kompetenzen.

Ihr Open Badge ist jederzeit in Ihrem persönlichen und kostenfreien Mein IT-Schulungen.com-Konto verfügbar. Mit wenigen Klicks können Sie diesen digitalen Nachweis in sozialen Netzwerken teilen, um Ihre Expertise sichtbar zu machen und Ihr berufliches Profil gezielt zu stärken.

Übersicht: React Schulungen Portfolio

Mehr zu den Vorteilen von Badges

Seminare kurz vor der Durchführung