Seminarinformationen

Seminar - Ziel

In diesem 2-tägigen Seminar "Erstellen von Webseiten mit Gatsby" erhalten Sie einen modernen Einblick in die Entwicklung von Weblösungen, die den Wandel von einem monolithischen CMS hin zu einem Content Mesh mit einer entkoppelten Infrastruktur für Websites widerspiegeln.

Der Kurs startet mit einer Einführung in Gatsby, einschließlich der Installation, dem Anlegen von Projekten mit der Gatsby CLI, der Erstellung statischer Seiten sowie dem Design von Layouts und Styling. Sie bekommen einen Überblick über die Gatsby-Architektur, erfahren, wie Sie Daten mit GraphQL abfragen, und arbeiten mit Bildern sowie Markdown-Inhalten. Zum Abschluss werden die Veröffentlichung der Website in der Produktionsumgebung und die Optimierung für Progressive Web Apps (PWA) behandelt.

Teilnehmer - Zielgruppe

  • Entwickler

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

Seminardauer

  • 2 Tage
  • 09:00 Uhr bis 17:00 Uhr

Schulungsunterlagen

  • nach Absprache

Seminar-Inhalt / 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

Weitere Schulungen zu Thema React

Jakarta EE - Moderne Full Stack Entwicklung mit React und MongoDB

- u.a. in Nürnberg, Berlin, Stuttgart, München, Köln

In diesem 5-tägigen Seminar "Jakarta EE – Moderne Full Stack Entwicklung mit React und MongoDB" erhalten Sie einen umfassenden Überblick über aktuelle Webtechnologien und sind danach in der Lage, ein komplettes Webprojekt mit modernen Tools umzusetzen. Der Schwerpunkt ...

ASP.NET Core-Entwicklung mit React und Redux

- u.a. in Nürnberg, Berlin, Stuttgart, München, Köln

In diesem 5-tägigen Seminar "ASP.NET Core-Entwicklung mit React und Redux" erlernen Sie die notwendigen Fähigkeiten, um eine moderne Webanwendung zu entwickeln, die JavaScript auf der Client-Seite und ASP.NET Core im Backend nutzt. Sie erhalten grundlegende Kenntnisse in der ...

React für Fortgeschrittene

- u.a. in Frankfurt am Main, Leipzig, Essen, Koblenz, Mannheim

In diesem 3-tägigen Seminar "React für Fortgeschrittene" vertiefen Sie Ihr Wissen über React und erhalten Einblicke in zahlreiche zusätzliche Libraries aus dem React-Umfeld. Der Fokus liegt auf etablierten Konzepten wie dem Erstellen von Komponenten und dem Einsatz von ...

React - Design Systeme mit TailwindCSS und shadcn/ui

- u.a. in Frankfurt am Main, Hamburg, Stuttgart, München, Kassel

In diesem 2-tägigen Seminar "React – Design-Systeme mit TailwindCSS und shadcn/ui" erfahren Sie, wie Sie mit Hilfe von TailwindCSS und shadcn/ui ein flexibles und individuell anpassbares Design-System für React-Anwendungen entwickeln. Sie erfahren, wie shadcn/ui im ...