New
Code coverage with Storybook test runnerAutomate with Chromatic
Star74,802
Back to Intro to Storybook
Chapters
  • Empezando
  • Componente Simple
  • Componente Compuesto
  • Datos
  • Pantallas
  • Desplegar
  • Testing
  • 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 Create React App (CRA) para configurar nuestro sistema de build, y añadiremos Storybook y Jest para testear nuestra aplicación creada. Vamos a ejecutar los siguientes comandos:

# Crea nuestra aplicación:
npx create-react-app taskbox
cd taskbox

# Añade Storybook:
npx storybook init

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

# Corre el test de prueba (Jest) en una terminal:
yarn test

# Inicia el explorador de componentes en el puerto 6006:
yarn run storybook

# Ejecuta el frontend de la aplicación en el puerto 3000:
yarn start

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

3 modalidades

Dependiendo de en qué parte de la aplicación estés trabajando, es posible que quieras ejecutar uno o más de estos simultáneamente. Dado que nuestro objetivo actual es crear un único componente de UI, seguiremos ejecutando Storybook.

Reusa CSS

Taskbox reutiliza elementos de diseño de la aplicación de ejemplo de este Tutorial de GraphQL y React, por lo que no necesitaremos escribir CSS en este tutorial. Simplemente compilaremos nuestros archivos LESS en un único archivo CSS y lo incluiremos en nuestra aplicación. Copia y pega este CSS compilado dentro del archivo src/index.css según la convención de CRA.

Buzón de tareas UI

Si deseas modificar los estilos, los archivos fuente de CSS en formato LESS son proporcionados en el mismo repositorio de GitHub.

Añade recursos

También necesitamos añadir la fuente y el icono de este directorio a la carpeta src/assets. Después de añadir los estilos y recursos, nuestra aplicación se renderizará de forma un poco extraña. Está bien. No estamos trabajando en la aplicación ahora mismo. Comenzamos con la construcción de nuestro primer componente!

Keep your code in sync with this chapter. View 9245261 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
5,870 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI