In React, i componenti sono i blocchi fondamentali di una interfaccia utente. Consentono agli sviluppatori di creare parti indipendenti e riutilizzabili dell'interfaccia utente che possono essere combinate per formare elementi UI più complessi.

Si può pensare a un'app React come a un albero di componenti, con il componente di livello superiore come radice. Ogni componente è responsabile del rendering del markup JSX, definendo la struttura HTML desiderata visualizzata nel DOM del browser.

Componenti Funzionali

I componenti funzionali sono funzioni JavaScript che restituiscono JSX per definire la struttura e il contenuto di un elemento UI. Rappresentano il modo moderno di costruire applicazioni React e sono denominati con lettere maiuscole, come Product o User, per differenziarli dagli elementi HTML standard come div o span.

I componenti funzionali offrono diversi vantaggi:

• Meno Boilerplate: I componenti funzionali riducono il codice boilerplate, rendendoli più concisi e semplici da utilizzare;
• Più Facili da Comprendere: Sono più facili da comprendere, soprattutto per gli sviluppatori alle prime armi con React;
• Più Facili da Testare: I componenti funzionali facilitano il testing grazie alla loro natura diretta;
• Nessun Contesto (this): A differenza dei componenti a classe, i componenti funzionali non coinvolgono il contesto (this), semplificando il codice. Ecco un esempio di componente funzionale:

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

In questo esempio, Product è un componente funzionale che rappresenta una scheda prodotto.

I componenti funzionali costituiscono la maggior parte della struttura di un'app React, fungendo da elementi fondamentali per la creazione delle interfacce utente.