Formation Storybook
| € HT / personne |
| 2 jours (14 heures) |
Présentation
Storybook est un atelier front-end pour développer, documenter et tester les composants UI en isolation. Il accélère la collaboration entre équipes en fournissant une documentation interactive et des outils de tests visuels, d’accessibilité et d’interaction directement intégrés au flux de travail.
Notre formation Storybook vous permettra d’installer, configurer et industrialiser un catalogue de composants prêt à être partagé. Vous apprendrez à intégrer des tests (visuels, a11y, interactions), à déployer la documentation vivante en CI/CD et à structurer un design system réutilisable.
À l’issue de la formation, vous serez en mesure d’outiller vos projets avec un Storybook performant, maintenable et déployé automatiquement, d’améliorer la qualité des interfaces et de fluidifier la collaboration avec le design.
Comme toutes nos formations, celle-ci s’appuie sur la dernière version stable de Storybook et privilégie une approche résolument pratique et opérationnelle.
Objectifs
- Installer et configurer Storybook dans un projet React/Vue/Angular
- Écrire et organiser des stories claires et pérennes
- Mettre en place des tests visuels, d’accessibilité et d’interaction
- Déployer la documentation interactive en CI/CD
- Structurer un design system et partager le catalogue avec les équipes
Public visé
- Développeur·euse·s front-end
- Ingénieur·e·s UI et responsables de design system
- Équipes produit / design souhaitant standardiser les composants
Pré-requis
- Connaissances de base en JavaScript et d’un framework (React, Vue ou Angular)
- Notions sur les composants UI et la gestion de projet front
- Pratique de Git et de l’intégration continue (niveau initiation)
Programme de notre formation Storybook
[Jour 1 – Matin]
Introduction à Storybook et aux environnements de composants
- Comprendre le rôle de Storybook dans le cycle de développement front-end
- Installation et configuration initiale dans un projet React, Vue ou Angular
- Structure des stories et gestion des fichiers de configuration
- Documentation et navigation dans l’interface Storybook
- Atelier pratique : Mise en place d’un projet Storybook et première story
Organisation et structuration des composants
- Définir une hiérarchie claire pour les composants UI
- Utiliser les Controls pour paramétrer dynamiquement les composants
- Gestion des Addons pour améliorer l’expérience développeur
- Rendre les stories réutilisables et évolutives
- Atelier pratique : Création d’un catalogue structuré de composants
[Jour 1 – Après-midi]
Tests visuels et accessibilité
- Introduction aux tests visuels par capture d’écran
- Intégration de Jest et Testing Library avec Storybook
- Vérification de l’accessibilité avec l’addon dédié
- Détection des régressions et automatisation des vérifications
- Atelier pratique : Mise en place de tests visuels et d’accessibilité
[Jour 2 – Matin]
Intégration dans les workflows et CI/CD
- Utiliser Storybook dans un contexte CI/CD (GitHub Actions, GitLab CI, etc.)
- Génération et déploiement de la documentation interactive
- Partage du design system avec les équipes produit et design
- Connecter Storybook aux outils de design system (Figma, Zeroheight)
- Atelier pratique : Déploiement d’un Storybook en ligne avec CI/CD
Bonnes pratiques et design systems
- Approche Atomic Design appliquée à Storybook
- Standardisation et documentation des composants réutilisables
- Collaboration entre développeurs et designers via Storybook
- Gestion des mises à jour et du versionnement des composants
- Atelier pratique : Création d’un mini design system avec Storybook
[Jour 2 – Après-midi]
Optimisation et extension avancée
- Personnalisation de la configuration Storybook
- Utilisation d’addons avancés (interactions, viewport, backgrounds)
- Optimiser les performances de Storybook pour les gros projets
- Évolutivité : gestion de bibliothèques de composants complexes
- Atelier pratique : Intégration d’addons avancés dans un projet Storybook
Pourquoi choisir React ?
Si vous souhaitez en savoir davantage sur cette technologie, vous pouvez consulter nos articles sur React.
La formation est-elle dispensée en présentiel ou à distance ?
Cette formation se déroule en présentiel ou en distanciel.
Comment puis-je financer cette formation ?
Contactez-nous pour trouver une solution de financement sur mesure ! Nous vous aiderons à choisir parmi les options suivantes :
- OPCO (opérateurs de compétences) de votre entreprise
- Le plan de développement des compétences
- Les actions collectives pour les formations Big Data
- Le dispositif FNE-Formation
- Dispositif TPE / PME
- Pôle Emploi
- L’AIF (Aide Individuelle à la Formation pour les demandeurs d’emploi)
- L’ARE (Allocation chômage d’aide au retour à l’emploi)
- Le dispositif CPF (MonCompteformation)
- Contrat cadre
Qu'est-ce que le CPF ?
Le Compte Personnel de Formation est un dispositif régi par l’état français pour permettre aux salariés de disposer d’un financement mobilisable uniquement pour la formation.
Sur votre compte “Moncompteformation”, vous pouvez recevoir jusqu’à 500 euros par an cumulable. Les avantages qu’offre le CPF :
- Une formation finançable jusqu’à 100%
- Une formation de qualité approuvée par l’instance gouvernementale France Compétences
- L’obtention d’une certification délivrée par France Compétences
Pour aller plus loin
Formation React Avancé
Formation React Native
Formation ReactXP
Formation Angular Avancé
Formation Angular
Formation Vue.js
Autour du sujet
Langues et Lieux disponibles
Langues
- Français
- Anglais / English
Lieux
-
France entière
- Paris
- Lille
- Reims
- Lyon
- Toulouse
- Bordeaux
- Montpellier
- Nice
- Sophia Antipolis
- Marseille
- Aix-en-Provence
- Nantes
- Rennes
- Strasbourg
- Grenoble
- Dijon
- Tours
- Saint-Étienne
- Toulon
- Angers
-
Belgique
- Bruxelles
- Liège
-
Suisse
- Genève
- Zurich
- Lausanne
-
Luxembourg
Nos Formateurs Référents
Sydney
Sydney à créé plusieurs entreprises et est maintenant freelance full stack JavaScript. Titulaire d’un master en Digital Business de l’IE business school de Madrid, il fait partie de la génération 42. Passionné par les tendances technologiques et leur impact sur l’apprentissage. Il est le globetrotter d’Ambient.
Alexandre
Témoignages
⭐⭐⭐⭐⭐ 4,8/5 sur Google My Business. Vous aussi, partagez votre expérience !
Afficher tous les témoignages
⭐⭐⭐⭐⭐ 4,8/5 sur Google My Business. Vous aussi, partagez votre expérience !
Noter la formation
| € HT / personne |
| 2 jours (14 heures) |
UNE QUESTION ? UN PROJET ? UN AUDIT DE CODE / D'INFRASTRUCTURE ?
Pour vos besoins d’expertise que vous ne trouvez nulle part ailleurs, n’hésitez pas à nous contacter.
ILS SE SONT FORMÉS CHEZ NOUS
