Como posso refatorar a parte da localização dos elementos no HTML?

[Sup3r-Us3r]

Boa tarde pessoal, gostaria de saber como posso melhorar meu código para não ter que criar uma variável a cada elemento existente no meu HTML para eu poder manipula-lo.

Sou iniciante com Javascript ainda, e estou criando um CRUD, que está até 90% pronto, todas as funções de um CRUD estão funcionando, estou usando o JS + Nodejs + MongoDB + Docker + Tailwindcss, enfim o código que contém toda parte que manipula o HTML é essa:

Código no Gist

O problema maior está no constructor da minha class, porque está super poluído, queria aprender a já criar padronizações, seguir padrões essas coisas, boas práticas, para deixar o mais profissional possível.

A princípio tentei contornar essa poluição tentando fazer a mesma coisa que fiz no método editUser() para identificar os campos da tabela, pegar seus valores e setar eles no formulário.

---

Algumas outras dúvidas que tenho, que seria massa se fosse respondidas é:

• É profissional usar somente 1 formulário para realizar todas as operações?
• O que de mais importante precisa saber de JS para iniciar com ReactJS?

Desde já agradeço!

[ninetails]

Sobre o Gist: Tá legal e bem estruturado. Creio que para melhorar essa parte e aprofundar, eu recomendaria que vc desse uma lida em refatoração (do Martin Fowler), GoF se vc for mesmo pra estruturas orientadas a objeto. Ou no geral, ir atrás de Clean Code e SOLID.

Se for refatorar a parte em específica do construtor, vc poderia fazer um método auxiliar:

class FormAddAndUpdate {
  // ...
  constructor (elementsId = {}) {
    this.setElements(elementsId)
  }

  setElements (elements = {}) {
    Object.keys(elements)
      .forEach(key => {
        const nodes = [...document.querySelectorAll(elements[key])]
        this[`_${key}El`] = nodes.length === 1 ? nodes.pop() : nodes
      })
  }
  // ...
}

Um form fazer tudo não é problema. É o contrário: não se limite a formulários. Pra backend faz sentido a interação com usuário ter CRUDs, pro front a gente é mais voltado a ação do usuário: Tal ação faz tal coisa e roda tal funcionalidade e gera certo output. Claro que fatalmente temos de fazer uns CRUDs mas é bem mais abstrato que isso.

Mas esse código é bem vanilla e mesmo para código vanilla, o ideal (e mais usual de mercado a se fazer) seria estruturar melhor o código e em arquivos separados (e depois junta tudo usando um bundler: webpack, rollup, parcel etc).

Fazendo em arquivos separados vc consegue aplicar boas práticas e padrões já existentes inclusive de outras linguagens, dividir seu código por responsabilidades, aproveitar e importar frameworks e bibliotecas...

Como vc mesmo citou, React é uma delas. Creio que o que inicialmente se precisa saber de JS para começar com React já sabendo JS é tentar desatrelar que JS é só pra navegador e que é possível escrever um código modular podendo até escrever o seu código em EcmaScript nas últimas especificações e depois usar algum bundler (e não se assuste: outras dezenas de libs e executáveis de terceiros), transformar seu código pra um JS que pode ser inclusive interpretado por navegadores antigos adicionando libs de terceiros pra evitar que vc faça tudo do zero.

Aliás, o repositório de pacotes pra JS (npm) é vasto.

Uma coisa em particular do React é que ele introduz o JSX, que é uma forma de escrever um código estruturado como XML no meio do JS. Mas mesmo o React ele é só uma biblioteca, o intuito dele é fazer só a parte da view da sua aplicação.

Tal como vc vai encontrar vários pacotes que fazem cada coisinha e depois c junta tudo, seu código também pode levar essas guidelines de tentar não agregar muita responsabilidade num cara (classe) só. A era do jQuery que a gente tentava fazer um único plugin inline que faz tudo já terminou rs. Não estou falando pra dividir em diversas aplicações, mas sim dividir sua aplicação em diversos módulos (arquivos) com responsabilidades bem definidas.

Pra aprender React tem diversos cursos e tutoriais na Internet, pagos e gratuitos e todas as grandes libs e executáveis possuem ótimas documentações.

Quaisquer mais dúvidas, tamos ae o/

[Sup3r-Us3r]

@ninetails nossa o pessoal aqui do forum é bem ativo hahaha, muito obrigado pelo exemplo e por ter respondido as outras respostas também, obrigado pelas dicas, irei seguir o que você disse, muito obrigado pelo seu tempo vlw mesmo!