Create an Addon
  • Présentation
  • Avant de commencer
  • Enregistrer l'addon
  • Suivre l'état
  • Décorateurs
  • Preset
  • Ajouter au catalogue
  • Conclusion
Framework:
React

Avant de commencer

Avant de commencer avec l'Addon Kit

Nous utiliserons l'Addon Kit pour initialiser notre projet. Il fournit tout ce dont vous avez besoin pour la création d'un addon Storybook :

  • 📝 Edition en direct en mode développement
  • ⚛️ Support React/JSX pour l'UI
  • 📦 Transpilation et bundling avec Babel
  • 🏷 Métadonnées de plugin
  • 🚢 Gestion de releases avec Auto

Pour commencer, cliquez sur le bouton Use this template sur le dépôt de l'Addon Kit. Cela créera un nouveau dépôt pour vous comprenant l'ensemble du code de l'Addon Kit.

addon kit

Ensuite, clonez le dépôt et installez les dépendances.

yarn

L'Addon Kit est écrit en TypeScript par défaut mais, par soucis de simplification pour ce tutoriel, nous utiliserons la commande eject pour avoir du simple JavaScript.

yarn eject-ts

Enfin, lancez le mode développement afin de démarrer Storybook et Babel en mode watch.

yarn start

Le code de l'addon se situe dans le répertoire src. L'exemple montre le fonctionnement des trois paradigmes UI et d'autres concepts comme la gestion d'état et comment interagir avec une story. Nous y reviendrons plus en détail dans les prochaines sections.

Keep your code in sync with this chapter. View d3b6651 on GitHub.
Is this free guide helping you? Tweet to give kudos and help other devs find it.
Next Chapter
Enregistrer l'addon
Créer l'UI de l'addon et l'enregistrer dans Storybook
✍️ Edit on GitHub – PRs welcome!
Docs
Documentation
Add Storybook to your project in less than a minute to build components faster and easier.
reactvueangularweb-components
Tutorial
Tutorials
Learn Storybook with in-depth tutorials that teaches Storybook best practices. Follow along with code samples.
Learn Storybook now
Storybook
The MIT License (MIT). Website design by @domyen and the awesome Storybook community.
StorybookShowcaseDocsTutorialsAddonsBlogReleasesGet involvedUse casesSupportTelemetryTeam
Community GitHub Twitter Discord chat Youtube Component Driven UIs
Subscribe
Get news, free tutorials, and Storybook tips emailed to you.

Maintained by
Chromatic
Continuous integration by
CircleCI
Hosting by
Netlify