Intro to Storybook
  • Introdução
  • Componente simples
  • Componente composto
  • Dados
  • Ecrãs
  • Implementação
  • Testes
  • Extras
  • Conclusão
  • Contribuições
Framework:
ReactReact NativeVueAngularSvelteEmber

Tutorial do Storybook para o React

Configuração do React Storybook no ambiente de desenvolvimento React
Esta tradução feita pela comunidade ainda não foi atualizada para a versão mais recente do Storybook. Ajude-nos a atualizá-la aplicando as alterações no guia em português para esta tradução. Pull requests são bem-vindos.

O Storybook executa paralelamente à aplicação em desenvolvimento. Ajuda-o a construir componentes de interface de utilizador (UI na forma original) isolados da lógica de negócio e contexto da aplicação. Esta edição de Aprendizagem de Storybook é destinada para React. Encontram-se disponíveis outras edições quer para Vue, quer para Angular.

Storybook e a aplicação

Configurar o Storybook com React

Precisamos de alguns passos extra para configurar o processo de compilação no nosso ambiente de desenvolvimento. Para começar queremos usar o pacote Create React App ou como é vulgarmente conhecido (CRA), para compilação e permitir ao Storybook e Jest fazerem testes na nossa aplicação. Vamos executar os seguintes comandos:

# Create our application:
npx create-react-app taskbox

cd taskbox

# Add Storybook:
npx -p @storybook/cli sb init
Ao longo desta versão do tutorial, vai ser usado o yarn para executar a maioria dos comandos. Se tiver o Yarn instalado, mas preferir usar npm, não há qualquer problema, pode continuar a seguir o tutorial sem problemas. Somente terá que adicionar a seguinte opção: --use-npm ao primeiro comando mencionado acima e tanto o CRA como o Storybook irão inicializar com base nesta opção. À medida que progride no tutorial, não esqueça de ajustar os comandos mencionados para os equivalentes npm.

Podemos rapidamente verificar que os vários ecossistemas da nossa aplicação estão a funcionar corretamente:

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

# Start the component explorer on port 6006:
yarn run storybook

# Run the frontend app proper on port 3000:
yarn start
Pode ter reparado que foi adicionada a opção --watchAll no comando de testes, não se preocupe, é intencional. Esta pequena alteração irá garantir que todos os testes sejam executados e que a nossa aplicação está a funcionar corretamente. À medida que progride no tutorial, irão ser apresentados diversos cenários de testes, talvez queira considerar e adicionar esta opção ao script de testes no ficheiro (ou arquivo) package.json para garantir que todos os testes sejam executados.

As três modalidades de frontend da aplicação: testes automáticos (Jest), desenvolvimento de componentes (Storybook) e a aplicação em si.

3 modalidades

Dependendo de qual parte da aplicação em que está a trabalhar, pode querer executar uma ou mais simultaneamente. Mas, visto que o nosso foco é a criação de um único componente de interface de utilizador (UI na forma original), vamos ficar somente pela execução do Storybook.

Reutilizar CSS

A Taskbox reutiliza elementos de design deste tutorial React e GraphQL, logo não precisamos escrever CSS neste tutorial. Copie e cole o CSS compilado no ficheiro (ou arquivo) src/index.css.

Interface Utilizador Taskbox

Se for necessária alguma alteração aos elementos de estilo, os ficheiros LESS originais encontram-se disponíveis no repositório Github.

Adicionar recursos

De forma a igualar o design pretendido do tutorial, terá que transferir as pastas (ou diretórios) dos ícones e fontes para dentro da pasta src/assets.

npx degit chromaui/learnstorybook-code/src/assets/font src/assets/font
npx degit chromaui/learnstorybook-code/src/assets/icon src/assets/icon
Foi usado o degit para transferir pastas do GitHub. Se quiser transferir manualmente, pode obtê las aqui.

Após adicionar os estilos e assets, a aplicação irá renderizar de forma estranha. Tudo bem. Não vamos trabalhar nela agora. Vamos antes começar por construir o nosso primeiro 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 simples
Construção de um componente simples isolado
✍️ 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