Plop: Facilitando a criação de componentes

Sabe quando a gente precisa criar um novo componente(que acontece toda hora) e tem que ficar repetindo toda aquele mesmo código para criar a estrutura basica dos componentes e seus sub arquivos? Pois bem, agora vou mostrar um modo que vai facilitar isso em seus projetos. Vamos utilizar uma ferramenta chamada Plop e o que ela vai fazer é pegar um modelo de template que você vai criar (seu componete) e construir ele, personalizando algumas partes, sempre que você executar um comando no terminal. Aqui está a documentação do Plop, podem se basear por ela também, da pra fazer bem mais do que vou mostrar aqui. https://plopjs.com/documentation/ Vamos ao que interessa... npm install --save-dev plop Depois de instalado, vamos criar um arquivo chamado plopfile.js na raiz do projeto (para melhor organização, também pode ser criada uma pasta separada para ele, mas nesse caso será necessário redirecionar o local de criação dos templates). Mas enfim, é nesse arquivo que você vai configurar o Plop. A configuração inicial pode ser assim: ` module.exports = (plop) => { // create your generators here plop.setGenerator('component', { description: 'Create a component', prompts: [ { type: 'input', name: 'name', message: 'What is your component name?' } ], actions: [ { type: 'add', path: '../src/components/{{name}}/index.tsx', templateFile: 'templates/Component.tsx.hbs' }] }) } ` Vamos fatiar isso pra ver o que faz plop.setGenerator('componente', { description: 'Lógica de criação de componente da aplicação', Aqui você define o nome e uma descrição do que será criado. É importante que seja algo claro e simples para identificar seu componente. onde está escrito componente, deve ser o nome. E a descrição fica após o description mesmo. prompts: [{ type: 'input', name: 'name', message: 'Nome do componente, por favor' }], Quando você executar o comando para gerar o componente(resolvermos isso lá na frente), no seu terminal irá aparecer uma pergunta cuja resposta irá ser usada para personalizar seu componente, e aqui é onde você define ela. Type será o tipo, apenas mantenha assim. Name seria o nome( como uma variável para você acessar ) E mensagem é que será exibida para você, a pergunta, propriamente dita. actions: [{ type: 'add', path: '../src/components/{{name}}/index.tsx', templateFile: 'plop-templates/componente.tsx.hbs }] Nessa parte você irá definir onde será criado seu componente e qual será o arquivo que vais er usado como modelo. Mantenha esse type add No path você deve dizer o caminho. E aí já pode usar a variável nome que foi criada no passo anterior para personalizar seu componente. Em templateFile você deve dizer o caminho do arquivo base(faremos isso mais a frente). Note também que neste exemplo estaremos usando ../src/components/{{name}} Pois vai ser criada uma pasta componentes dentro do src para manter uma melhor organização do código e como o plop entende que está dentro do src acaba sendo necessário levar ele ao local certo. Criando o arquivo base Chegou a hora de criar o arquivo base do componente para servir como um modelo para o plop. Vamos criar um componente simples que renderiza seu nome, um arquivo de estilos e um arquivo para testes. Eles devem ser criados com o mesmo nome e na pasta que você indicou no passo anterior. Nesse caso, no arquivo plop-templates/componente.tsx.hbs. vamos ao código. import * as S from './styles' import { Text } from 'react-native' import React from 'react' const {{name}} = () => ( {{name}} ) export default {{name}} Isso nada mais é do que um modelo de como será gerado o componente, faça da forma que for melhor para seu projeto, lembre que a variável name foi definida lá no início. Não tem muito o que dizer aqui, vamos seguir. Configurando o package.json Vamos configurar o nosso package.json para criarr o comando que vai ser usado para dar vida a isso tudo. Encontre onde se encontra os seus scripts nos package.json. Fazendo da forma que estamos aqui você pode adicionar este código. "plop": "npx plop --plopfile generators/plopfile.js" Caso esteja fazendo com o arquivo plopfile.js na raiz do projeto pode adicionar esse: "plop": "npx plop" Feito isso, ao abrir o terminal e digitar npx run plop você deve receber uma pergunta e com isso já deve estar sendo gerado seu componente da forma que foi definido nos passos anteriores. Finalizando o plopfile.js Mas como disse no início, vamos trabalhar em cima de um arquivo styles e um arquivo de testes também, então vamos para as modificações no nosso arquivo plopfile.js... Vamos no actions e vamos alterar para que ele fique assim: actions: [ { type: 'add', path: '../src/components/{{name}}/index.tsx', templateFile: 'templates/Component.tsx.hbs' }, { type: 'add', path: '../src/components/{{name}}/styles.ts', templateFile: 'templates/styles.ts.hbs' }, { type: 'add', path: '../src/components/{{name}}/test.tsx', template

Mar 14, 2025 - 12:54

Plop: Facilitando a criação de componentes

Sabe quando a gente precisa criar um novo componente(que acontece toda hora) e tem que ficar repetindo toda aquele mesmo código para criar a estrutura basica dos componentes e seus sub arquivos?

Pois bem, agora vou mostrar um modo que vai facilitar isso em seus projetos.

Vamos utilizar uma ferramenta chamada **Plop **e o que ela vai fazer é pegar um modelo de template que você vai criar (seu componete) e construir ele, personalizando algumas partes, sempre que você executar um comando no terminal.

Aqui está a documentação do Plop, podem se basear por ela também, da pra fazer bem mais do que vou mostrar aqui.

https://plopjs.com/documentation/

Vamos ao que interessa...

npm install --save-dev plop

Depois de instalado, vamos criar um arquivo chamado plopfile.js na raiz do projeto (para melhor organização, também pode ser criada uma pasta separada para ele, mas nesse caso será necessário redirecionar o local de criação dos templates). Mas enfim, é nesse arquivo que você vai configurar o Plop. A configuração inicial pode ser assim:

`
module.exports = (plop) => {

// create your generators here

plop.setGenerator('component', {

description: 'Create a component',

prompts: [

{

type: 'input',

name: 'name',

message: 'What is your component name?'

}

actions: [

{

type: 'add',

path: '../src/components/{{name}}/index.tsx',

templateFile: 'templates/Component.tsx.hbs'

}]

})

}
`

**
Vamos fatiar isso pra ver o que faz**

plop.setGenerator('componente', {

description: 'Lógica de criação de componente da aplicação',

Aqui você define o nome e uma descrição do que será criado. É importante que seja algo claro e simples para identificar seu componente.

onde está escrito componente, deve ser o nome.

E a descrição fica após o description mesmo.

prompts: [{

type: 'input',

name: 'name',

message: 'Nome do componente, por favor'

}],

Quando você executar o comando para gerar o componente(resolvermos isso lá na frente), no seu terminal irá aparecer uma pergunta cuja resposta irá ser usada para personalizar seu componente, e aqui é onde você define ela.

Type será o tipo, apenas mantenha assim.

Name seria o nome( como uma variável para você acessar )

E mensagem é que será exibida para você, a pergunta, propriamente dita.

actions: [{

type: 'add',

path: '../src/components/{{name}}/index.tsx',

templateFile: 'plop-templates/componente.tsx.hbs

}]

Nessa parte você irá definir onde será criado seu componente e qual será o arquivo que vais er usado como modelo.

Mantenha esse type add

No path você deve dizer o caminho. E aí já pode usar a variável nome que foi criada no passo anterior para personalizar seu componente.

Em templateFile você deve dizer o caminho do arquivo base(faremos isso mais a frente).

Note também que neste exemplo estaremos usando ../src/components/{{name}}

Pois vai ser criada uma pasta componentes dentro do src para manter uma melhor organização do código e como o plop entende que está dentro do src acaba sendo necessário levar ele ao local certo.

Criando o arquivo base

Chegou a hora de criar o arquivo base do componente para servir como um modelo para o plop.

Vamos criar um componente simples que renderiza seu nome, um arquivo de estilos e um arquivo para testes. Eles devem ser criados com o mesmo nome e na pasta que você indicou no passo anterior.

Nesse caso, no arquivo plop-templates/componente.tsx.hbs.

vamos ao código.

import * as S from './styles'

import { Text } from 'react-native'

import React from 'react'

const {{name}} = () => (

)

export default {{name}}

Isso nada mais é do que um modelo de como será gerado o componente, faça da forma que for melhor para seu projeto, lembre que a variável name foi definida lá no início.

Não tem muito o que dizer aqui, vamos seguir.

*Configurando o package.json *

Vamos configurar o nosso package.json para criarr o comando que vai ser usado para dar vida a isso tudo.

Encontre onde se encontra os seus scripts nos package.json.

Fazendo da forma que estamos aqui você pode adicionar este código.

"plop": "npx plop --plopfile generators/plopfile.js"

Caso esteja fazendo com o arquivo plopfile.js na raiz do projeto pode adicionar esse:

"plop": "npx plop"

Feito isso, ao abrir o terminal e digitar npx run plop você deve receber uma pergunta e com isso já deve estar sendo gerado seu componente da forma que foi definido nos passos anteriores.

*Finalizando o plopfile.js *

Mas como disse no início, vamos trabalhar em cima de um arquivo styles e um arquivo de testes também, então vamos para as modificações no nosso arquivo plopfile.js...

Vamos no actions e vamos alterar para que ele fique assim:

actions: [

{

type: 'add',

path: '../src/components/{{name}}/index.tsx',

templateFile: 'templates/Component.tsx.hbs'

{

type: 'add',

path: '../src/components/{{name}}/styles.ts',

templateFile: 'templates/styles.ts.hbs'

{

type: 'add',

path: '../src/components/{{name}}/test.tsx',

templateFile: 'templates/test.tsx.hbs'

}

Dessa forma teremos nosso componente sendo criado com um arquivo index.tsx que será o arquivo principal, um arquivo styles.ts, e um arquivo test.tsx.

Algumas pessoas preferem que o principal tenha nome do componente, para isso penas adiciona a variável {{name}} no lugar de index.

*Criando o restante dos arquivos *

Pra finalizar vamos apenas criar nossos arquivos de testes e styles na pasta que foi definida lá em cima e GG.

Arquivo de estilos.

import styled from 'styled-components/native'

export const Container = styled.View`

flex: 1;

justify-content: center;

align-items: center;

background-color: #f5f5f5;

Arquivo de teste

import { render, fireEvent } from '@testing-library/react-native'

import {{name}} from '.'

//seus testes sao feitos aqui.

//descreva qual componente vai ser testado

describe('<{{name}} />', () => {

//it para dizer como vai testar

it('should be render', () => {

//aqui o seu teste em si, faça mais...

const { debug, getByText, getByTestId } = render(<{{name}} />)

})

Não tem muito o que dizer aqui, são apenas bases para seus arquivos.

Considerações Finais

Com isso temos nossos arquivos prontinhos para serem gerados com apenas um comando.

Você já pode criar uma vez e apenas ir reutilizando.

Vale lembrar que pode usar ele com outras tecnologias e para diversos casos, aqui foi apenas um componente mas a utilização vai depender apenas de sua necessidade e criatividade .

Qualquer dúvida fique a vontade para me chamar no particular, será um prazer tirar qualquer dúvida.

Allysson Cidade

Desenvolvedor Mobile |Front-end