Che cos’è un componente in React

Un componente in React è un blocco autonomo e riutilizzabile di codice che rappresenta una parte dell’interfaccia utente. I componenti possono essere semplici, come un pulsante o un’icona, o complessi, come un’intera pagina web.

Ogni componente in React è una funzione o una classe JavaScript che può accettare input arbitrari (chiamati “props”, vale a dire “proprietà”) e restituire un elemento React che definisce cosa deve essere visualizzato sullo schermo.

L’importanza dei componenti in React

I componenti sono fondamentali in React per diverse ragioni:

1. Riutilizzabilità: I componenti permettono di riutilizzare codice in diverse parti dell’applicazione. Ad esempio, un pulsante stilizzato può essere definito come un componente e utilizzato ovunque sia necessario, riducendo la duplicazione del codice e facilitando la manutenzione.
2. Composizione: I componenti possono essere combinati tra loro per costruire interfacce complesse. Un componente padre può includere uno o più componenti figli, creando una gerarchia di componenti che rappresenta la struttura dell’interfaccia utente.
3. Isolamento: Ogni componente ha il proprio stato e le proprie proprietà, il che significa che è possibile sviluppare e testare ogni componente in isolamento, senza preoccuparsi dell’intero sistema. Questo facilita il debug e l’aggiornamento del codice.
4. Gestione dello Stato: I componenti possono gestire il proprio stato interno, permettendo di creare interfacce utente interattive e dinamiche. Lo stato di un componente può essere modificato in risposta agli eventi dell’utente, aggiornando automaticamente l’interfaccia utente per riflettere i cambiamenti.

I componenti React possono avere degli argomenti?

Abbiamo detto che i componenti React sono funzioni che restituiscono JSX, un linguaggio di markup paragonabile a HTML che viene convertito in JavaScript da React.
In JavaScript, le funzioni non hanno solo un valore di ritorno, hanno anche degli argomenti, il loro input. 

Ma, quindi, i componenti React possono avere degli argomenti? La risposta è sì, ma i componenti React possono ricevere un solo argomento, che è un oggetto JavaScript e rappresenta l’insieme delle loro proprietà. 

Le proprietà dei componenti React corrispondono agli attributi degli elementi HTML.

Immaginiamo di voler creare un componente, Message.
Message è la nostra versione personalizzata di un paragrafo, che potremo “aumentare” con nuove funzionalità più avanti.

Possiamo utilizzare la nostra app, creando una cartella components dentro src. Nella cartella components, creiamo un nuovo file Message.jsx:

// File: src/components/Message.jsx

export default function Message() {
  return <p className="Message">Look, a message!</p>;

Nota: non è necessario creare la cartella components per far funzionare React in questo modo, qualsiasi file all’interno di src può essere importato. Creare una cartella per raccogliere i componenti rende solo più ordinato il progetto.

Ora modifichiamo App per utilizzare il nuovo componente: lo importiamo tramite il percorso relativo “./components/Message“.

// File: src/App.jsx

import "./App.css";
import Message from "./components/Message";

export default function App() {
  return (
    <div className="App">
      <Message />
    </div>
  );
}