Gerador de CRUD para React JS - Cliente
Este é um pacote simples de código aberto para criar CRUD para React JS
Características
- Automatização de operações crud
- Ganho em produtividade;
- Crie um crud completo;
- Crie partes do crud separadamente;
- Uso interativo das bibliotecas
Chalk, inquirer e esm
; - Desenvolvido utilizando ES6.
Motivação
Não sei vocês, mas, para mim, umas das coisas mais chatas em programação é criar um crud completo do zero, principalmente, na questão de update, porque exige que façamos a busca e, somente depois, a atualização. Ou seja, temos que fazer uma requisição buscando os dados e, em seguida, fazer outra requisição para a atualização, usando, geralmente, formulários.
Eu percebi que eu não estava tendo muita produtividade, porque sempre me perdia muito temo no U, do CRUD. Sempre o deixava para a última hora. E, sinceramente, eu já programo há muito tempo (não sou um expert da programação), mas sempre me empanco nisso.
Foi pensando nisso, que veio ao meu pensando a ideia de criar uma CLI capaz de resolver esse problema para mim. A sua usabilidade é muito simples, porque uso o inquirer para interação de usuário com o terminal em 6 passos somente.
Vamos lá!
Sistemas Operacionais suportados testados.
- Windows
- Linux
Os formatos das requisições podem ser em:
- GraphQL
- Rest
Como utilizar
Instale:
# Salve-a globalmente $ npm i -g cg-react
https://www.npmjs.com/package/cg-react
Para criar um crud, por exemplo, denominado User, com os campos: nome, idade, senha, email e celular, siga estes passos:
Na raiz do projeto React Js, execute o comando:
$ cg-react
- Na opção 1/6, digite: User
- Na opção 2/6, escolha: controller
- Na opção 3/6, digite os campos separados por ponto e vírgula, assim: nome; idade; senha; email; celular
- Na opção 4/6, escolha: all
- Na opção 5/6, escolha: rest
- Na opção 6/6, escolha: criar arquivos na pasta components
Existem duas opções de saída:
- Criação dos componentes na pasta
components
- Cópia para a área de transferência
Imagem ilustrativa tirada do teste:
Ao finalizar, serão criada duas pastas caso não existam:
- components
- services
Conteúdos dos componentes criados:
UserCreate
;;const UserCreate = {const nome setNome = ;const idade setIdade = ;const senha setSenha = ;const email setEmail = ;const celular setCelular = ;const onSubmit = async {const data = await api;console; // Dataev;};return<><form onSubmit=onSubmit><div><label htmlFor="nome_1">Nome</label><inputname="nome"id="nome_1"value=nomeonChange= {;}/></div><div><label htmlFor="idade_1">Idade</label><inputname="idade"id="idade_1"value=idadeonChange= {;}/></div><div><label htmlFor="senha_1">Senha</label><inputname="senha"id="senha_1"value=senhaonChange= {;}/></div><div><label htmlFor="email_1">Email</label><inputname="email"id="email_1"value=emailonChange= {;}/></div><div><label htmlFor="celular_1">Celular</label><inputname="celular"id="celular_1"value=celularonChange= {;}/></div><button className="" type="submit">Salvar</button></form></>;};;
UserEdit
;;const UserEdit = {const nome setNome = ;const idade setIdade = ;const senha setSenha = ;const email setEmail = ;const celular setCelular = ;const getUser = async {const data = await api;;;;;;console; // Dataev;};;const onSubmit = async {const data = await api;console; // Dataev;};return<><form onSubmit=onSubmit><div><label htmlFor="nome_1">Nome</label><inputname="nome"id="nome_1"value=nomeonChange= {;}/></div><div><label htmlFor="idade_1">Idade</label><inputname="idade"id="idade_1"value=idadeonChange= {;}/></div><div><label htmlFor="senha_1">Senha</label><inputname="senha"id="senha_1"value=senhaonChange= {;}/></div><div><label htmlFor="email_1">Email</label><inputname="email"id="email_1"value=emailonChange= {;}/></div><div><label htmlFor="celular_1">Celular</label><inputname="celular"id="celular_1"value=celularonChange= {;}/></div><button className="" type="submit">Salvar alterações</button></form></>;};;
UserRead
;;const UserRead = {const users setUsers = ;const getUsers = async {const data = await api;;};;return<table className="table"><thead><tr><th>NOME</th><th>IDADE</th><th>SENHA</th><th>EMAIL</th><th>CELULAR</th></tr></thead><tbody>users ||</tbody></table>;};;
A estrutura final é esta:
raiz do projeto:
├── components/ # A pasta components, onde os componentes ficarão
| ├── User/ # O novo componente criado
| | ├── UserCreate.js/ # O arquivo para criar
| | ├── UserEdit.js/ # O arquivo para editar
| | └── UserRead.js # O arquivo para listagem
├── services/
| ├── api.js/ # O arquivo axios
| └── config.js # Arquivo de configuração do sistema.
└── ...
Não se esqueça de dá aquele velho shift+alt+f em cada arquivo gerado para formatá-lo.
A estrutura acima pode ser realocada de acordo com as suas necessidades.
Você tem liberdade para brincar com o pacote, fique à vontade.