Back to Intro to Storybook
Chapters
  • Empezando
  • Componente Simple
  • Componente Compuesto
  • Datos
  • Pantallas
  • Desplegar
  • Testing
  • Complementos
  • Conclusion
  • Contribuir

Storybook para React tutorial

Configurar React Storybook en tu entorno de desarrollo
Esta traducción de la comunidad aún no se ha actualizado a la última versión de Storybook. Ayúdanos a actualizarlo aplicando los cambios en la guía en español para esta traducción. Pull requests son bienvenidos.

Storybook se ejecuta junto con tu aplicación en modo desarrollo. Te ayuda a crear componentes de UI aislados de la lógica y el contexto de tu aplicación. Esta edición de Aprende Storybook es para React; existe otras ediciones para React Native, Vue, Angular y Svelte.

Storybook and your app

Configurando React Storybook

Necesitaremos seguir algunos pasos para configurar el proceso de build de nuestro entorno. Para iniciar, vamos a usar degit para configurar nuestro sistema de build. Con este paquete, puedes descargar "plantillas" (aplicaciones parcialmente construidas con alguna configuración predeterminada) para ayudarte a acelerar tu flujo de trabajo de desarrollo.

Vamos a ejecutar los siguientes comandos:

# Clone the template
npx degit chromaui/intro-storybook-react-template taskbox

cd taskbox

# Install dependencies
yarn
💡 Esta plantilla contiene los estilos, recursos y configuraciones básicas necesarias para esta versión del tutorial.

Podemos comprobar rápidamente que los distintos entornos de nuestra aplicación funcionan correctamente:

# Run the test runner (Jest) in a terminal:
yarn test --watchAll

# Start the component explorer on port 6006:
yarn storybook

# Run the frontend app proper on port 3000:
yarn start
💡 Observa el indicador --watchAll en el comando de prueba. Si incluyes este indicador en tu comando, garantizarás que se ejecuten todas las pruebas. Mientras avanzas en este tutorial, vas a ver diferentes escenarios de prueba. Es posible que desees considerar ajustar los scripts de tu archivo package.json en consecuencia.

Nuestras tres modalidades para la aplicación frontend son: el test automatizado (Jest), el desarrollo de componentes (Storybook) y la propia aplicación.

3 modalidades

Dependiendo de la parte de la aplicación en la que estés trabajando, es posible que desees ejecutar una o varias de estas herramientas simultáneamente. Dado que nuestro objetivo actual es crear un único componente de UI, seguiremos ejecutando Storybook.

Guardar cambios

Ahora vamos a añadir nuestros archivos a un repositorio local. Ejecuta los siguientes comandos para inicializar un repositorio local, agregar y hacer commit de los cambios que hemos hecho hasta ahora.

Copy
git init

Seguido por:

Copy
git add .

Luego:

Copy
git commit -m "primer commit"

Y, por último:

Copy
git branch -M main

¡Comenzamos con la construcción de nuestro primer componente!

Keep your code in sync with this chapter. View bf3514f on GitHub.
Is this free guide helping you? Tweet to give kudos and help other devs find it.
Next Chapter
Componente Simple
Construye un componente simple en aislamiento
✍️ Edit on GitHub – PRs welcome!
Join the community
6,536 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI