Fiquei meio na dúvida, qual a diferença entre funções e componentes?
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Fiquei meio na dúvida, qual a diferença entre funções e componentes?
Fala Pedro, tudo bem? Espero que sim!
Normalmente, componentes nesse contexto são "blocos" de código reutilizáveis, como por exemplo, se temos uma função que cria e nos retorna um botão, esse pode ser considerado um componente, pois criamos algo reutilizável, onde sempre que precisármos desse botão, basta chamar essa função:
function button() {
const button = document.createElemente("button")
button.innerText = 'Meu botão!'
return button;
}O interessante dos componentes é o fato de podermos utilizar o JavaScript nele, como por exemplo, recebemos como parâmetro o texto que terá nesse botão e assim ele se tornar mais reutilizavel ainda:
function button(texto) {
const button = document.createElemente("button")
button.innerText = texto
return button;
}Ou também receber uma função que será executada quando ele for clicado:
function button(texto, funcao) {
const button = document.createElemente("button")
button.innerText = texto
button.addEventListener("click", funcao)
return button;
}As possibilidades são infinitas.
E uma função é uma função basicamente kkkkkkk, colocamos nela o que queremos que seja executado quando chamar ela, e nesse caso usamos uma função para criar um componente.
Espero ter ajudado, bons estudos :D
Então, a diferença deles é que normalmente criamos a função dentro de algum escopo e os componentes podem ser acionados por todos os arquivos do código? Ah, outra coisa, não entendi também o porque de retornarmos o botão no fim da função.
Não, um componente é uma função comum como todas as outras, esse nome "componente" seria mais algo que a comunidade criou, não que tenha algo de especial por usar esse nome, ou deixe ser uma função comúm. E nós retornamos pois caso não retornassemos, estariamos apenas criando o botão não função, e então retornamos o botão justamente porque queremos utilizar aquele botão para inserir em algúm html, por exemplo:
const div = document.querySelector("div");
div.appendChild(button())No exemplo acima, acionamos a função button que retorna um botão, e então ele é inserido dentro da div.
Para ficar mais facil de entender, você pode pensar um componente como uma função que retorna um elemento HTML. Caso queira dar uma olhada, o react utiliza funções para criar componentes, veja clicando aqui, em queo componente é nada mais do que uma função JavaScript que nos retorna um elemento HTML e podemos utilizar em outras partes do HTML.