ReactJS - Utilizzo di useContext: Una Guida per Principianti

Ciao a tutti, aspiranti sviluppatori React! Oggi andremo a esplorare una delle funzionalità più potenti di React: l'hook useContext. Come il tuo amico insegnante di informatica del quartiere, sono qui per guidarti attraverso questo concetto passo per passo. Non preoccuparti se sei nuovo alla programmazione - inizieremo dalle basi e poi ci muoveremo verso l'alto!

Cos'è il Contesto in React?

Prima di immergerci in useContext, capiremo cos'è il Contesto in React. Immagina di organizzare una grande cena di famiglia. Hai un sugo speciale che deve essere passato attorno al tavolo. Invece di passarlo da persona a persona (che è come il drilling delle props in React), non sarebbe più facile se potessi metterlo al centro del tavolo dove tutti possono raggiungerlo? Questo è essenzialmente ciò che fa il Contesto in React - fornisce un modo per passare dati attraverso l'albero dei componenti senza dover passare le props manualmente a ogni livello.

Comprendere useContext

Ora, useContext è un hook che ci permette di consumare facilmente questo Contesto nei nostri componenti funzionali. È come dare a ogni persona alla cena un modo diretto per accedere al sugo speciale senza chiedere ad altri di passarlo.

Firma di useContext

Diamo un'occhiata a come usiamo useContext:

const value = useContext(MyContext)

Ecco cosa significa ogni parte:

• value: Questo è il valore corrente del contesto
• MyContext: Questo è l'oggetto di contesto (creato con React.createContext)

È così semplice! Ma analizziamolo ulteriormente con un esempio del mondo reale.

Uso del Contesto tramite Hook

Creiamo un semplice commutatore di tema per la nostra app. Useremo il Contesto per memorizzare il tema corrente e useContext per accedervi nei nostri componenti.

Prima, creiamo il nostro contesto:

// ThemeContext.js
import React from 'react';

const ThemeContext = React.createContext('light');

export default ThemeContext;

Ora, creiamo un componente che utilizza questo contesto:

// ThemedButton.js
import React, { useContext } from 'react';
import ThemeContext from './ThemeContext';

function ThemedButton() {
const theme = useContext(ThemeContext);

return (
<button style={{ background: theme === 'light' ? '#fff' : '#000',
color: theme === 'light' ? '#000' : '#fff' }}>
Sono un pulsante con tema {theme}!
</button>
);
}

export default ThemedButton;

In questo esempio, useContext(ThemeContext) ci dà il valore corrente del tema. Poi utilizziamo questo valore per stilizzare il nostro pulsante.

Ora, vediamo come possiamo fornire questo contesto nella nostra app:

// App.js
import React from 'react';
import ThemeContext from './ThemeContext';
import ThemedButton from './ThemedButton';

function App() {
return (
<ThemeContext.Provider value="dark">
<div>
<h1>Benvenuti nella nostra app a tema!</h1>
<ThemedButton />
</div>
</ThemeContext.Provider>
);
}

export default App;

Qui, stiamo avvolgendo la nostra app con ThemeContext.Provider e impostando il valore su "dark". Questo significa che qualsiasi componente all'interno di questo provider può accedere a questo valore del tema utilizzando useContext.

Aggiornamento del Contesto

Ora, cosa succede se vogliamo permettere agli utenti di cambiare i temi? Possiamo farlo aggiornando il valore del nostro contesto. Modifichiamo il nostro componente App:

// App.js
import React, { useState } from 'react';
import ThemeContext from './ThemeContext';
import ThemedButton from './ThemedButton';

function App() {
const [theme, setTheme] = useState('light');

const toggleTheme = () => {
setTheme(prevTheme => prevTheme === 'light' ? 'dark' : 'light');
};

return (
<ThemeContext.Provider value={theme}>
<div>
<h1>Benvenuti nella nostra app a tema!</h1>
<ThemedButton />
<button onClick={toggleTheme}>Cambia Tema</button>
</div>
</ThemeContext.Provider>
);
}

export default App;

Ora stiamo utilizzando lo stato per gestire il nostro tema, e abbiamo aggiunto un pulsante per toggolarlo. Quando il tema cambia, tutti i componenti che utilizzano useContext(ThemeContext) si ridisegnano automaticamente con il nuovo valore.

Conclusione

Ecco fatto! Abbiamo coperto le basi di useContext in React. Ecco un riassunto dei punti principali:

1. Il Contesto fornisce un modo per passare dati attraverso l'albero dei componenti senza il drilling delle props.
2. useContext è un hook che ci permette di consumare facilmente il Contesto nei componenti funzionali.
3. Per utilizzare useContext, dobbiamo prima creare un Contesto utilizzando React.createContext.
4. Possiamo aggiornare il Contesto cambiando il valore della proprietà value del componente Provider.

Ricorda, mentre il Contesto è potente, non è sempre la migliore soluzione. Per props semplici che devono essere passate solo uno o due livelli, il passaggio regolare delle props è spesso più chiaro. Pensa al Contesto come al sugo speciale alla cena di famiglia - usalo quando hai bisogno di condividere qualcosa ampiamente, ma non abusarne!

Spero che questa guida ti abbia aiutato a demistificare useContext. Continua a esercitarti, e presto diventerai un esperto di React Context! Buon coding!

Credits: Image by storyset