Desenvolvimento

22 nov, 2017

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

Publicidade

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!

A ideia do projeto create-component-app é exatamente nos poupar desse 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 a 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 processo é extremamente simples. O primeiro passo é instalar a ferramenta de forma global na sua máquina utilizando o npm. Para isso, basta executar este comando no seu terminal:

npm install -g create-component-app

E pronto! Você já está preparado para usar a ferramenta! É só entrar no seu terminal (pode ser 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 à 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 à 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:

{
    "type": "class",
    "path": "./src/components",
    "jsExtension": "js",
    "cssExtension": "scss",
    "includeTests": false,
    "includeStories": false,
    "indexFile": false,
    "connected": false,
    "componentMethods": [
        "componentDidMount",
        "shouldComponentUpdate",
        "onClick"
    ],
    "fileNames": {
        "testFileMatch": "spec",
        "testFileName": "myTest",
        "componentFileName": "template",
        "styleFileName": "style"
    }
}

Basta configurá-lo e deixá-lo no diretório do seu projeto. Toda vez que você quiser criar um componente, o programa irá interpretar este arquivo e te oferecer as opções estabelecidas.

Templates da comunidade

Além dos templates próprios — os quais os passos para criação estão aqui — 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 aí, gostou? Então dá uma conferida na ferramenta, crie seus próprios templates (deixe aqui nos comentários!) e utilize os desenvolvidos pela comunidade! E se gostar muito, também contribua com o projeto e faça uma PR!