Componenti, Props e State in React

Introduzione

I componenti sono funzioni JavaScript che restituiscono JSX. Le props permettono di passare dati dai componenti padre ai figli. Lo state gestisce dati che cambiano nel tempo e aggiorna automaticamente l’interfaccia quando cambiano.

Componenti: I Blocchi Fondamentali di React

I componenti sono funzioni JavaScript che restituiscono codice JSX da renderizzare sullo schermo. Ogni componente incapsula markup HTML, stili CSS e logica JavaScript correlata, permettendo di organizzare il codice in modo modulare e riutilizzabile.

Ogni parte visibile di un’interfaccia può essere identificata come un componente potenziale: un header, una card, un pulsante, una lista.

Creare il Primo Componente

Un componente React è semplicemente una funzione JavaScript che segue due regole fondamentali:

1. Il nome della funzione deve iniziare con una lettera maiuscola
2. La funzione deve restituire un valore renderizzabile (tipicamente codice JSX)

1
// Esempio di componente semplice
2
function Header() {
3
  return (
4
    <header>
5
      <img src="react-logo.png" alt="React logo" />
6
      <h1>Concetti Fondamentali di React</h1>
7
      <p>I blocchi di costruzione essenziali</p>
8
    </header>
9
  );
10
}

Utilizzare i Componenti

Per utilizzare un componente, non lo si chiama come una normale funzione JavaScript. Invece, si usa come un elemento HTML all’interno del codice JSX:

1
function App() {
2
  return (
3
    <div id="app">
4
      {/* Usare il componente come elemento HTML */}
5
      <Header />
6

7
      {/* Oppure con tag di apertura e chiusura */}
8
      <Header></Header>
9
    </div>
10
  );
11
}

JSX: JavaScript Syntax Extension

JSX è un’estensione della sintassi JavaScript che permette di scrivere codice HTML-like direttamente nei file JavaScript. Non è JavaScript standard e non è supportato nativamente dai browser, ma viene trasformato in codice JavaScript valido durante il processo di build.

1
// Questo è JSX - sembra HTML ma è dentro JavaScript
2
function App() {
3
  return (
4
    <div>
5
      <h1>Ciao Mondo</h1>
6
      <p>Questo è JSX</p>
7
    </div>
8
  );
9
}

Valori Dinamici con le Parentesi Graffe

Una delle caratteristiche più potenti di JSX è la possibilità di inserire valori dinamici usando le parentesi graffe {}. Qualsiasi espressione JavaScript inserita tra parentesi graffe verrà valutata e il risultato verrà visualizzato.

1
function Header() {
2
  // Array di possibili descrizioni
3
  const reactDescriptions = ['Fundamental', 'Crucial', 'Core'];
4

5
  // Funzione per generare un indice casuale
6
  function getRandomInt(max) {
7
    return Math.floor(Math.random() * max);
8
  }
9

10
  // Generare una descrizione casuale
11
  const description = reactDescriptions[getRandomInt(3)];
12

13
  return (
14
    <header>
15
      <h1>{description} React Concepts</h1>
16
      {/* Le parentesi graffe permettono di inserire JavaScript */}
17
      <p>Numero casuale: {Math.random()}</p>
18
      <p>Calcolo: {1 + 1}</p>
19
    </header>
20
  );
21
}

1
// ✅ Corretto
2
<img src={imagePath} />
3

4
// ❌ Errato - non servono le virgolette
5
<img src="{imagePath}" />

Importare Immagini in React

Per includere immagini in un progetto React, è meglio usare le dichiarazioni di import invece di percorsi stringa relativi. Questo permette al processo di build di ottimizzare le immagini e includerle correttamente nel bundle finale.

1
// Importare l'immagine come modulo
2
import reactImg from './assets/react-core-concepts.png';
3

4
function Header() {
5
  return (
6
    <header>
7
      {/* Usare la variabile importata come valore dinamico */}
8
      <img src={reactImg} alt="React logo" />
9
    </header>
10
  );
11
}

Props: Passare Dati ai Componenti

Le props (abbreviazione di “properties”) sono il meccanismo di React per passare dati da un componente padre a un componente figlio. Permettono di rendere i componenti riutilizzabili con dati diversi.

Definire e Utilizzare Props

Per passare dati a un componente, si aggiungono attributi personalizzati al componente stesso. Questi attributi diventano proprietà dell’oggetto props che React passa automaticamente alla funzione del componente.

1
// Componente che riceve props
2
function CoreConcept({ title, description, image }) {
3
  return (
4
    <li>
5
      <img src={image} alt={title} />
6
      <h3>{title}</h3>
7
      <p>{description}</p>
8
    </li>
9
  );
10
}
11

12
// Utilizzare il componente con dati diversi
13
function App() {
14
  return (
15
    <ul>
16
      <CoreConcept
17
        title="Components"
18
        description="I blocchi base dell'interfaccia utente"
19
        image={componentsImg}
20
      />
21
      <CoreConcept
22
        title="JSX"
23
        description="Sintassi estesa di JavaScript"
24
        image={jsxImg}
25
      />
26
    </ul>
27
  );
28
}

1
function CoreConcept(props) {
2
  return (
3
    <li>
4
      <h3>{props.title}</h3>
5
      <p>{props.description}</p>
6
    </li>
7
  );
8
}

1
function CoreConcept({ title, description, image }) {
2
  return (
3
    <li>
4
      <h3>{title}</h3>
5
      <p>{description}</p>
6
    </li>
7
  );
8
}

Spread Operator per Props

Quando si hanno dati organizzati come oggetti JavaScript e i nomi delle proprietà corrispondono ai nomi delle props, si può usare l’operatore spread (...) per passare tutte le proprietà in una volta.

1
// Dati organizzati come oggetto
2
const conceptData = {
3
  title: "Components",
4
  description: "I blocchi base dell'interfaccia utente",
5
  image: componentsImg
6
};
7

8
// Passare tutte le proprietà con spread
9
<CoreConcept {...conceptData} />
10

11
// Equivale a scrivere:
12
<CoreConcept
13
  title={conceptData.title}
14
  description={conceptData.description}
15
  image={conceptData.image}
16
/>

1
// Passare l'intero oggetto come singola prop
2
<CoreConcept concept={conceptData} />
3

4
// Nel componente
5
function CoreConcept({ concept }) {
6
  return (
7
    <li>
8
      <h3>{concept.title}</h3>
9
      <p>{concept.description}</p>
10
    </li>
11
  );
12
}

1
function Button({ caption, type = "button" }) {
2
  // type ha un valore di default "button"
3
  // se non viene passato, userà questo valore
4
  return <button type={type}>{caption}</button>;
5
}
6

7
// Usabile con o senza type
8
<Button caption="Clicca" />  // type sarà "button"
9
<Button caption="Invia" type="submit" />  // type sarà "submit"

La Prop Speciale children

La prop children è speciale perché non viene passata come attributo, ma rappresenta il contenuto inserito tra i tag di apertura e chiusura di un componente. Permette di creare componenti che avvolgono altri contenuti.

1
// Componente che usa children
2
function Card({ name, children }) {
3
  return (
4
    <article className="card">
5
      <h2>{name}</h2>
6
      {/* children contiene tutto ciò che è tra i tag */}
7
      {children}
8
    </article>
9
  );
10
}
11

12
// Utilizzo del componente con contenuto interno
13
<Card name="Maria Miles">
14
  <p>Maria è una professoressa di Computer Science.</p>
15
  <p><a href="mailto:maria@example.com">Email Maria</a></p>
16
</Card>

Organizzare i Componenti in File Separati

Man mano che un’applicazione cresce, è importante organizzare i componenti in file separati per mantenere il codice gestibile e navigabile. La convenzione comune è creare una cartella components nella cartella src.

Struttura dei File

1
import reactImg from '../assets/react-core-concepts.png';
2

3
export default function Header() {
4
  return (
5
    <header>
6
      <img src={reactImg} alt="React logo" />
7
      <h1>Concetti Fondamentali di React</h1>
8
    </header>
9
  );
10
}
11

12
// App.jsx
13
import Header from './components/Header';
14

15
function App() {
16
  return (
17
    <div id="app">
18
      <Header />
19
    </div>
20
  );
21
}

1
// Componente
2
export default function Header() { ... }
3

4
// Import
5
import Header from './components/Header';

1
// Componente
2
export function Header() { ... }
3

4
// Import (con parentesi graffe)
5
import { Header } from './components/Header';

Organizzare gli Stili CSS

Gli stili CSS possono essere organizzati in file separati, tipicamente uno per componente. Per includere gli stili, si importa il file CSS nel componente corrispondente.

1
import './Header.css';  // Importare gli stili del componente
2

3
export default function Header() {
4
  return <header>...</header>;
5
}

Gestione degli Eventi

Per rendere le applicazioni interattive, è necessario reagire agli eventi dell’utente (clic, input, hover, ecc.). In React, gli eventi vengono gestiti in modo dichiarativo usando props speciali che iniziano con on.

Aggiungere Event Listeners

Gli elementi HTML incorporati supportano props speciali per gli eventi, come onClick, onChange, onSubmit. Il valore di questi props deve essere una funzione che verrà eseguita quando l’evento si verifica.

1
function TabButton({ children, onSelect }) {
2
  // Funzione che gestisce il click
3
  function handleClick() {
4
    console.log('Pulsante cliccato!');
5
  }
6

7
  return (
8
    <li>
9
      {/* Passare la funzione come valore, NON eseguirla */}
10
      <button onClick={handleClick}>
11
        {children}
12
      </button>
13
    </li>
14
  );
15
}

1
// ✅ Corretto - passa la funzione come valore
2
<button onClick={handleClick}>Clicca</button>
3

4
// ❌ Errato - esegue la funzione immediatamente
5
<button onClick={handleClick()}>Clicca</button>

Passare Parametri agli Event Handlers

Spesso si vuole passare dati personalizzati all’event handler quando viene chiamato. Per fare questo, si avvolge la chiamata della funzione in una funzione freccia anonima.

1
function App() {
2
  function handleSelect(selectedButton) {
3
    console.log('Selezionato:', selectedButton);
4
  }
5

6
  return (
7
    <div>
8
      {/* Passare un parametro personalizzato */}
9
      <TabButton onSelect={() => handleSelect('components')}>
10
        Components
11
      </TabButton>
12

13
      <TabButton onSelect={() => handleSelect('jsx')}>
14
        JSX
15
      </TabButton>
16
    </div>
17
  );
18
}

1
// Componente personalizzato che riceve una prop per l'evento
2
function TabButton({ children, onSelect }) {
3
  return (
4
    <li>
5
      {/* Inoltrare la funzione all'elemento button incorporato */}
6
      <button onClick={onSelect}>
7
        {children}
8
      </button>
9
    </li>
10
  );
11
}
12

13
// Nel componente padre
14
function App() {
15
  function handleSelect() {
16
    console.log('Tab selezionata');
17
  }
18

19
  return (
20
    <TabButton onSelect={handleSelect}>
21
      Components
22
    </TabButton>
23
  );
24
}

State: Gestire Dati che Cambiano

Lo state (stato) è uno dei concetti più importanti di React. Permette di gestire dati che cambiano nel tempo e di aggiornare automaticamente l’interfaccia utente quando questi dati cambiano.

Il Problema con le Variabili Normali

Se si prova a usare una variabile JavaScript normale per aggiornare l’interfaccia, si scopre che non funziona:

1
function App() {
2
  let selectedTopic = 'components';
3

4
  function handleSelect() {
5
    selectedTopic = 'jsx';  // Aggiorna la variabile
6
    console.log(selectedTopic);  // Vede il nuovo valore
7
  }
8

9
  return (
10
    <div>
11
      <p>{selectedTopic}</p>  {/* Non si aggiorna! */}
12
      <button onClick={handleSelect}>Cambia</button>
13
    </div>
14
  );
15
}

React esegue la funzione del componente solo una volta quando viene incontrata per la prima volta. Aggiornare una variabile normale non dice a React di rieseguire la funzione e aggiornare l’interfaccia.

Usare useState Hook

La soluzione è usare lo useState Hook, che permette di registrare variabili gestite da React. Quando queste variabili cambiano, React riesegue automaticamente il componente e aggiorna l’interfaccia.

1
import { useState } from 'react';
2

3
function App() {
4
  // useState restituisce un array con due elementi:
5
  // [valore corrente, funzione per aggiornare il valore]
6
  const [selectedTopic, setSelectedTopic] = useState('components');
7

8
  function handleSelect() {
9
    // Chiamare la funzione di aggiornamento
10
    setSelectedTopic('jsx');
11
    // React rieseguirà automaticamente il componente
12
  }
13

14
  return (
15
    <div>
16
      <p>{selectedTopic}</p>  {/* Ora si aggiorna! */}
17
      <button onClick={handleSelect}>Cambia</button>
18
    </div>
19
  );
20
}

1
// ✅ Corretto
2
function App() {
3
  const [count, setCount] = useState(0);
4
  // ...
5
}
6

7
// ❌ Errato - dentro una condizione
8
function App() {
9
  if (someCondition) {
10
    const [count, setCount] = useState(0);  // Errore!
11
  }
12
}
13

14
// ❌ Errato - dentro una funzione annidata
15
function App() {
16
  function handleClick() {
17
    const [count, setCount] = useState(0);  // Errore!
18
  }
19
}

Come Funziona useState

useState accetta un argomento (il valore iniziale) e restituisce un array con esattamente due elementi:

1. Il valore corrente dello stato: un’istantanea del valore per questo ciclo di render
2. La funzione di aggiornamento: una funzione che aggiorna lo stato e dice a React di rieseguire il componente

1
// Destrutturazione dell'array restituito
2
const [selectedTopic, setSelectedTopic] = useState('components');
3

4
// selectedTopic contiene il valore corrente ('components')
5
// setSelectedTopic è la funzione per aggiornare il valore

Rendering Condizionale

Il rendering condizionale permette di mostrare contenuti diversi in base a determinate condizioni. Ci sono diversi modi per implementare questo in React.

Operatore Ternario

L’operatore ternario è utile quando si vuole scegliere tra due alternative:

1
function App() {
2
  const [selectedTopic, setSelectedTopic] = useState(null);
3

4
  return (
5
    <div>
6
      {selectedTopic ? (
7
        <div>
8
          <h3>{examples[selectedTopic].title}</h3>
9
          <p>{examples[selectedTopic].description}</p>
10
        </div>
11
      ) : (
12
        <p>Seleziona un argomento</p>
13
      )}
14
    </div>
15
  );
16
}

Operatore AND (&&)

L’operatore && è utile quando si vuole mostrare qualcosa solo se una condizione è vera:

1
function App() {
2
  const [selectedTopic, setSelectedTopic] = useState(null);
3

4
  return (
5
    <div>
6
      {/* Mostra solo se selectedTopic è truthy */}
7
      {selectedTopic && (
8
        <div>
9
          <h3>{examples[selectedTopic].title}</h3>
10
        </div>
11
      )}
12

13
      {/* Mostra solo se selectedTopic è falsy */}
14
      {!selectedTopic && (
15
        <p>Seleziona un argomento</p>
16
      )}
17
    </div>
18
  );
19
}

1
function App() {
2
  const [selectedTopic, setSelectedTopic] = useState(null);
3

4
  // Determinare il contenuto da mostrare
5
  let content;
6

7
  if (selectedTopic) {
8
    content = (
9
      <div>
10
        <h3>{examples[selectedTopic].title}</h3>
11
        <p>{examples[selectedTopic].description}</p>
12
      </div>
13
    );
14
  } else {
15
    content = <p>Seleziona un argomento</p>;
16
  }
17

18
  return (
19
    <div>
20
      {content}
21
    </div>
22
  );
23
}

Styling Dinamico

Gli stili CSS possono essere applicati dinamicamente in base allo stato. In JSX, l’attributo class si chiama className (perché class è una parola riservata in JavaScript).

Applicare Classi Dinamicamente

1
function TabButton({ children, isSelected, onSelect }) {
2
  return (
3
    <li>
4
      <button
5
        className={isSelected ? 'active' : ''}
6
        onClick={onSelect}
7
      >
8
        {children}
9
      </button>
10
    </li>
11
  );
12
}
13

14
// Utilizzo
15
function App() {
16
  const [selectedTopic, setSelectedTopic] = useState('components');
17

18
  return (
19
    <TabButton
20
      isSelected={selectedTopic === 'components'}
21
      onSelect={() => setSelectedTopic('components')}
22
    >
23
      Components
24
    </TabButton>
25
  );
26
}

Rendering di Liste Dinamiche

Spesso si ha bisogno di renderizzare una lista di elementi basata su un array di dati. Il metodo map() è lo strumento perfetto per questo scopo.

Usare map() per Liste Dinamiche

1
function App() {
2
  const coreConcepts = [
3
    { title: 'Components', description: '...', image: componentsImg },
4
    { title: 'JSX', description: '...', image: jsxImg },
5
    { title: 'Props', description: '...', image: propsImg },
6
    { title: 'State', description: '...', image: stateImg }
7
  ];
8

9
  return (
10
    <ul>
11
      {coreConcepts.map((concept) => (
12
        <CoreConcept
13
          key={concept.title}
14
          title={concept.title}
15
          description={concept.description}
16
          image={concept.image}
17
        />
18
      ))}
19
    </ul>
20
  );
21
}

1
{coreConcepts.map((concept) => (
2
  <CoreConcept
3
    key={concept.title}  // Deve essere unico
4
    title={concept.title}
5
  />
6
))}

Spread Operator con Liste

Quando i dati sono già organizzati come oggetti con proprietà che corrispondono alle props, si può combinare map() con lo spread operator:

1
function App() {
2
  const coreConcepts = [
3
    { title: 'Components', description: '...', image: componentsImg },
4
    { title: 'JSX', description: '...', image: jsxImg }
5
  ];
6

7
  return (
8
    <ul>
9
      {coreConcepts.map((concept) => (
10
        <CoreConcept
11
          key={concept.title}
12
          {...concept}  // Spread di tutte le proprietà
13
        />
14
      ))}
15
    </ul>
16
  );
17
}

Riepilogo

Componenti: funzioni JavaScript che restituiscono JSX, con nomi che iniziano con maiuscola. Si usano come elementi HTML: <Header />.

JSX: sintassi estesa di JavaScript per descrivere interfacce utente. Le parentesi graffe {} permettono di inserire valori dinamici. In JSX si usa className invece di class.

Props: meccanismo per passare dati dai componenti padre ai figli. Si destrutturano nei parametri: function Component({ prop1, prop2 }). Lo spread operator permette di passare tutte le proprietà: <Component {...data} />. La prop children rappresenta il contenuto tra i tag di apertura e chiusura.

State: dati gestiti da React che, quando cambiano, causano il re-render del componente. useState restituisce un array con valore corrente e funzione di aggiornamento: const [value, setValue] = useState(initialValue). L’aggiornamento è asincrono. Quando il nuovo stato dipende dal valore precedente, si usa la forma funzionale: setValue(prev => newValue).

Eventi: gestiti con props che iniziano con on: onClick={handleClick}. Si passa il riferimento alla funzione, non si esegue (onClick={handleClick}, non onClick={handleClick()}).

Rendering condizionale: operatore ternario {condition ? <A /> : <B />} o operatore AND {condition && <A />}.

Liste dinamiche: map() per renderizzare array: {array.map(item => <Item key={item.id} {...item} />)}. La prop key è obbligatoria e deve essere univoca e stabile.