Storybook Komplettkurs - Moderne UI-Entwicklung und Testing

Ziele der Schulung

In dieser 2-tägigen Schulung "Storybook Komplettkurs - Moderne UI-Entwicklung und Testing“ lernen Sie, wie Sie Storybook effektiv in Ihre Entwicklungsprozesse integrieren – von der Installation und Konfiguration bis hin zur professionellen Nutzung im Team. Sie entwickeln, testen und dokumentieren UI-Komponenten visuell und unabhängig vom Anwendungskontext.

Sie lernen, was Storybook ist und welche Vorteile es bietet. Sie erfahren, wie man Storybook in Web- und App-Entwicklungsprojekte integriert und erstellen und verwalten Stories für verschiedene Komponentenzustände. Sie dokumentieren UI-Komponenten mit verbesserten MDX-Funktionen und nutzen Add-ons zur Optimierung des Workflows. Sie führen visuelle Tests durch und integrieren Testing-Tools wie Vitest. Zudem lernen Sie, wie Sie Storybook in CI/CD-Pipelines einbinden und Storybook an spezifische Projektanforderungen anpassen und erweitern.

Abgerundet wird die Schulung durch Best Practices zur Strukturierung und Pflege Ihrer Storybook-Umgebung – für eine skalierbare, wartbare und kollaborative Komponentenentwicklung.

Zielgruppe Seminar

• Frontend-Entwickler
• UI/UX-Designer und
• Alle, die an der Entwicklung und Dokumentation von UI-Komponenten interessiert sind

Voraussetzungen

• Grundkenntnisse in JavaScript und React sind von Vorteil

Seminarinhalt

Grundlagen von Storybook

• Was ist Storybook und welche Vorteile es bietet.
• Installation und Setup für Web- und App-Entwicklungsprojekte.

Stories erstellen und verwalten

• Grundlegende Struktur von Stories.
• Praktische Übung: Erstellen Sie Ihre erste Story für eine Web- oder App-Komponente.
• Stories für verschiedene Zustände (z.B. Loading, Error) erstellen.

Dokumentation mit Storybook

• Best Practices zur Dokumentation von UI-Komponenten in Storybook.
• Praktische Übung: Dokumentieren Sie eine Komponente mit Storybook.

Add-ons und Workflow-Optimierung

• Überblick über nützliche Add-ons zur Optimierung des Workflows.
• Praktische Anwendung von Add-ons wie Knobs, Actions und Viewport.
• Einführung in die neuen Test-Widgets und Vitest-Integration.

Testing und Qualitätssicherung

• Visuelles Testen von Komponenten.
• Komponententests erstellen und Snapshots vergleichen.
• Integration von Testing-Tools wie Jest, Chromatic und Vitest.

CI/CD-Integration

• Einbindung von Storybook in CI/CD-Pipelines.
• Automatisierte Überprüfung von Stories und Deployment von Dokumentationen.
• Praktische Übung: Konfiguration eines CI/CD-Pipelines mit Storybook.

Anpassung und Erweiterung von Storybook

• Anpassung von Storybook-Themes und Erstellung von Pages.
• Storybook für spezifische Projektanforderungen erweitern.
• Einführung in die Entwicklung eigener Add-ons.

Best Practices und Wartung

• Struktur und Organisation von Stories.
• Wiederverwendbarkeit von Story-Konfigurationen.
• Pflege und Aktualisierung von Stories.

Leistungsoptimierung und neue Funktionen

• Einführung in die Leistungsoptimierungen und zur Reduzierung der Bundle-Größe in Storybook 9.
• Unterstützung von React Native und anderen Frameworks.

Unterstützung verschiedener Frameworks

• Updates zu Svelte, Next.js, und React Native Unterstützung.
• Integration und Nutzung von Storybook in verschiedenen Entwicklungsumgebungen.

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: Online Marketing Schulungen Portfolio

Mehr zu den Vorteilen von Badges

Seminare kurz vor der Durchführung