No React, os componentes são os blocos fundamentais de construção de uma interface de usuário. Eles permitem que desenvolvedores criem partes independentes e reutilizáveis da interface, que podem ser combinadas para formar elementos de UI mais complexos.

É possível imaginar um aplicativo React como uma árvore de componentes, com o componente de nível superior como a raiz. Cada componente é responsável por renderizar a marcação JSX, definindo a estrutura HTML desejada exibida no DOM do navegador.

Componentes Funcionais

Componentes funcionais são funções JavaScript que retornam JSX para definir a estrutura e o conteúdo de um elemento de UI. Eles representam a abordagem moderna para construir aplicações React e são nomeados com letras maiúsculas, como Product ou User, para diferenciá-los de elementos HTML padrão como div ou span.

Os componentes funcionais oferecem várias vantagens:

• Menos Código Repetitivo: Componentes funcionais reduzem o código repetitivo, tornando-os mais concisos e fáceis de trabalhar;
• Mais Fácil de Compreender: São mais fáceis de entender e perceber, especialmente para desenvolvedores iniciantes em React;
• Mais Fácil de Testar: Facilitam os testes devido à sua natureza direta;
• Sem Contexto (this): Diferente dos componentes de classe, componentes funcionais não envolvem contexto (this), simplificando o código. Veja um exemplo de componente funcional:

const Product = () => (
  <div>
    <h2>HolaFood</h2>
    <p>Price: $19.99</p>
    <button type="button">Add to Cart</button>
  </div>
);

Neste exemplo, Product é um componente funcional que representa um cartão de produto.

Componentes funcionais compõem a maior parte da estrutura de um aplicativo React, servindo como blocos fundamentais para a criação de interfaces de usuário.