I componenti in React

React è una libreria JavaScript per la costruzione di interfacce utente, in particolare per applicazioni web single-page. Offre un modo efficiente e flessibile per costruire componenti UI (interfaccia utente) riutilizzabili. In React, tutto gira attorno ai componenti: piccole parti di codice che rappresentano una porzione dell'interfaccia utente. Questi componenti possono essere semplici come un bottone o un input di testo, o complessi come intere app.

Tipi di Componenti in React

React supporta principalmente due tipi di componenti:

1. Componenti Funzionali: Sono funzioni JavaScript che accettano props come argomento e restituiscono elementi React. Con l'introduzione degli Hooks in React 16.8, i componenti funzionali possono ora utilizzare lo stato e altre funzionalità di React.

2. Componenti di Classe: Sono classi JavaScript che estendono React.Component. Offrono più funzionalità rispetto ai componenti funzionali, compresi i metodi del ciclo di vita che permettono di eseguire codice in specifici momenti del ciclo di vita del componente.

Da React 16.8, i componenti funzionali possono utilizzare lo stato e altre funzionalità di React attraverso gli hook, rendendo possibile l'uso di componenti funzionali nel 99.9% dei casi.

Gli edge cases (quello 0.1%) in cui la scelta di un componente di classe può essere considerata riguardano situazioni in cui è necessario utilizzare:

• getSnapshotBeforeUpdate
• getDerivedStateFromError
• componentDidCatch

Questo perché, per questi casi specifici, non esistono ancora equivalenti diretti nei componenti funzionali. Tuttavia, esistono strategie alternative per evitare completamente l'uso dei componenti di classe, come l'impiego di componenti ErrorBoundary o l'uso del pacchetto react-error-boundary.

Esempio di Componente Funzionale

1function Welcome(props) {
2  return <h1>Ciao, {props.name}</h1>;
3}

Questo è un semplice componente funzionale che accetta props e restituisce un elemento JSX. Puoi utilizzare questo componente nel tuo UI così:

1<Welcome name="Mario" />

Questo renderizzerà "Ciao, Mario" nell'interfaccia utente.

Esempio di Componente di Classe

1class Welcome extends React.Component {
2  render() {
3    return <h1>Ciao, {this.props.name}</h1>;
4  }
5}

Questo componente fa esattamente la stessa cosa dell'esempio precedente, ma è scritto come un componente di classe. Puoi utilizzarlo nello stesso modo:

1<Welcome name="Luigi" />

Questo renderizzerà "Ciao, Luigi" nell'interfaccia utente.

Stato e Ciclo di Vita

I componenti di classe in React hanno concetti come stato (state) e ciclo di vita. Lo stato permette ai componenti di mantenere informazioni che possono cambiare nel tempo, e i metodi del ciclo di vita permettono di eseguire azioni in momenti specifici.

Esempio con Stato

1class Timer extends React.Component {
2  constructor(props) {
3    super(props);
4    this.state = { seconds: 0 };
5  }
6
7  tick() {
8    this.setState(state => ({
9      seconds: state.seconds + 1
10    }));
11  }
12
13  componentDidMount() {
14    this.interval = setInterval(() => this.tick(), 1000);
15  }
16
17  componentWillUnmount() {
18    clearInterval(this.interval);
19  }
20
21  render() {
22    return (
23      <div>Secondi: {this.state.seconds}</div>
24    );
25  }
26}

Questo componente Timer utilizza lo stato per tenere traccia del numero di secondi passati. Utilizza anche i metodi del ciclo di vita componentDidMount e componentWillUnmount per impostare e pulire un intervallo, rispettivamente.

Utilizzo degli Hooks in Componenti Funzionali

Con l'introduzione degli Hooks, i componenti funzionali possono utilizzare lo stato e altre funzionalità senza scrivere una classe. Ecco come potresti scrivere il componente Timer come componente funzionale con l'hook useState e useEffect:

1import React, { useState, useEffect } from 'react';
2
3function Timer() {
4  const [seconds, setSeconds] = useState(0);
5
6  useEffect(() => {
7    const interval = setInterval(() => {
8      setSeconds(seconds => seconds + 1);
9    }, 1000);
10    return () => clearInterval(interval);
11  }, []);
12
13  return (
14    <div>Secondi: {seconds}</div>
15  );
16}

Questo componente fa lo stesso del componente di classe Timer, ma usa l'hook useState per gestire lo stato e l'hook useEffect per gestire gli effetti collaterali (come l'impostazione dell'intervallo).

I componenti in React sono molto potenti e flessibili. Attraverso l'uso di componenti funzionali e di classe, puoi costruire applicazioni complesse

e interattive in modo relativamente semplice. Gli esempi sopra illustrano i concetti di base, ma React offre molte altre funzionalità per gestire lo stato, gli effetti collaterali, il contesto, le referenze (refs), e più, che ti permettono di costruire applicazioni robuste ed efficienti.