JavaScript: Componentização para Códigos Mais Eficientes

Já exploramos libs e frameworks incríveis para componentizar aplicações, como vimos no post sobre React JS. Mas afinal, o que é componentizar?

O Que Significa Componentizar?

Imagine um blog dividido em partes chamadas componentes. Cada um desempenha um papel específico, como a barra de busca. Componentizar é dividir um software em partes, tentando reutilizá-las ao máximo, proporcionando vantagens como reutilização de código e eficiência no desenvolvimento.

Aplicação no JavaScript

Frameworks como React e Vue facilitam a componentização. Na web, interfaces visuais frequentemente se repetem, e projetos muitas vezes reescrevem o mesmo código. Por que não reaproveitar esse código em projetos futuros?

Vamos exemplificar com uma listagem de categorias de blog. É simples e reutilizável. Primeiro, criamos uma array com as categorias:

const data = [
  { name: "Tecnologia", id: "1" },
  { name: "TV", id: "2" },
  { name: "Fofoca", id: "3" },
  { name: "Artes", id: "4" },
  { name: "Culinária", id: "5" },
];

Agora, o componente real:

const listComponent = (data) => {
  return data
    .map((item) => {
      return `<li>${item.id} ${item.name}</li>`;
    })
    .join("");
};

Utilizando template strings do ES6, mapeamos a array para gerar uma lista de itens. Finalmente, selecionamos uma UL no HTML e inserimos o conteúdo:

const el = document.querySelector("[data-list]");
el.innerHTML = listComponent(data);

Assim, temos um componente que transforma um array de objetos em uma lista, proporcionando código mais limpo e eficiente. Experimente refatorar projetos usando esse método para liberar linhas de código e otimizar seu app.

Fonte: Medium – Criando Pequenos Componentes Dinâmicos com JavaScript Puro

Eu me despeço por aqui. Até a próxima!

Outros links:

• Instagram: @devraphaelcorrea
• YouTube