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!