Como iniciar uma biblioteca de componentes React com Storybook e Create-React-App – CloudSavvy IT

Reagir é um dos principais frameworks para desenvolvimento frontend com JavaScript. É uma abordagem naturalmente baseada em componentes em que você monta seu aplicativo a partir de peças reutilizáveis ​​de funcionalidade independente.

Uma etapa lógica é separar os componentes fundamentais da interface do usuário do código do aplicativo específico do cenário. A criação de uma biblioteca de componentes fornece blocos de construção prontos para uso que você pode inserir em seu próximo projeto.

Neste artigo vamos montar um conjunto simples de componentes React com Livro de histórias, em seguida, empacote-os usando Babel. O Storybook fornece uma maneira conveniente de inspecionar componentes durante e após seu desenvolvimento. É uma interface para navegar em sua biblioteca, experimentar os componentes incluídos e apresentar a documentação.

Não vamos aprofundar nenhuma tecnologia neste artigo: em vez disso, este é um guia geral de como desenvolver, empacotar e visualizar componentes usando a combinação de React, Storybook e Create-React-App.

O que é livro de histórias?

O Storybook é simplesmente um package de ferramentas para desenvolver e renderizar componentes isoladamente, fora do contexto em que aparecem em seu aplicativo. Ele fornece um mecanismo para construir componentes, documentar suas props e fornecer renderizações de exemplo interativas em uma interface do usuário baseada na internet. O Storybook é independente de framework: você pode usá-lo com Angular, Vue, Ember, Svelte e outros além do React.

Os componentes são criados escrevendo seu código React common e adicionando um segundo arquivo complementar que descreve as “histórias” para esse componente. Seu componente actual permanece inalterado; O livro de histórias obtém todas as informações de que precisa do .tales.jsArquivo. O Storybook descobre esses arquivos automaticamente e america seu conteúdo para criar entradas na interface do usuário da internet da sua biblioteca.

Veremos o modelo em ação mais tarde, quando começarmos a escrever componentes. Primeiro você precisa criar um novo projeto React e adicionar o Storybook a ele.

Inicializando seu projeto React

Vamos usar o common criar-reagir-aplicativo (CRA) toolkit para inicializar o projeto. Isso lhe dá tudo que você precisa para construir componentes React. Também é totalmente suportado pelo Storybook.

Abra seu terminal e digite este comando para criar sua biblioteca:

npx create-react-app my-components

pressione y para confirmar a instalação de create-react-app se você nunca usou a ferramenta antes. O processo de instalação pode levar alguns minutos. Assim que terminar, vá para o seu novo my-components diretório. O CRA terá adicionado as dependências do React ao seu bundle.json e scaffolded uma aplicação React básica no public e src diretórios.

O CRA think que você está desenvolvendo uma base de código que será entregue diretamente no navegador. Como estamos construindo uma biblioteca que não será executada como um aplicativo autônomo, você pode excluir com segurança o padrão public e src diretórios, se desejar.

Adicionando livro de histórias

É simples adicionar o Storybook a um projeto CRA existente. A execução deste comando fornecerá tudo o que você precisa:

npx sb init

Esteja preparado para esperar alguns minutos novamente enquanto os pacotes do Storybook são adicionados ao seu projeto. O instalador criará novos .storybook e tales diretórios. Este último contém um conjunto de componentes de exemplo. Exclua este diretório agora, pois não o usaremos.

Os arquivos dentro .storybook configurar seu servidor Storybook. major.js contém configurações globais, como os padrões de nome de arquivo para procurar histórias. preview.js controla como as histórias são renderizadas na interface do usuário da Internet do Storybook. As referências para ambos os arquivos estão disponíveis no Documentos do livro de histórias; por enquanto, apenas uma alteração é necessária.

O Storybook tem como padrão a procura de histórias em seu tales diretório. Isso não faz muito sentido para um projeto que é exclusivamente uma biblioteca de componentes. Colocaremos nossos componentes com suas histórias diretamente no src diretório, usando o formato src/ComponentName.js e src/ComponentName.tales.js. Mudar o tales campo em seu .storybook/major.js arquivo para referenciar src diretório em vez de tales:

module.exports = jsx

Este snippet significa que o Storybook descobrirá histórias em arquivos dentro do src diretório que tem um .tales.js sufixo; .jsx (Reagir JSX), .tse .tsx Variantes (TypeScript) também são suportadas. Se você não quiser usar essa estrutura de arquivo, reserve um pace agora para ajustar os padrões de correspondência do Storybook ao seu gosto.

Escrevendo seus componentes

Agora você está pronto para escrever seu primeiro componente. Crie seus componentes da maneira acquainted, usando a abordagem de sua preferência. Aqui está um botão simples que queremos usar em todos os nossos projetos de front-end:

import PropTypes from "prop-types";
 
const types = 
    background: "#fff",
    border: "0.2rem cast #0099ff",
    colour: "#0099ff",
    letterSpacing: "0.1em",
    fontWeight: "daring",
    padding: "1em",
    textTransform: "uppercase"
;
 
const Button = (disabled, label, onClick) => (
    <button disabled=(disabled ? "true" : "") onClick=onClick taste=types>
        label
    </button>
);
 
Button.propTypes = 
    disabled: PropTypes.bool,
    label: PropTypes.label,
    onClick: PropTypes.func
;
 
Button.defaultProps = 
    disabled: false
;
 
export default Button;

Em seguida, crie o arquivo de história do componente. É assim que o Storybook encontrará o componente e entenderá sua configuração.

import Button from "./Button.js";
 
export default 
    identify: "Button",
    element: Button,
    args: 
        label: "Demo Button"
    
;
 
const Template = args => <Button ...args />;
 
const Same old = Template.bind();
 
const Disabled = Template.bind();
Disabled.args = disabled: true, label: "Disabled Button";
 
export Same old, Disabled;

O do módulo default export fornece metadados para o Storybook. Este precisa ser um objeto que inclui identify e element propriedades. O identify é usado para rotular seu componente na interface do usuário do Storybook; element é a função ou classe do componente que você está expondo.

Livros de história args são equivalentes ao React props. O args A propriedade da exportação padrão outline efetivamente os valores de prop padrão a serem aplicados às instâncias de componentes renderizadas pelo Storybook. Aqui os botões recebem um rótulo de Demo Button se o adereço não for alterado mais tarde.

As exportações nomeadas do seu módulo definem as instâncias reais do componente que serão apresentadas em seu Storybook. Pelo menos um é necessário. Dois são criados aqui, o Same old botão em seu estado padrão, e um Disabled botão que outline o disabled prop para true.

Agora inicie o servidor de desenvolvimento do Storybook:

npm run storybook

Visita localhost:6006 em seu navegador para visualizar sua biblioteca de componentes. Você deve ver o seu Button componente na barra lateral com suas duas variações de história nomeadas. Clicar em uma das histórias mostrará o estado renderizado do componente.

A guia “Controles” abaixo da tela de renderização permite alterar dinamicamente os valores de prop na interface do Storybook. Isso torna rápido e fácil experimentar diferentes combinações de adereços ao descobrir componentes criados por outras pessoas. Existem algumas maneiras diferentes pelas quais o Storybook pode encontrar controles; neste caso, eles estão vindo de propTypes atribuído ao Button componente.

O Storybook lida automaticamente com as “ações” dos componentes, como as ações do nosso botão onClick suporte. Em um aplicativo actual, você deve fornecer uma função para esta prop que será chamada quando o botão for clicado. No Storybook, clicar no botão registra um evento no Aba “Ações” abaixo da tela. Isso inclui o nome do prop chamado e os parâmetros que seriam passados ​​para seu retorno de chamada.

Construindo com Babel

Agora escrevemos um componente React simples, criamos uma história para ele e usamos o Storybook para verificar as renderizações do componente da maneira que esperávamos. A próxima etapa é construir sua biblioteca de componentes e empacotá-la com npm, pronta para inclusão em seu próximo aplicativo.

Infelizmente você não pode simplesmente npm submit seus arquivos JavaScript brutos. Create React App não irá transpilar JSX dentro de pacotes no seu app node_modules pasta, então você obteria um erro de compilação ao tentar executar um projeto com seus componentes. Você precisa transpilar sua biblioteca de componentes antes da publicação usando uma ferramenta como Babel.

Comece adicionando um src/index.js arquivo que irá exportar a API pública do seu módulo:

import Button from "./Button.js";
export Button;

Isso permitirá que os usuários do seu pacote acessem o Button módulo escrevendo:

import Button from "@instance/example-components";

Ele oferece a liberdade de alterar os caminhos dos arquivos no futuro sem afetar os usuários de sua biblioteca. A API pública do seu pacote agora é definida pelas exportações de index.js.

Em seguida, adicione o Babel ao seu projeto com o seguinte comando:

npm set up --save-dev 
    @babel/cli 
    @babel/plugin-transform-react-jsx 
    @babel/preset-env 
    @babel/preset-react

Crie um .babelrc arquivo na raiz do seu projeto com este conteúdo:

    "presets": [
        "@babel/preset-env",
        "@babel/preset-react"
    ],
    "plugins": [
        [
            "@babel/plugin-transform-react-jsx",
            
                "runtime": "automatic"
            
        ]
    ]

Esta configuração do Babel ativa o suporte para React com o nova transformação JSX. Significa que você não precisa import React from "react"; no topo de cada arquivo que america JSX.

Por fim, adicione as seguintes linhas ao scripts seção do seu bundle.json Arquivo:

"scripts": 
    "get ready": "npm run dist",
    "dist": "rm -rf dist/* && babel src/ --out-dir dist --copy-files --no-copy-ignored --ignore src/**/*.tales.js"

O get ready script é executado automaticamente pelo npm antes que seu pacote seja publicado em um registro. Ele é usado aqui para compilar seus componentes cada vez que você envia uma nova versão.

Agora você pode executar npm run dist para criar uma compilação pronta para distribuição de sua biblioteca. Os arquivos de saída serão depositados no dist diretório. É uma boa ideia adicionar isso ao seu .gitignore Arquivo.

Faltam duas mudanças. O primeiro npm precisa ser instruído a publicar apenas os arquivos construídos em seu dist diretório. Isso é controlado através do information campo em seu bundle.json. O segundo ajuste é fazer referência à versão compilada do seu index.js como ponto de entrada do pacote usando o major campo:

    "information": [
        "dist"      
    ],
    "major": "dist/index.js"

Você Terminou! Agora você pode npm submit seu pacote e npm set up em um de seus aplicativos. O pacote baixado conterá apenas o código compilado, sem JSX e pronto para uso em seu projeto. Experimente com um exemplo mínimo em um novo aplicativo CRA:

import Button from "@instance/example-components";
 
export default () => <Button />;

Seu componente deve ter a mesma aparência da renderização do Storybook. Qualquer discrepância será devido à presença de estilos globais vazando do CSS do seu aplicativo.

Conclusão

É preciso um pouco de trabalho inicial para montar uma biblioteca de componentes React. Você precisa escrever os próprios componentes, encontrar uma maneira de inspecioná-los durante o desenvolvimento e oferecer um mecanismo para os usuários descobrirem, experimentarem e aprenderem sobre os componentes disponíveis. Quando chegar a hora de publicar seu pacote, você precisará configurar a transpilação e configurar o npm para servir seus arquivos compilados.

O Storybook get to the bottom of o primeiro desses desafios fornecendo uma interface dedicada para renderização e experimentação de componentes. É fácil de integrar com o Create React App, não requer alterações em seus componentes reais e se sobrepõe bem aos conceitos do React.

Você pode resolver os problemas de distribuição usando o Babel para produzir compilações transpiladas de seus componentes antes de publicá-los. npm’s major e information campos são úteis para controlar o que é empacotado e fornecer uma API pública conveniente para os usuários. Quando terminar de configurá-lo, você pode publicar seu pacote no registro npm ou em seu próprio servidor privado e importar seus componentes pré-criados sempre que precisar deles.