New
Code coverage with Storybook test runnerAutomate with Chromatic
Star74,802
Back to Create an Addon
React
Chapters
  • Présentation
  • Avant de commencer
  • Enregistrer l'addon
  • Suivre l'état
  • Décorateurs
  • Preset
  • Ajouter au catalogue
  • Conclusion

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.

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

Copy
yarn eject-ts

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

Copy
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!
Join the community
5,870 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI