Introdução

Um dos muitos argumentos de venda do React é que os usuários podem construir componentes e reutilizá-los repetidamente em uma base de código específica. Você pode levar esse recurso adiante com a ajuda da ferramenta de desenvolvedor React Cosmos.

O React Cosmos é usado para construir componentes React isolados e escalonáveis. Ele permite que você crie um único componente para seu aplicativo React. Você pode considerar diferentes casos de uso, bem como diferentes padrões de design ao usar o React Cosmos, o que permitirá que você crie componentes isolados e muito versáteis que se ajustam a muitas outras condições.

Benefícios do uso do React Cosmos

O React Cosmos funciona fazendo uso de recursos de componentes. A soma desses recursos de componentes é o que compõe sua biblioteca de componentes. Isso é então renderizado em uma IU para fácil rastreamento. Um grande benefício de usar o React Cosmos é que ele pode escanear qualquer um de seus projetos React e permitir que você renderize os componentes dentro de cada um deles, com qualquer combinação de adereços ou em qualquer estado.

Nesta seção, examinaremos alguns dos muitos benefícios de usar o React Cosmos.

Criação de componente reutilizável

Conforme declarado anteriormente, o React Cosmos aproveita os benefícios da capacidade de reutilização do React para o próximo nível, permitindo a criação de componentes isolados e reutilizáveis. Isso dá a você mais espaço para criar uma arquitetura robusta, evitando que você tenha que reescrever uma IU já definida.

Compartilhamento da IU em diferentes projetos

Além de reutilizar uma IU em um determinado projeto, o React Cosmos permite a reutilização de um componente em vários projetos em seu portfólio. Isso é muito útil para criar uma marca sólida e uniforme em seu projeto.

Depuração fácil

É muito mais fácil identificar e corrigir erros em seu aplicativo quando você usa o React Cosmos porque ele isola os componentes em unidades individuais, em vez de forçá-lo a trabalhar com componentes não isolados. Isso torna o desenvolvimento muito mais fácil e rápido porque é muito mais fácil descobrir as fontes de erro.

Crie e publique sua biblioteca de componentes

Você pode disponibilizar publicamente qualquer um dos componentes do React Cosmos para seus colegas de trabalho ou para qualquer pessoa na Internet. Isso pode ser útil se você decidir construir ou lançar sua própria biblioteca de componentes para uso público.

Simulação de API externa em tempo real

Os usuários podem ver o estado atual de seus aplicativos em tempo real simulando APIs externas. Isso torna o desenvolvimento mais rápido e também pode ser útil durante a depuração.

Instalação do React Cosmos

O React Cosmos pode ser usado em qualquer projeto React ou React Native, mas, neste artigo, vamos nos concentrar no React. Certifique-se de que você instalou seu projeto React de antemão com o uso de npx create-react-app .

Agora, vamos instalar o React Cosmos em nosso projeto React usando npm (Node Package Manager):

 npm i--D react-cosmos 

ou Yarn:

 yarn add--dev react-cosmos 

Você pode confirmar se a instalação foi bem-sucedida verificando o arquivo package.json em seu projeto React.

Após a instalação, a próxima etapa é criar um script package.json em seu aplicativo. Isso permitirá que você inicie seu projeto Cosmos. Inclua o seguinte código na seção de script de seu arquivo package.json :

"scripts": { "cosmos":"cosmos", "cosmos: export":"cosmos-export"
}

Todo o seu arquivo package.json deve ter a seguinte aparência:

 { "nome":"reactcosmos", "versão":"0.1.0", "privado": verdadeiro, "dependências": { "@ testing-library/jest-dom":"^ 5.12.0", "@ testing-library/react":"^ 11.2.7", "@ testing-library/user-event":"^ 12.8.3", "react":"^ 17.0.2", "react-dom":"^ 17.0.2", "react-scripts":"4.0.3", "web-vitals":"^ 1.1.2" }, "scripts": { "start":"react-scripts start", "build":"react-scripts build", "test":"teste react-scripts", "eject":"react-scripts eject", "cosmos":"cosmos", "cosmos: export":"cosmos-export" }, "eslintConfig": { "extends": [ "react-app", "react-app/jest" ] }, "lista de navegadores": { "Produção": [ "> 0,2%", "não morto", "não op_mini all" ], "desenvolvimento": [ "última 1 versão do Chrome", "última 1 versão do firefox", "última 1 versão safari" ] }, "devDependencies": { "react-cosmos":"^ 5.6.2" }
}

Vamos iniciar nosso aplicativo.

Lançando nosso aplicativo React com React Cosmos

Execute o comando abaixo em seu terminal:

Usando npm:

 npm run cosmos 

Ou, usando o Yarn:

 cosmos do fio 

Você deve ser solicitado a visitar localhost: 5000 para visualizar suas bibliotecas de componentes. Você não verá nenhum componente lá ainda porque não construímos nenhum.

Se você se deparar com uma mensagem de erro, deve fazer o seguinte:

1. Crie um arquivo chamado babel.config.js e atualize seu conteúdo com o código abaixo:

    module.exports={ predefinições: [ ['@ babel/preset-env', {targets: {node:'current'}}], ['@ babel/preset-react', {alvos: {node:'current'}}]//adicione isto ]
   }; 

2. Crie outro arquivo chamado postcss.config.js e atualize seu conteúdo da seguinte forma:

    module.exports={} 

Isso deve corrigir quaisquer problemas de Babel ou PostCSS. Se o erro persistir, você pode ler a mensagem e tentar solucionar o problema ou navegar pela mensagem de erro em seu navegador favorito.

Construindo nosso primeiro componente React

Para construir nosso primeiro componente, precisamos criar um acessório. Os arquivos de fixação geralmente contêm apenas uma exportação padrão-um componente React ou um nó React. Para criar um, precisamos adicionar .fixture ao nome do arquivo que contém nosso componente-usaremos main.fixture.js . Dessa forma, o React Cosmos pode rastreá-lo facilmente.

Continue criando um arquivo chamado button.fixture.js dentro da pasta src de seu aplicativo React. A próxima etapa é atualizar o arquivo com o código abaixo:

//button.fixture.jsx
import React from'react'; função padrão de exportação Hello () { return 
 Olá, Mundo 
}

Viva! Você acabou de criar seu primeiro componente isolado usando o React Cosmos. Para confirmar isso, vá para localhost: 5000 novamente, onde você deve ver seu primeiro componente listado em Todas as luminárias .

Atualizando seus componentes React

Agora que criamos com sucesso nosso primeiro componente, podemos prosseguir para atualizá-lo. Nesta seção, construiremos um componente de botão. Prossiga para atualizar o conteúdo do nosso arquivo button.fixture.js conforme mostrado abaixo.

 import React from'react';
import'./button.fixture.css' função padrão de exportação Button () { return  Ei, Clique aqui ;
}

O que fizemos acima foi criar uma tag de botão e vincular nossa folha de estilo CSS ainda a ser criada. Agora, crie outro arquivo chamado button.fixture.css para o estilo do nosso componente de botão. Atualize o conteúdo do novo arquivo da seguinte maneira:

 botão { preenchimento: 10px 20px; cor: #fff; fronteira: nenhum; esboço: nenhum; cor de fundo: azul-petróleo; raio da borda: 8px; display: bloco; margem: automático; margem superior: 40px; cursor: ponteiro;
}

Isso estilizará o botão recém-criado. Você pode prosseguir novamente para localhost: 5000 para ver as mudanças que fizemos em nosso componente.

Criamos e atualizamos com sucesso nosso componente de botão isolado! Agora ele pode ser usado para nossos diferentes aplicativos. Conforme você cria mais componentes, eles aparecem no painel pré-renderizado para visualização.

Observe que os arquivos de fixture devem estar localizados na pasta src de seu aplicativo React. Você pode criar um fixture adicionando .fixture ao seu nome de arquivo ou criando uma pasta __fixtures__ e colocando todos os seus arquivos de fixture dentro dela.

Arquivos multi-fixture

Pode ser um desafio exportar mais de um componente de um único arquivo de fixação, especialmente quando você permite apenas uma exportação padrão. Você pode contornar esse problema colocando seus componentes na forma de um objeto , conforme mostrado abaixo; isso permitirá que você exporte vários componentes com um arquivo de fixação.

 export default { primário:  Clique em mim , primaryDisabled:  Click me , secundário:  Clique em mim , SecondaryDisabled:  Click me ,
};

Conclusão

O React Cosmos é uma excelente maneira de criar um componente isolado para seu aplicativo React atual ou futuro, principalmente porque é fácil de usar e com depuração rápida, entre outros benefícios. Experimente o React Cosmos para um desenvolvimento fácil e rápido na próxima vez que você estiver criando componentes!

A postagem Getting started with React Cosmos apareceu primeiro em LogRocket Blog .