Func x Componente

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.