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: