"Você ainda cria componentes usando o básico?"

Em uma época dominada por:

• ⚛️ React
• 🟢 Vue
• 🔺 Angular
• 🟦 Svelte
• 🟣 Next.js

O choque é compreensível uma vez que a web moderna parece inseparável de frameworks e componentes.

Mas existe uma geração — talvez a do velho testamento parte I e II — que aprenderam a construir interfaces de outra forma onde um componente não era um arquivo .jsx.

#01. Como Fazíamos Componentes Antes

Antes dos frameworks modernos, a construção de interfaces normalmente seguia uma lógica simples:

• HTML para estrutura;
• CSS para aparência;
• JavaScript para comportamento.

Um componente podia ser criado diretamente pelo DOM:

const button = document.createElement("button");

button.textContent = "Clique aqui";

document.body.appendChild(button);

Ou utilizando templates HTML:

<div class="card">
  <h2>Título</h2>
  <p>Descrição</p>
</div>

Simples. Direto. Sem build. Sem transpiler. Sem dependências. Sem um node_modules.

#02. O Que o React Mudou?

React trouxe uma ideia extremamente poderosa:

Interface é função do estado.

Ao invés de manipular elementos diretamente:

titulo.textContent = novoTitulo;

Você descreve o resultado desejado:

return (
  <h1>{titulo}</h1>
);

E o React decide:

• O que criar;
• O que atualizar;
• O que remover.

O desenvolvedor deixa de manipular o DOM diretamente passando a descrever a interface.

#03. A Grande Vantagem do React

Quando uma aplicação cresce, manter o controle manual do DOM pode se tornar complicado, bagunçado e às vezes bem caótico.

Vamos tomar como exemplo um dashboard corporativo onde centenas de componentes estão interagindo ao mesmo tempo. Nesse cenário, o React torna-se vantajoso pelas suas características:

• ✅ Componentização
• ✅ Reutilização
• ✅ Gerenciamento de estado
• ✅ Fluxo previsível
• ✅ Ecossistema robusto

#04. Minha humilde observação

Meu lado old school sempre faz a mesma pergunta:

"Precisamos mesmo de tudo isso?"

Muitas vezes encontro aplicações relativamente simples utilizando frameworks complexas com inúmeras bibliotecas auxiliares para exibir alguns formulários, tabelas e gráficos. É quase inevitável se questionar: "pra quê descascar uma laranja com uma moto serra elétrica?".

#05. Componentização Não Foi Inventada Pelo React

Existe uma impressão comum de que conceitos como:

• Componentes;
• Reutilização;
• Renderização dinâmica;
• Templates;

nasceram com React, mas na verdade, elas foram popularizadas por ele.

#06. É possível renderizar componentes em JS puro?

Sim, e pra isso você utiliza schemas (metadados).

Schema
↓
Função de Renderização
↓
HTML

Por exemplo:

{
  type: "select",
  label: "Sexo",
  options: [
      "Masculino",
      "Feminino"
  ]
}

Isso se transforma em...

<label>Sexo</label>

<select>
  <option>Masculino</option>
  <option>Feminino</option>
</select>

#07. Quando Percebi Que Eu Também Estava Fazendo Componentização

Esse é um meio de implementar exatamente os mesmos conceitos que muitos associam aos frameworks modernos com a diferença de estar fazendo tudo diretamente sobre a plataforma web. Legal né?

#08. Uma Estrutura Possível

Isso pode ser organizado de forma extremamente simples, vá da sua preferência, mas vamos trabalhar com um exemplo:

src/js/
│
├── components/
│   ├── select.js
│   ├── input.js
│   ├── checkbox.js
│   └── textarea.js
│
├── schemas/
│   └── profileSchema.js
│
├── renderer/
│   └── renderForm.js
│
└── main.js

Cada componente é apenas uma função JavaScript.

Por exemplo:

export function createSelect(config) {

  const wrapper = document.createElement("div");

  const label = document.createElement("label");
  label.textContent = config.label;

  const select = document.createElement("select");

  config.options.forEach(option => {

      const opt = document.createElement("option");

      opt.value = option;
      opt.textContent = option;

      select.appendChild(opt);

  });

  wrapper.appendChild(label);
  wrapper.appendChild(select);

  return wrapper;
}

#09. O Renderer

O renderer recebe o schema:

const schema = [

  {
      type: "select",
      label: "Sexo",
      options: [
          "Masculino",
          "Feminino"
      ]
  }

];

E decide qual componente construir:

schema.forEach(field => {

  if(field.type === "select") {

      container.appendChild(
          createSelect(field)
      );

  }

});

Na prática:

Schema
↓
Renderer
↓
Componentes
↓
DOM

#10. React Faz Algo Parecido

React também trabalha com uma ideia semelhante:

Dados
↓
Componentes
↓
Renderização
↓
DOM

A diferença é que existe uma camada intermediária:

Dados
↓
Estado
↓
React
↓
Virtual DOM
↓
DOM

#11. O Paradoxo da Abstração

Quando abstrações se acumulam demais, elas próprias se tornam uma nova complexidade, por isso que alguns desenvolvedores experientes sentem nostalgia da web tradicional - por entender exatamente o que o React está abstraindo.

#12. Então React é Melhor ou Pior?

A resposta pra essa pergunta é outra pergunta:

Depende. Qual é a complexidade real do problema que você está tentando resolver?