Permalink
Branch: master
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
78 lines (52 sloc) 3.54 KB
title tocTitle description
Introdução
Introdução
Configuração do React Storybook no ambiente de desenvolvimento

Introdução

Storybook funciona em paralelo á aplicação em modo de desenvolvimento. Ajuda na construção de componentes de interface de utilizador isolados de qualquer lógica 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

Configuração de Storybook com React

Irão ser necessárias algumas etapas adicionais de forma a ser possível 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 configurar o nosso ambiente local e ativar o modo de testes com Storybook e Jest na nossa aplicação.

Para tal vamos executar os seguintes comandos:

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

# Add Storybook:
npx -p @storybook/cli sb init

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

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

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

# Run the frontend app proper on port 3000:
yarn start
Nota: Se yarn test emitir um erro, será necessário instalar o pacote watchman, tal como recomendado neste problema

Sendo estes os seguintes: testes automáticos (Jest), desenvolvimento de componentes (Storybook) e a aplicação em si.

3 modalidades

Dependendo de qual parte da aplicação que estamos a trabalhar, podemos querer executar um ou mais simultâneamente. Visto que neste caso, o foco é a criação de um componente de interface de utilizador simples, iremos cingir-nos somente á execução de Storybook.

Reutilização CSS

A Taskbox reutiliza elementos de design do tutorial de React e GraphQL Tutorial React e GraphQL, como tal não será necessária a criação de CSS neste tutorial.

Com isto o conteúdo do ficheiro LESS será compilado num único ficheiro CSS e incluido na aplicação.

O CSS compilado encontra-se disponível aqui e pela convenção CRA(Create React App) será necessário copiar seu conteúdo para o seguinte ficheiro 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

Irá ser necessário adicionar também as pastas com o tipo de letra e ícones que se encontram disponíveis aqui á pasta public. Ao adicionar estes elementos, a aplicação irá renderizar de forma algo estranha. Mas isto é de esperar, visto que não iremos trabalhar na aplicação agora. Iremos então iniciar o desenvolvimento do nosso primeiro componente!