Create an Addon
  • Introducción
  • Configuración
  • Registrar complemento
  • Seguimiento de Estado
  • Decoradores
  • Preajuste
  • Agregar al catálogo
  • Conclusión
Framework:
React

Configuración

Comenzar con el kit de complementos

Usaremos el kit de complementos Addon Kit para iniciar nuestro proyecto. Nos brinda todo lo necesario para crear un complemento de Storybook:

  • 📝 Edición en vivo en modo de desarrollo
  • ⚛️ Soporte de React / JSX para el UI
  • 📦 Transpilar y empaquetar con Babel
  • 🏷 Plugin para metadatos
  • 🚢 Gestión de versiones con Auto

Para comenzar, clickea en el botón Use this template (Usar esta plantilla) en el repositorio del kit de complementos: Addon Kit repository. Esto generará un nuevo repositorio con todo el código del kit de complementos.

addon kit

A continuación, clona tu repositorio e instala las dependencias.

yarn

El Addon Kit usa TypeScript de forma predeterminada. Sin embargo, para los propósitos de este tutorial usaremos el comando eject para convertir el código en JavaScript .

yarn eject-ts

Esto convertirá todo el código a JS. Es un proceso destructivo, por lo que recomendamos ejecutarlo antes de comenzar a escribir cualquier código.

Finalmente, inicia el modo de desarrollo. Esto da inicio a Storybook y ejecuta Babel en modo observador (Watch Mode).

yarn start

El código del complemento vive en el directorio src. El código modelo incluido demuestra los tres paradigmas del UI y otros conceptos como la gestión del estado y la interacción con una historia. Exploraremos esto con más detalle en las próximas secciones.

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
Registrar complemento
Crea el UI del complemento y regístralo en 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