Teilnahmeanfrage

Komponenten visuell entwickeln, testen und dokumentieren

Erleben Sie die Kraft von Storybook, dem führenden Tool zur visuellen Entwicklung, Dokumentation und zum Testen von UI-Komponenten! In diesem 2-tägigen Intensivkurs lernen Sie, Storybook nahtlos in Ihre Projekte zu integrieren und Workflows effizient zu gestalten. Von der Erstellung interaktiver Stories über visuelles Testen bis hin zur Integration in CI/CD-Pipelines – wir vermitteln Ihnen das Know-how, um mit Storybook moderne und skalierbare Front-End-Architekturen zu meistern. Der Kurs verbindet Theorie, Live-Coding und praktische Übungen.

Profitieren Sie von praxisorientiertem Lernen, direktem Austausch mit erfahrenen Trainern und einem fundierten Blick auf Best Practices, die Ihre Projekte auf das nächste Level bringen! 

Schulungsunterlagen:

Präsentation im PDF-Format
Zugriff auf ein GitHub-Repository mit Übungsaufgaben und dem Schulungsprojekt

Schulungsumgebung:

Visual Studio Code
Aktuelle Node.js-Version

Nach dem Kurs sind Sie in der Lage:

Storybook zu installieren, zu konfigurieren und in bestehende Projekte zu integrieren
Komponenten visuell zu entwickeln, zu testen und zu dokumentieren
Storybook Add-ons zu nutzen, um Workflows zu optimieren
Stories für unterschiedliche Zustände und Szenarien zu erstellen
Automatische Tests mit Storybook und Tools wie Chromatic durchzuführen
Storybook in CI/CD-Workflows einzubinden
Storybook individuell anzupassen und Best Practices anzuwenden

1. Einführung in Storybook

• Was ist Storybook?
• Vorteile und Einsatzmöglichkeiten

2. Installation und Setup

• Einrichtung und grundlegende Konfiguration

3. Stories erstellen

• Struktur und Aufbau von Stories
• Erstellung von Stories für unterschiedliche Zustände und Variationen
• Interaktive Stories gestalten

4. Dokumentation von Komponenten

• Detaillierte Dokumentation mit Storybook

5. Testing mit Storybook

• Visuelles Testen von Komponenten
• Erstellung von Komponententests
• Snapshots generieren und vergleichen
• Integration von Testing-Tools wie Jest oder Chromatic

6. CI/CD-Integration

• Einbindung von Storybook in CI/CD-Pipelines
• Automatisierte Tests und Überprüfung von Stories
• Deployment der Storybook-Dokumentation

7. Best Practices

• Organisation und Struktur von Stories
• Wiederverwendbarkeit von Konfigurationen
• Pflege und Aktualisierung von Stories

8. Storybook erweitern

• Anpassung von Themes
• Erstellung eigener Pages
• Erweiterung für spezifische Projektanforderungen
• Optional: Entwicklung eigener Add-ons