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

Quem nunca copiou e colou um componente React↳React37 conteúdos7 erros com React moderno que só aparecem em produção; e como evitarDev (Back & Front) · abr 2026React Native 0.76: o futuro do desenvolvimento mobileDev (Back & Front) · out 2024Simplificando componentes com React HooksDev (Back & Front) · mar 2019Ver tudo em Dev (Back & Front) → 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.

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:

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!