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

import React, { useState, useEffect } from 'react';
import api from '../../services/axios';

const UserCreate = () => {
  const [nome, setNome] = useState('');
  const [idade, setIdade] = useState('');
  const [senha, setSenha] = useState('');
  const [email, setEmail] = useState('');
  const [celular, setCelular] = useState('');

  const onSubmit = async (ev) => {
    const { data } = await api.post(
      '/users',
      { nome, idade, senha, email, celular },
      {
        headers: {
          'Content-Type': 'application/json',
        },
      }
    );
    console.log(data); // Data
    ev.preventDefault();
  };

  return (
    <>
      <form onSubmit={onSubmit}>
        <div>
          <label htmlFor="nome_1">Nome</label>
          <input
            name="nome"
            id="nome_1"
            value={nome}
            onChange={({ target }) => {
              setNome(target.value);
            }}
          />
        </div>
        <div>
          <label htmlFor="idade_1">Idade</label>
          <input
            name="idade"
            id="idade_1"
            value={idade}
            onChange={({ target }) => {
              setIdade(target.value);
            }}
          />
        </div>
        <div>
          <label htmlFor="senha_1">Senha</label>
          <input
            name="senha"
            id="senha_1"
            value={senha}
            onChange={({ target }) => {
              setSenha(target.value);
            }}
          />
        </div>
        <div>
          <label htmlFor="email_1">Email</label>
          <input
            name="email"
            id="email_1"
            value={email}
            onChange={({ target }) => {
              setEmail(target.value);
            }}
          />
        </div>
        <div>
          <label htmlFor="celular_1">Celular</label>
          <input
            name="celular"
            id="celular_1"
            value={celular}
            onChange={({ target }) => {
              setCelular(target.value);
            }}
          />
        </div>
        <button className="" type="submit">
          Salvar
        </button>
      </form>
    </>
  );
};

export default UserCreate;

UserEdit

import React, { useState, useEffect } from 'react';
import api from '../../services/axios';

const UserEdit = () => {
  const [nome, setNome] = useState('');
  const [idade, setIdade] = useState('');
  const [senha, setSenha] = useState('');
  const [email, setEmail] = useState('');
  const [celular, setCelular] = useState('');

  const getUser = async (ev) => {
    const { data } = await api.get('/user/INPUT_ID_FROM_USER_HERE', {
      headers: {
        'Content-Type': 'application/json',
      },
    });
    setNome(data.nome);
    setIdade(data.idade);
    setSenha(data.senha);
    setEmail(data.email);
    setCelular(data.celular);
    console.log(data); // Data
    ev.preventDefault();
  };

  useEffect(() => {
    getUser();
  }, []);

  const onSubmit = async (ev) => {
    const { data } = await api.put(
      '/users',
      { nome, idade, senha, email, celular },
      {
        headers: {
          'Content-Type': 'application/json',
        },
      }
    );
    console.log(data); // Data
    ev.preventDefault();
  };

  return (
    <>
      <form onSubmit={onSubmit}>
        <div>
          <label htmlFor="nome_1">Nome</label>
          <input
            name="nome"
            id="nome_1"
            value={nome}
            onChange={({ target }) => {
              setNome(target.value);
            }}
          />
        </div>
        <div>
          <label htmlFor="idade_1">Idade</label>
          <input
            name="idade"
            id="idade_1"
            value={idade}
            onChange={({ target }) => {
              setIdade(target.value);
            }}
          />
        </div>
        <div>
          <label htmlFor="senha_1">Senha</label>
          <input
            name="senha"
            id="senha_1"
            value={senha}
            onChange={({ target }) => {
              setSenha(target.value);
            }}
          />
        </div>
        <div>
          <label htmlFor="email_1">Email</label>
          <input
            name="email"
            id="email_1"
            value={email}
            onChange={({ target }) => {
              setEmail(target.value);
            }}
          />
        </div>
        <div>
          <label htmlFor="celular_1">Celular</label>
          <input
            name="celular"
            id="celular_1"
            value={celular}
            onChange={({ target }) => {
              setCelular(target.value);
            }}
          />
        </div>
        <button className="" type="submit">
          Salvar alterações
        </button>
      </form>
    </>
  );
};

export default UserEdit;

UserRead

import React, { useState, useEffect } from 'react';
import api from '../../services/axios';

const UserRead = () => {
  const [users, setUsers] = useState('');

  const getUsers = async () => {
    const { data } = await api.get('/users');
    setUsers([...users, data]);
  };

  useEffect(() => {
    getUsers();
  }, []);
  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 || []).map((item) => {
          return (
            <tr key={item.id}>
              <td>{item.nome}</td>
              <td>{item.idade}</td>
              <td>{item.senha}</td>
              <td>{item.email}</td>
              <td>{item.celular}</td>
            </tr>
          );
        })}
      </tbody>
    </table>
  );
};

export default UserRead;

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.

Seja um contribuidor deste projeto ❤️.