Pare de copiar e colar componentes React e use o create-component-app

Quem nunca copiou e colou um componente React para poder criar vários componentes diferentes, mas no meio do caminho acabou se enrolando por esquecer de tirar um método, variável ou atributo que não fazia sentido e isso acabou resultando em erros? Se você nunca fez isso, que atire o primeiro bloco de código.

Literalmente um bloco de código, rs

A ideia do projeto create-component-app é exatamente nos poupar deste trabalho de criar componentes do zero e/ou ficar copiando e colando outras estruturas que podem resultar em erros. O projeto — na qual a versão 1.0 saiu recentemente — é um gerador de diferentes tipos de componentes React à partir do terminal (ou do próprio editor).

Há uma série de opções que podem ser utilizadas:

• Criar componentes a partir do terminal
• Criar um arquivo de configuração para os componentes
• Passar um arquivo de configuração através de parâmetros para ser usado na criação dos componentes
• Criar os seus próprios templates
• E o melhor de tudo, você também pode usar templates criados pela comunidade!

Vamos dar uma olhada em como usar isso tudo na prática.

Utilização da Ferramenta

O primeiro passo é instalar a ferramenta de forma global na sua máquina utilizando o npm. Para isso, basta executar no seu terminal:

npm install -g create-component-app

E pronto! Você já está preparado pra usar a ferramenta! Basta entrar no seu terminal (dentro do seu editor mesmo), acessar o diretório do seu projeto e digitar o comando:

create-component-app

Então o programa começará a fazer uma série de perguntas que dizem respeito a estrutura do componente que você quer criar. Como por exemplo:

• Deseja utilizar um template? (s/n)
• Que tipo de componente você quer criar? (stateless, class, pure)
• Qual é o nome do seu componente?
• Que tipo de extensão você quer usar? (js, jsx)
• Deseja criar um arquivo de testes?
• etc

Respondendo as perguntas, o seu componente será criado a seu gosto. Veja só um exemplo:

Exemplo de criação de um componente usando a ferramenta

Bem legal, né? Mas não acaba ai…

Arquivos de configuração

Como eu havia comentado, podemos criar um arquivo de configuração para já deixar estabelecido como queremos nossos componentes. O arquivo deve ser de extensão .ccarc com este formato:

Exemplo de configuração para componentes

Templates da comunidade

Além dos templates próprios, também há possibilidade de utilizar templates feitos pela comunidade. Na pergunta Do you wanna choose a template?, basta escolher a opção yes. Feito isso, basta escolher o template desejado!

Conclusão

E ai, gostou? Então dá uma conferida na ferramenta, crie seus próprios templates e utilize os da comunidade! E se gostar muito, também contribua com o projeto e faça uma PR!

Gostou? Recomende 👏 este artigo , comente, acompanhe nossa publicação e compartilhe!

Siga nossa publicação e não perca os próximos artigos! http://www.codeprestige.com.br — Facebook, Twitter, Youtube