Tutorial de Storybook para React Native
O Storybook ajuda você a criar componentes de interface do usuário isolados da lógica de negócios e do contexto do seu aplicativo. Esta edição do tutorial Introdução ao Storybook é para React Native; existem outras edições para React, Vue, Angular, Svelte e Ember.
Configurar o Storybook no React Native
Precisamos seguir alguns passos para começar. Neste tutorial, usaremos este template onde já configuramos um aplicativo React Native usando o Expo e adicionamos o Storybook ao projeto.
Antes de prosseguir-mos, alguns tópicos importantes que temos que ter em mente:
- Para ajudá-lo ao longo do tutorial, você precisará de um telefone ou simulador previamente configurado para permitir a execução do aplicativo. Para obter mais informações, consulte a documentação do Expo para configurar iOS e Android.
- Este tutorial será focado em iOS/Android. O React Native pode ter como alvo outras plataformas que este tutorial não cobrirá.
- Você precisará do Node.js configurado no seu ambiente de desenvolvimento.
Comece por fazer o download do template que criámos para este tutorial:
npx degit chromaui/intro-storybook-react-native-template#main taskbox
Em seguida, vamos instalar as dependências e executar o aplicativo para garantir que tudo esteja funcionando conforme o esperado.
cd taskbox
yarn install
Agora que você tem o aplicativo, vamos executá-lo para garantir que tudo esteja funcionando conforme o esperado.
Você pode escolher ios ou android e executar qualquer um deles e verificar se o aplicativo está funcionando.
# Run the application on iOS
yarn ios
# Run the application on Android
yarn android
# Run Storybook on iOS
yarn storybook:ios
# Run Storybook on Android
yarn storybook:android
💡 Ao longo desta versão do tutorial, vai ser usado o Yarn para executar a maioria dos comandos. Se estiveres a seguir este tutorial e não tiveres o Yarn configurado, podes substituir os comandos para o teu gestor de pacotes preferido (por exemplo, npm, pnpm).
Ao executar o aplicativo com yarn ios
, você deve ver isso renderizado no dispositivo:
![expo starter screen](/tutorials/intro-to-storybook/react-native-expo-getting-started.png)
Ao executar o Storybook com yarn storybook:ios
, você deve ver isto:
![Storybook UI](/tutorials/intro-to-storybook/react-native-hello-world.png)
Como funciona
Á partida, quando inicializado, o template fornece toda a configuração necessária para que possamos começar a desenvolver a nossa aplicação com React Native. No entanto, antes de começarmos a desenvolver o nosso IU do zero, vamos ver como funciona o Storybook dentro de um aplicativo React Native e o que há de diferente.
Com o React Native, o Storybook é um componente que você pode renderizar no seu aplicativo, ao contrário de outras versões do Storybook, onde você pode executar o Storybook como um aplicativo separado de forma independente.
Por causa dessa distinção, precisamos de uma maneira de alternar entre o aplicativo e o Storybook. Para fazer isso, usamos variáveis de ambiente e veremos isso rapidamente agora.
💡 Consulte a documentação do Expo para obter mais detalhes sobre como usar variáveis de ambiente.
No nosso projeto existe um arquivo de configuração para Expo chamado app.config.js
, este arquivo é onde configuramos coisas como o nome do nosso aplicativo e constantes que podemos usar em todo o aplicativo.
E é aqui que configuramos a variável storybookEnabled
com o valor obtido da variável de ambiente STORYBOOK_ENABLED
, que veremos em breve como fazer.
export default ({ config }) => ({
...config,
name: 'Storybook Tutorial Template',
slug: 'storybook-tutorial-template',
extra: {
storybookEnabled: process.env.STORYBOOK_ENABLED,
},
});
Isso nos permite acessar a variável storybookEnabled
em nosso aplicativo usando a biblioteca expo-constants
e usamos isso para determinar se renderizamos o Storybook ou seu aplicativo.
import Constants from 'expo-constants';
function App() {
// ... removed for brevity
}
// Default to rendering your app
let AppEntryPoint = App;
// Render Storybook if storybookEnabled is true
if (Constants.expoConfig.extra.storybookEnabled === 'true') {
AppEntryPoint = require('./.storybook').default;
}
export default AppEntryPoint;
Podemos verificar no nosso ficheiro package.json
que temos alguns scripts novos vindos do Storybook. Estes scripts são usados para passar os valores da variável de ambiente para a aplicação, que vai ser usada para determinar se o Storybook deve ser renderizado ou não. Tudo isto usando a biblioteca cross-env
para garantir que as variáveis de ambiente funcionam em todos os sistemas operativos (Windows, MacOS, Linux).
{
"scripts": {
"storybook": "cross-env STORYBOOK_ENABLED='true' expo start",
"storybook:ios": "cross-env STORYBOOK_ENABLED='true' expo ios",
"storybook:android": "cross-env STORYBOOK_ENABLED='true' expo android"
}
}
É aqui que nossa variável de ambiente STORYBOOK_ENABLED
é definida como true, o que informa nosso aplicativo para renderizar o Storybook em vez da nossa aplicação.
Confirmar alterações
Nesta fase, é seguro adicionar nossos arquivos a um repositório local. Execute os seguintes comandos para inicializar um repositório local, adicionar e confirmar as alterações que fizemos até agora.
git init
Seguido por:
git add .
E em seguida:
git commit -m "first commit"
Finalmente:
git branch -M main
Vamos começar a construir nosso primeiro componente!