Aggiungere lo stato a un'applicazione

• 2 minuti

React gestisce lo stato in diversi modi. Uno dei principali è tramite gli hook di React.

Un hook è un meccanismo che permette di accedere al funzionamento interno di React. È possibile usare gli hook per eseguire codice quando si verifica un cambiamento in React oppure per registrare qualcosa con React, ad esempio lo stato. Quando si crea lo stato usando l'hook useState, ad esempio, si ottiene l'oggetto stato e una funzione di aggiornamento per aggiornare il valore dell'hook.

Scenario

Una tecnica comune utilizzata da molti cuochi è la mise en place, frase francese traducibile con "impiattamento". I cuochi si assicurano che tutti gli elementi siano pronti prima di iniziare a cucinare.

Nell'applicazione di ricette di questo modulo si vuole permettere agli utenti di toccare gli ingredienti per contrassegnarli come preparati. Per iniziare, si creerà lo stato e si passeranno le informazioni di visualizzazione al componente. Nell'unità successiva si esaminerà come gestire gli eventi.

Aggiungere lo stato

Qualsiasi oggetto o tipo di dati JavaScript può essere registrato come oggetto o tipo di dati con stato in React. La funzione usata per registrare l'oggetto è useState. La funzione useState specifica il valore iniziale. Restituisce l'oggetto con stato appena creato e un'altra funzione che può essere usata per aggiornare il valore.

1. In Esplora risorse di VS Code espandere la cartella src e quindi aprire il file App.jsx. L'oggetto initialRecipe contenuto nel file verrà usato come valore predefinito per l'oggetto con stato recipe.

2. Creare l'oggetto stato recipe e la funzione setRecipe da useState. A tale scopo, aggiungere il codice seguente dopo la riga TODO: Create recipe state.

   const [ recipe, setRecipe ] = useState(initialRecipe);
   

   In questo codice recipe è l'oggetto con stato. La funzione setRecipe verrà usata per sostituire recipe con eventuali nuove versioni.

3. È possibile usare recipe per passare le proprietà ai componenti. Nel codice seguente il componente RecipeTitle verrà usato per visualizzare il titolo e il feedback. Passare i valori title e feedback a RecipeTitle aggiungendo il codice seguente dopo il commento TODO: Pass recipe metadata to RecipeTitle.

   <RecipeTitle title={recipe.title} feedback={recipe.feedback} />
   

4. Aprire il file RecipeTitle.jsx. Si noti il componente esistente che visualizza le proprietà title e feedback.

Testare la pagina

1. Salvare tutti i file.

2. Tornare al browser e aggiornarlo. A questo punto dovrebbero essere visualizzati nella pagina i metadati della ricetta.