Não entendi sobre componentes.... | JavaScript na Web: manipule o DOM com JavaScript

Fala Bruno, tudo bem?

Para responder essa pergunta vamos imaginar um blog. Vamos dividi-lo em partes e essas partes serão chamadas de componentes. Cada componente desenvolve um papel. Vamos pensar na barra de “BUSCAR POST”. A barra de buscar desenvolve um papel relativamente simples, você escreve o que está procurando e na sequencia ela trás o resultado dessa pesquisa. Podemos desenvolver uma barra de busca de várias formas com várias tecnologias mas a ideia de componentizar é criar 1 barra de busca que sirva para muitos blogs.

Componentizar é exatamente isso, separar um software em partes e tentar reaproveitar ao máximo essas partes. Existe muitas vantagens nisso como por exemplo reaproveitamento de código, pular muitas etapas do desenvolvimento e etc…

Componentes são funções que retornam algum elemento ou elementos do html, geralmente usamos quando não queremos repetir um elemento ou quando queremos aplicar alguma coisa do JavaScript (seja retornalo com dados de alguma api ou algo do tipo), como foi no caso do botão, que o criamos utilizando document.createElement, adicionamos um evento de click nele e o retornamos, então sempre que quisemos utilizar esse mesmo botão, é só utilizar essa função que retornará esse botão pra gente. Veja um exemplo:

na imagem mostro uma função parecida com a do curso

Aqui criamos uma função que será o nosso componente, nela criamos o botão, e adicionamos o texto Teste e retornamos esse botão criado.

colocando o botao dentro de uma div que criei no html usando o método append child, que faz o botão aparecer na tela

Aqui eu insiro esse botão em uma div que criei no html, utilizando o método appendChild (que insere elementos como filhos de outro) fazendo assim aparecer no html.

O uso da letra maiuscula nos componentes é nada mais que uma conversão da comunidade, para simplesmente quando batermos o olho naquilo, podemos saber que é um componente, então, se você criar um componente que tenha a letra minuscula, ele não vai deixar de funcionar.

E uma funções são blocos que executam algo, que utilizamos durante o nosso desenvolvimento, então utiziamos uma função para criar esse componente por exemplo.

Espero ter ajudado, bons estudos :D