From d4d0a25fd2cacf8e491b7a5839dc7775cc4c44c5 Mon Sep 17 00:00:00 2001 From: Alessandro De Blasis Date: Wed, 19 Jun 2019 11:52:20 +0100 Subject: [PATCH 01/17] feat(hooks-overview): Translation to Italian --- content/docs/hooks-overview.md | 156 ++++++++++++++++----------------- 1 file changed, 78 insertions(+), 78 deletions(-) diff --git a/content/docs/hooks-overview.md b/content/docs/hooks-overview.md index 8224c3a67..2f4f2aec6 100644 --- a/content/docs/hooks-overview.md +++ b/content/docs/hooks-overview.md @@ -6,102 +6,102 @@ next: hooks-state.html prev: hooks-intro.html --- -*Hooks* are a new addition in React 16.8. They let you use state and other React features without writing a class. +Gli *Hooks* sono una novità introdotta in React 16.8. Permettono di utilizzare lo state ed altre funzionalità di React senza dover scrivere una classe. -Hooks are [backwards-compatible](/docs/hooks-intro.html#no-breaking-changes). This page provides an overview of Hooks for experienced React users. This is a fast-paced overview. If you get confused, look for a yellow box like this: +Gli Hooks sono [retrocompatibili](/docs/hooks-intro.html#no-breaking-changes). Questa pagina offre una panoramica sugli Hooks per gli utilizzatori di React con esperienza. Si tratta di una panoramica abbastanza veloce. Se le cose diventano non chiare, cerca un rettangolo giallo come questo: ->Detailed Explanation +>Spiegazione Dettagliata > ->Read the [Motivation](/docs/hooks-intro.html#motivation) to learn why we're introducing Hooks to React. +>Leggi la [Motivazione](/docs/hooks-intro.html#motivation) per capire perchè abbiamo introdotto gli Hooks in React. -**↑↑↑ Each section ends with a yellow box like this.** They link to detailed explanations. +**↑↑↑ Ogni sezione termina con un rettangolo giallo come questo.** Essi forniscono collegamenti a spiegazioni dettagliate. ## 📌 State Hook {#state-hook} -This example renders a counter. When you click the button, it increments the value: +Questo esempio renderizza un contatore. Quando clicchiamo il bottone, il valore incrementa: ```js{1,4,5} import React, { useState } from 'react'; -function Example() { - // Declare a new state variable, which we'll call "count" - const [count, setCount] = useState(0); +function Esempio() { + // Dichiara una nuova variabile di stato, che chiameremo "contatore" + const [contatore, setContatore] = useState(0); return (
-

You clicked {count} times

-
); } ``` -Here, `useState` is a *Hook* (we'll talk about what this means in a moment). We call it inside a function component to add some local state to it. React will preserve this state between re-renders. `useState` returns a pair: the *current* state value and a function that lets you update it. You can call this function from an event handler or somewhere else. It's similar to `this.setState` in a class, except it doesn't merge the old and new state together. (We'll show an example comparing `useState` to `this.state` in [Using the State Hook](/docs/hooks-state.html).) +In questo caso, `useState` è un *Hook* (spiegheremo cosa significa in un momento). Lo richiamiamo all'interno di un componente funzione per aggiungervi stato interno. React preserverà questo stato tra le ri-renderizzazioni. `useState` ritorna una coppia: il valore dello stato *corrente* ed una funzione che ci permette di aggiornarlo. Puoi chiamare questa funzione da un event handler o altrove. È simile a `this.setState`in una classe, eccetto per il fatto che non unisce il vecchio e nuovo stato. (Mostriamo un esempio nel quale confrontiamo `useState` e `this.state` in [Usare lo State Hook](/docs/hooks-state.html).) -The only argument to `useState` is the initial state. In the example above, it is `0` because our counter starts from zero. Note that unlike `this.state`, the state here doesn't have to be an object -- although it can be if you want. The initial state argument is only used during the first render. +L'unico parametro di `useState` è il suo stato iniziale. Nell'esempio di sopra, è appunto `0` perchè il contatore comincia da zero. Nota come contrariamente a `this.state`, lo stato non deve essere un oggetto -- anche se può essere ciò che vuoi. Il parametro che determina lo stato iniziale viene usato solo durante la prima renderizzazione. -#### Declaring multiple state variables {#declaring-multiple-state-variables} +#### Dichiarazione di variabili di stato multiple{#declaring-multiple-state-variables} -You can use the State Hook more than once in a single component: +Puoi usare lo State Hook più di una volta in un singolo componente: ```js -function ExampleWithManyStates() { - // Declare multiple state variables! - const [age, setAge] = useState(42); - const [fruit, setFruit] = useState('banana'); - const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]); +function EsempioConMoltiState() { + // Dichiara le variabili di stato! + const [eta, setEta] = useState(42); + const [frutto, setFrutto] = useState('banana'); + const [todos, setTodos] = useState([{ testo: 'Impara gli Hooks' }]); // ... } ``` -The [array destructuring](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Array_destructuring) syntax lets us give different names to the state variables we declared by calling `useState`. These names aren't a part of the `useState` API. Instead, React assumes that if you call `useState` many times, you do it in the same order during every render. We'll come back to why this works and when this is useful later. +L'[assegnamento di destrutturazione](https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) ci permette di dare nomi diversi alle variabili di stato che abbiamo dichiarato richiamando `useState`. Questi nomi non fanno parte della API di `useState`. Invece, React assume che se chiami `useState` più volte, lo farai nello stesso ordine durante ogni renderizzazione. Ritorneremo più tardi sul perchè ciò funziona ed è utile. -#### But what is a Hook? {#but-what-is-a-hook} +#### Ma cosa è un Hook? {#but-what-is-a-hook} -Hooks are functions that let you “hook into” React state and lifecycle features from function components. Hooks don't work inside classes -- they let you use React without classes. (We [don't recommend](/docs/hooks-intro.html#gradual-adoption-strategy) rewriting your existing components overnight but you can start using Hooks in the new ones if you'd like.) +Gli Hooks sono funzioni che ti permettono di "ancorarti” all'interno delle funzioni di React state e lifecycle da componenti funzione. Gli Hooks non funzionano all'interno delle classi -- ti permettono di usare React senza classi. ([Non raccomandiamo](/docs/hooks-intro.html#gradual-adoption-strategy) la riscrittura dei tuoi componenti già esistenti tutto d'un fiato, raccomandiamo invece di scrivere quelli nuovi usando gli Hooks se ti va.) -React provides a few built-in Hooks like `useState`. You can also create your own Hooks to reuse stateful behavior between different components. We'll look at the built-in Hooks first. +React offre Hooks predefiniti come `useState`. YouPuoi anche creare i tuoi Hooks per riutilizzare comportamenti stateful (facenti uso di stato) tra i vari componenti. Per cominciare, diamo uno sguardo agli Hooks predefiniti. ->Detailed Explanation +>Spiegazione Dettagliata > ->You can learn more about the State Hook on a dedicated page: [Using the State Hook](/docs/hooks-state.html). +>Se vuoi puoi trovare maggiori dettagli riguardo lo State Hook nella pagina dedicata: [Usare lo State Hook](/docs/hooks-state.html). ## ⚡️ Effect Hook {#effect-hook} -You've likely performed data fetching, subscriptions, or manually changing the DOM from React components before. We call these operations "side effects" (or "effects" for short) because they can affect other components and can't be done during rendering. +È molto probabile che tu abbia dovuto richiedere dati esterni, gestire sottoscrizioni, o dovuto cambiare il DOM da componenti React prima d'ora. Chiamiamo queste operazioni "effetti collaterali" (o "effetti" in breve) dato che essi possono alterare altri componenti e non possono essere eseguiti durante la renderizzazione. -The Effect Hook, `useEffect`, adds the ability to perform side effects from a function component. It serves the same purpose as `componentDidMount`, `componentDidUpdate`, and `componentWillUnmount` in React classes, but unified into a single API. (We'll show examples comparing `useEffect` to these methods in [Using the Effect Hook](/docs/hooks-effect.html).) +L'Effect Hook, `useEffect`, aggiunge la possibilità di eseguire effetti collaterali da componenti funzione. Svolge gli stessi compiti di `componentDidMount`, `componentDidUpdate`, e `componentWillUnmount` nelle classi React, unificate sotto una singola API. (Mostreremo degli esempi che mettono a confronto `useEffect` con questi metodi nella pagina [Usare l'Effect Hook](/docs/hooks-effect.html).) -For example, this component sets the document title after React updates the DOM: +Ad esempio, questo componente imposta il titolo del documento dopo che React abbia aggiornato il DOM: ```js{1,6-10} import React, { useState, useEffect } from 'react'; -function Example() { - const [count, setCount] = useState(0); +function Esempio() { + const [contatore, setContatore] = useState(0); - // Similar to componentDidMount and componentDidUpdate: + // Simile a componentDidMount e componentDidUpdate: useEffect(() => { - // Update the document title using the browser API - document.title = `You clicked ${count} times`; + // Aggiorna il titolo del documento usando le API del browser + document.title = `Hai cliccato ${contatore} volte`; }); return (
-

You clicked {count} times

-
); } ``` -When you call `useEffect`, you're telling React to run your "effect" function after flushing changes to the DOM. Effects are declared inside the component so they have access to its props and state. By default, React runs the effects after every render -- *including* the first render. (We'll talk more about how this compares to class lifecycles in [Using the Effect Hook](/docs/hooks-effect.html).) +Quando invochi `useEffect`, stai sostanzialmente dicendo a React di eseguire la tua funzione "effetto" dopo aver applicato i cambiamenti al DOM. Gli effetti vengono dichiarati all'interno dei componenti in modo che abbiano accesso alle sue props e state. Di default, React esegue gli effetti ad ogni renderizzazione -- *includendo* la prima renderizzazione. (Discuteremo più in dettagli su come ciò si possa confrontare ai lifecycles delle classi nella pagina dedicata [Usare l'Effect Hook](/docs/hooks-effect.html).) -Effects may also optionally specify how to "clean up" after them by returning a function. For example, this component uses an effect to subscribe to a friend's online status, and cleans up by unsubscribing from it: +Gli effetti possono anche opzionalmente specificare come "fare pulizia" dopo la loro esecuzione. Ad esempio, questo componente utilizza un effetto per sottoscrivere allo stato online di un amico, per poi rimuovere la sottoscrizione nella fase di pulizia: ```js{10-16} import React, { useState, useEffect } from 'react'; @@ -122,21 +122,21 @@ function FriendStatus(props) { }); if (isOnline === null) { - return 'Loading...'; + return 'Caricamento...'; } return isOnline ? 'Online' : 'Offline'; } ``` -In this example, React would unsubscribe from our `ChatAPI` when the component unmounts, as well as before re-running the effect due to a subsequent render. (If you want, there's a way to [tell React to skip re-subscribing](/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects) if the `props.friend.id` we passed to `ChatAPI` didn’t change.) +In questo esempio, React rimuoverebbe la sottoscrizione alla nostra `ChatAPI` quando il componente viene smontato, ed anche prima che l'effetto venga eseguito nuovamente nel caso di una renderizzazione successiva. (Se vuoi, esiste un modo per [dire a React di evitare che avvengano sottoscrizioni multiple](/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects) nel caso in cui `props.friend.id` che viene passato a `ChatAPI` non è cambiato.) -Just like with `useState`, you can use more than a single effect in a component: +Come avviene con `useState`, puoi usare più di un singolo effetto in un componente: ```js{3,8} -function FriendStatusWithCounter(props) { - const [count, setCount] = useState(0); +function FriendStatusConContatore(props) { + const [contatore, setContatore] = useState(0); useEffect(() => { - document.title = `You clicked ${count} times`; + document.title = `Hai cliccato ${contatore} volte`; }); const [isOnline, setIsOnline] = useState(null); @@ -153,32 +153,32 @@ function FriendStatusWithCounter(props) { // ... ``` -Hooks let you organize side effects in a component by what pieces are related (such as adding and removing a subscription), rather than forcing a split based on lifecycle methods. +Gli Hooks ti permettono di organizzare gli effetti collaterani in un componente a seconda di come le parti sono collegate tra loro (come aggiungere o rimuovere una sottoscrizione), piuttosto che forzarti a doverle suddividere in base a metodi di lifecycle. ->Detailed Explanation +>Spiegazione Dettagliata > ->You can learn more about `useEffect` on a dedicated page: [Using the Effect Hook](/docs/hooks-effect.html). +>Puoi saperne di più riguardo `useEffect` leggendo la pagiana dedicata: [Usare l'Effect Hook](/docs/hooks-effect.html). -## ✌️ Rules of Hooks {#rules-of-hooks} +## ✌️ Regole degli Hooks {#rules-of-hooks} -Hooks are JavaScript functions, but they impose two additional rules: +Gli Hooks sono funzioni JavaScript, ma hanno due regole aggiuntive: -* Only call Hooks **at the top level**. Don’t call Hooks inside loops, conditions, or nested functions. -* Only call Hooks **from React function components**. Don’t call Hooks from regular JavaScript functions. (There is just one other valid place to call Hooks -- your own custom Hooks. We'll learn about them in a moment.) +* Puoi richiamare gli Hooks solo **al livello più alto**. Non richiamare gli Hooks all'interno di cicli, condizioni o funzioni nidificate. +* Puoi richiamare gli Hooks solo **da componenti funzione di React**. Non richiamare gli Hooks da normali funzioni JavaScript. (Esiste solo un altro valido posto dal quale puoi richiamare gli Hooks -- i tuoi Hooks customizzati. Ne parleremo in un momento.) -We provide a [linter plugin](https://www.npmjs.com/package/eslint-plugin-react-hooks) to enforce these rules automatically. We understand these rules might seem limiting or confusing at first, but they are essential to making Hooks work well. +Offriamo un [linter plugin](https://www.npmjs.com/package/eslint-plugin-react-hooks) per imporre tali regole automaticamente. Siamo consapevoli del fatto che tali regole possano sembrare limitanti o complicate all'inizio, sono però essenziali nel far sì che gli Hooks funzionino bene. ->Detailed Explanation +>Spiegazione Dettagliata > ->You can learn more about these rules on a dedicated page: [Rules of Hooks](/docs/hooks-rules.html). +>Puoi saperne di più riguardo queste regole nella pagina dedicata: [Regole degli Hooks](/docs/hooks-rules.html). -## 💡 Building Your Own Hooks {#building-your-own-hooks} +## 💡 Costruire i Tuoi Hooks Custom {#building-your-own-hooks} -Sometimes, we want to reuse some stateful logic between components. Traditionally, there were two popular solutions to this problem: [higher-order components](/docs/higher-order-components.html) and [render props](/docs/render-props.html). Custom Hooks let you do this, but without adding more components to your tree. +A volte, ci ritroviamo a voler riutilizzare logica con stato tra vari componeti. Tradizionalmente, esistono due popolari soluzioni al problema: [componenti di ordine superiore](/docs/higher-order-components.html) e [render props](/docs/render-props.html). Gli Hooks Custom ti permettono di risolvere il problema, senza dover aggiungere altri componenti al tuo albero. -Earlier on this page, we introduced a `FriendStatus` component that calls the `useState` and `useEffect` Hooks to subscribe to a friend's online status. Let's say we also want to reuse this subscription logic in another component. +Precedentemente in questa pagina, abbiamo introdotto un componente `FriendStatus` che richiama gli Hooks `useState` e `useEffect` per sottoscriversi allo stato online di un amico. Immaginiamo di voler riutilizzare questa logica di sottoscrizione in un altro componente. -First, we'll extract this logic into a custom Hook called `useFriendStatus`: +Innanzitutto, estraiamo questa logica in un Hook custom chiamato `useFriendStatus`: ```js{3} import React, { useState, useEffect } from 'react'; @@ -201,9 +201,9 @@ function useFriendStatus(friendID) { } ``` -It takes `friendID` as an argument, and returns whether our friend is online. +Esso prende `friendID` come argomento, per poi ritornare il fatto che il nostro amico sia online o meno. -Now we can use it from both components: +Adesso lo possiamo usare da entrambi i componenti: ```js{2} @@ -211,7 +211,7 @@ function FriendStatus(props) { const isOnline = useFriendStatus(props.friend.id); if (isOnline === null) { - return 'Loading...'; + return 'Caricamento...'; } return isOnline ? 'Online' : 'Offline'; } @@ -229,29 +229,29 @@ function FriendListItem(props) { } ``` -The state of these components is completely independent. Hooks are a way to reuse *stateful logic*, not state itself. In fact, each *call* to a Hook has a completely isolated state -- so you can even use the same custom Hook twice in one component. +Lo stato di questi componenti è completamente indipendente. Gli Hooks sono un modo per riutilizzare *logica stateful*, non lo stato direttamente. Infatti, ogni *cchiamata* ad un Hook ha uno stato completamente isolato -- per questo puoi anche utilizzare lo stesso Hook custom più volte in un componente. -Custom Hooks are more of a convention than a feature. If a function's name starts with "`use`" and it calls other Hooks, we say it is a custom Hook. The `useSomething` naming convention is how our linter plugin is able to find bugs in the code using Hooks. +Gli Hooks custom sono più una convenzione che una funzionalità. Se il nome di una funzione inizia con "`use`" e richiama altri Hooks, diremo che si tratta di un Hook custom. La convenzione `useQualcosa` è il modo in cui il nostro linter plugin è in grado di individuare bugs nel codice che utilizza gli Hooks. -You can write custom Hooks that cover a wide range of use cases like form handling, animation, declarative subscriptions, timers, and probably many more we haven't considered. We are excited to see what custom Hooks the React community will come up with. +Puoi scrivere Hooks custom che coprono un ampio ventaglio di casi d'uso quali la gestione dei forms, animazioni, sottoscrizioni dichiarative, timers e probabilmente molti altri che non abbiamo considerato. Non vediamo l'ora di vedere quali Hooks Custom verranno sfornati dalla comunità. ->Detailed Explanation +>Spiegazione Dettagliata > ->You can learn more about custom Hooks on a dedicated page: [Building Your Own Hooks](/docs/hooks-custom.html). +>Puoi saperne di più riguardo gli Hooks custom nella pagina dedicata: [Hooks Personalizzati](/docs/hooks-custom.html). -## 🔌 Other Hooks {#other-hooks} +## 🔌 Altri Hooks {#other-hooks} -There are a few less commonly used built-in Hooks that you might find useful. For example, [`useContext`](/docs/hooks-reference.html#usecontext) lets you subscribe to React context without introducing nesting: +Esistono pochi altri Hooks di fabbrica usati meno frequentemente che potrai ritenere utili. Per esempio, [`useContext`](/docs/hooks-reference.html#usecontext) ti permette di sottoscriverti al React context senza dover introdurre nidificazione: ```js{2,3} -function Example() { +function Esempio() { const locale = useContext(LocaleContext); const theme = useContext(ThemeContext); // ... } ``` -And [`useReducer`](/docs/hooks-reference.html#usereducer) lets you manage local state of complex components with a reducer: +E [`useReducer`](/docs/hooks-reference.html#usereducer) che ti permette di gestire lo stato locale di componenti complessi mediante un reducer: ```js{2} function Todos() { @@ -259,14 +259,14 @@ function Todos() { // ... ``` ->Detailed Explanation +>Spiegazione Dettagliata > ->You can learn more about all the built-in Hooks on a dedicated page: [Hooks API Reference](/docs/hooks-reference.html). +>Puoi saperne di più riguardo agli Hooks di fabbrica nella pagina dedicata: [API di Riferimento degli Hooks](/docs/hooks-reference.html). -## Next Steps {#next-steps} +## Passi Successivi {#next-steps} -Phew, that was fast! If some things didn't quite make sense or you'd like to learn more in detail, you can read the next pages, starting with the [State Hook](/docs/hooks-state.html) documentation. +Phew, che velocità! Se qualcosa non ti è chiaro e vuoi impare le cose più in dettaglio, puoi continuare a leggere le pagine successive, cominciando dalla documentazione su come [Usare l'Hook State](/docs/hooks-state.html). -You can also check out the [Hooks API reference](/docs/hooks-reference.html) and the [Hooks FAQ](/docs/hooks-faq.html). +Puoi anche dare uno sguardo alla [API di Riferimento degli Hooks](/docs/hooks-reference.html) ed alle [FAQ sugli Hooks](/docs/hooks-faq.html). -Finally, don't miss the [introduction page](/docs/hooks-intro.html) which explains *why* we're adding Hooks and how we'll start using them side by side with classes -- without rewriting our apps. +Concludendo, non ti perdere la [pagina intrroduttiva](/docs/hooks-intro.html) in quanto spiega *perchè* abbiamo aggiunto gli Hooks e come cominceremo ad utilizzarli parallelamente alle classi -- senza dover riscrivere le nostre applicazioni. From 81f8582416845e3fd98c3df46668b9df81c6a2f5 Mon Sep 17 00:00:00 2001 From: Alessandro De Blasis Date: Tue, 25 Jun 2019 05:37:24 +0100 Subject: [PATCH 02/17] Update content/docs/hooks-overview.md Co-Authored-By: Luca Nardi --- content/docs/hooks-overview.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-overview.md b/content/docs/hooks-overview.md index 2f4f2aec6..0a9c4e357 100644 --- a/content/docs/hooks-overview.md +++ b/content/docs/hooks-overview.md @@ -8,7 +8,7 @@ prev: hooks-intro.html Gli *Hooks* sono una novità introdotta in React 16.8. Permettono di utilizzare lo state ed altre funzionalità di React senza dover scrivere una classe. -Gli Hooks sono [retrocompatibili](/docs/hooks-intro.html#no-breaking-changes). Questa pagina offre una panoramica sugli Hooks per gli utilizzatori di React con esperienza. Si tratta di una panoramica abbastanza veloce. Se le cose diventano non chiare, cerca un rettangolo giallo come questo: +Gli Hooks sono [retrocompatibili](/docs/hooks-intro.html#no-breaking-changes). Questa pagina offre una panoramica sugli Hooks per gli utilizzatori esperti di React. Si tratta di una panoramica abbastanza veloce. Se le cose diventano non chiare, cerca un rettangolo giallo come questo: >Spiegazione Dettagliata > From 332dc1a4c1bd9c6745ece15b36c18ed518d34fae Mon Sep 17 00:00:00 2001 From: Alessandro De Blasis Date: Tue, 25 Jun 2019 05:37:40 +0100 Subject: [PATCH 03/17] Update content/docs/hooks-overview.md Co-Authored-By: Luca Nardi --- content/docs/hooks-overview.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-overview.md b/content/docs/hooks-overview.md index 0a9c4e357..32f9a8b54 100644 --- a/content/docs/hooks-overview.md +++ b/content/docs/hooks-overview.md @@ -12,7 +12,7 @@ Gli Hooks sono [retrocompatibili](/docs/hooks-intro.html#no-breaking-changes). Q >Spiegazione Dettagliata > ->Leggi la [Motivazione](/docs/hooks-intro.html#motivation) per capire perchè abbiamo introdotto gli Hooks in React. +>Leggi la [Motivazione](/docs/hooks-intro.html#motivation) per capire perché abbiamo introdotto gli Hooks in React. **↑↑↑ Ogni sezione termina con un rettangolo giallo come questo.** Essi forniscono collegamenti a spiegazioni dettagliate. From 7e3e506d56535027ead9d7ee5b70ea849201b62f Mon Sep 17 00:00:00 2001 From: Alessandro De Blasis Date: Tue, 25 Jun 2019 05:37:49 +0100 Subject: [PATCH 04/17] Update content/docs/hooks-overview.md Co-Authored-By: Luca Nardi --- content/docs/hooks-overview.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-overview.md b/content/docs/hooks-overview.md index 32f9a8b54..338871ad2 100644 --- a/content/docs/hooks-overview.md +++ b/content/docs/hooks-overview.md @@ -18,7 +18,7 @@ Gli Hooks sono [retrocompatibili](/docs/hooks-intro.html#no-breaking-changes). Q ## 📌 State Hook {#state-hook} -Questo esempio renderizza un contatore. Quando clicchiamo il bottone, il valore incrementa: +Questo esempio renderizza un contatore. Quando clicchiamo il bottone, il valore aumenta: ```js{1,4,5} import React, { useState } from 'react'; From 55edf75be4f8df7b9734e5eece2ac1285a5b470f Mon Sep 17 00:00:00 2001 From: Alessandro De Blasis Date: Tue, 25 Jun 2019 05:38:07 +0100 Subject: [PATCH 05/17] Update content/docs/hooks-overview.md Co-Authored-By: Luca Nardi --- content/docs/hooks-overview.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-overview.md b/content/docs/hooks-overview.md index 338871ad2..6cd1f94f4 100644 --- a/content/docs/hooks-overview.md +++ b/content/docs/hooks-overview.md @@ -38,7 +38,7 @@ function Esempio() { } ``` -In questo caso, `useState` è un *Hook* (spiegheremo cosa significa in un momento). Lo richiamiamo all'interno di un componente funzione per aggiungervi stato interno. React preserverà questo stato tra le ri-renderizzazioni. `useState` ritorna una coppia: il valore dello stato *corrente* ed una funzione che ci permette di aggiornarlo. Puoi chiamare questa funzione da un event handler o altrove. È simile a `this.setState`in una classe, eccetto per il fatto che non unisce il vecchio e nuovo stato. (Mostriamo un esempio nel quale confrontiamo `useState` e `this.state` in [Usare lo State Hook](/docs/hooks-state.html).) +In questo caso, `useState` è un *Hook* (spiegheremo cosa significa fra poco). Lo richiamiamo all'interno di un componente funzione per aggiungervi uno stato interno. React preserverà questo stato tra le ri-renderizzazioni. `useState` ritorna una coppia: il valore dello stato *corrente* ed una funzione che ci permette di aggiornarlo. Puoi chiamare questa funzione da un event handler o altrove. È simile a `this.setState`in una classe, tranne per il fatto che non unisce il vecchio e nuovo stato. (Mostriamo un esempio nel quale confrontiamo `useState` e `this.state` in [Usare lo State Hook](/docs/hooks-state.html).) L'unico parametro di `useState` è il suo stato iniziale. Nell'esempio di sopra, è appunto `0` perchè il contatore comincia da zero. Nota come contrariamente a `this.state`, lo stato non deve essere un oggetto -- anche se può essere ciò che vuoi. Il parametro che determina lo stato iniziale viene usato solo durante la prima renderizzazione. From bfe8927f3c926a095497af795f1ba1bde48102da Mon Sep 17 00:00:00 2001 From: Alessandro De Blasis Date: Tue, 25 Jun 2019 05:38:22 +0100 Subject: [PATCH 06/17] Update content/docs/hooks-overview.md Co-Authored-By: Luca Nardi --- content/docs/hooks-overview.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-overview.md b/content/docs/hooks-overview.md index 6cd1f94f4..b0f323d47 100644 --- a/content/docs/hooks-overview.md +++ b/content/docs/hooks-overview.md @@ -40,7 +40,7 @@ function Esempio() { In questo caso, `useState` è un *Hook* (spiegheremo cosa significa fra poco). Lo richiamiamo all'interno di un componente funzione per aggiungervi uno stato interno. React preserverà questo stato tra le ri-renderizzazioni. `useState` ritorna una coppia: il valore dello stato *corrente* ed una funzione che ci permette di aggiornarlo. Puoi chiamare questa funzione da un event handler o altrove. È simile a `this.setState`in una classe, tranne per il fatto che non unisce il vecchio e nuovo stato. (Mostriamo un esempio nel quale confrontiamo `useState` e `this.state` in [Usare lo State Hook](/docs/hooks-state.html).) -L'unico parametro di `useState` è il suo stato iniziale. Nell'esempio di sopra, è appunto `0` perchè il contatore comincia da zero. Nota come contrariamente a `this.state`, lo stato non deve essere un oggetto -- anche se può essere ciò che vuoi. Il parametro che determina lo stato iniziale viene usato solo durante la prima renderizzazione. +L'unico parametro di `useState` è il suo stato iniziale. Nell'esempio di sopra, è appunto `0` perchè il contatore comincia da zero. Nota come contrariamente a `this.state`, lo stato non deve essere un oggetto -- anche se può esserlo se lo vuoi. Il parametro che determina lo stato iniziale viene usato solo durante la prima renderizzazione. #### Dichiarazione di variabili di stato multiple{#declaring-multiple-state-variables} From 97061159ad6ff994aed3c5931be59015b0024f7d Mon Sep 17 00:00:00 2001 From: Alessandro De Blasis Date: Tue, 25 Jun 2019 05:38:30 +0100 Subject: [PATCH 07/17] Update content/docs/hooks-overview.md Co-Authored-By: Luca Nardi --- content/docs/hooks-overview.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-overview.md b/content/docs/hooks-overview.md index b0f323d47..0528141e8 100644 --- a/content/docs/hooks-overview.md +++ b/content/docs/hooks-overview.md @@ -157,7 +157,7 @@ Gli Hooks ti permettono di organizzare gli effetti collaterani in un componente >Spiegazione Dettagliata > ->Puoi saperne di più riguardo `useEffect` leggendo la pagiana dedicata: [Usare l'Effect Hook](/docs/hooks-effect.html). +>Puoi saperne di più riguardo `useEffect` leggendo la pagina dedicata: [Usare l'Effect Hook](/docs/hooks-effect.html). ## ✌️ Regole degli Hooks {#rules-of-hooks} From 135f1bff9590dff9cf95adfd29317d0e724d30bb Mon Sep 17 00:00:00 2001 From: Alessandro De Blasis Date: Tue, 25 Jun 2019 05:38:39 +0100 Subject: [PATCH 08/17] Update content/docs/hooks-overview.md Co-Authored-By: Luca Nardi --- content/docs/hooks-overview.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-overview.md b/content/docs/hooks-overview.md index 0528141e8..7b534baf9 100644 --- a/content/docs/hooks-overview.md +++ b/content/docs/hooks-overview.md @@ -164,7 +164,7 @@ Gli Hooks ti permettono di organizzare gli effetti collaterani in un componente Gli Hooks sono funzioni JavaScript, ma hanno due regole aggiuntive: * Puoi richiamare gli Hooks solo **al livello più alto**. Non richiamare gli Hooks all'interno di cicli, condizioni o funzioni nidificate. -* Puoi richiamare gli Hooks solo **da componenti funzione di React**. Non richiamare gli Hooks da normali funzioni JavaScript. (Esiste solo un altro valido posto dal quale puoi richiamare gli Hooks -- i tuoi Hooks customizzati. Ne parleremo in un momento.) +* Puoi richiamare gli Hooks solo **da componenti funzione di React**. Non richiamare gli Hooks da normali funzioni JavaScript. (Esiste solo un altro valido posto dal quale puoi richiamare gli Hooks -- i tuoi Hooks customizzati. Ne parleremo fra poco.) Offriamo un [linter plugin](https://www.npmjs.com/package/eslint-plugin-react-hooks) per imporre tali regole automaticamente. Siamo consapevoli del fatto che tali regole possano sembrare limitanti o complicate all'inizio, sono però essenziali nel far sì che gli Hooks funzionino bene. From f6b43da6a10007eccdfc23ea8a5be49f39f94c7c Mon Sep 17 00:00:00 2001 From: Alessandro De Blasis Date: Tue, 25 Jun 2019 05:38:48 +0100 Subject: [PATCH 09/17] Update content/docs/hooks-overview.md Co-Authored-By: Luca Nardi --- content/docs/hooks-overview.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-overview.md b/content/docs/hooks-overview.md index 7b534baf9..3922498f6 100644 --- a/content/docs/hooks-overview.md +++ b/content/docs/hooks-overview.md @@ -229,7 +229,7 @@ function FriendListItem(props) { } ``` -Lo stato di questi componenti è completamente indipendente. Gli Hooks sono un modo per riutilizzare *logica stateful*, non lo stato direttamente. Infatti, ogni *cchiamata* ad un Hook ha uno stato completamente isolato -- per questo puoi anche utilizzare lo stesso Hook custom più volte in un componente. +Lo stato di questi componenti è completamente indipendente. Gli Hooks sono un modo per riutilizzare *logica stateful*, non lo stato direttamente. Infatti, ogni *chiamata* ad un Hook ha uno stato completamente isolato -- per questo puoi anche utilizzare lo stesso Hook custom più volte in un componente. Gli Hooks custom sono più una convenzione che una funzionalità. Se il nome di una funzione inizia con "`use`" e richiama altri Hooks, diremo che si tratta di un Hook custom. La convenzione `useQualcosa` è il modo in cui il nostro linter plugin è in grado di individuare bugs nel codice che utilizza gli Hooks. From c967cc57a947294fdb17647e2c64bd7301f66fda Mon Sep 17 00:00:00 2001 From: Alessandro De Blasis Date: Tue, 25 Jun 2019 05:38:56 +0100 Subject: [PATCH 10/17] Update content/docs/hooks-overview.md Co-Authored-By: Luca Nardi --- content/docs/hooks-overview.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-overview.md b/content/docs/hooks-overview.md index 3922498f6..69b86fc11 100644 --- a/content/docs/hooks-overview.md +++ b/content/docs/hooks-overview.md @@ -241,7 +241,7 @@ Puoi scrivere Hooks custom che coprono un ampio ventaglio di casi d'uso quali la ## 🔌 Altri Hooks {#other-hooks} -Esistono pochi altri Hooks di fabbrica usati meno frequentemente che potrai ritenere utili. Per esempio, [`useContext`](/docs/hooks-reference.html#usecontext) ti permette di sottoscriverti al React context senza dover introdurre nidificazione: +Esistono pochi altri Hooks di fabbrica usati meno frequentemente che potresti ritenere utili. Per esempio, [`useContext`](/docs/hooks-reference.html#usecontext) ti permette di sottoscriverti al React context senza dover introdurre nidificazione: ```js{2,3} function Esempio() { From 2f2a6c329c5b109b8574d2dcfa41d9551d8c90fb Mon Sep 17 00:00:00 2001 From: Alessandro De Blasis Date: Tue, 25 Jun 2019 05:39:06 +0100 Subject: [PATCH 11/17] Update content/docs/hooks-overview.md Co-Authored-By: Luca Nardi --- content/docs/hooks-overview.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-overview.md b/content/docs/hooks-overview.md index 69b86fc11..934801321 100644 --- a/content/docs/hooks-overview.md +++ b/content/docs/hooks-overview.md @@ -269,4 +269,4 @@ Phew, che velocità! Se qualcosa non ti è chiaro e vuoi impare le cose più in Puoi anche dare uno sguardo alla [API di Riferimento degli Hooks](/docs/hooks-reference.html) ed alle [FAQ sugli Hooks](/docs/hooks-faq.html). -Concludendo, non ti perdere la [pagina intrroduttiva](/docs/hooks-intro.html) in quanto spiega *perchè* abbiamo aggiunto gli Hooks e come cominceremo ad utilizzarli parallelamente alle classi -- senza dover riscrivere le nostre applicazioni. +Concludendo, non ti perdere la [pagina intrroduttiva](/docs/hooks-intro.html) in quanto spiega *perché* abbiamo aggiunto gli Hooks e come cominceremo ad utilizzarli parallelamente alle classi -- senza dover riscrivere le nostre applicazioni. From 69327ddfcca911d5b1fca43ddeb92a513aa9b725 Mon Sep 17 00:00:00 2001 From: Alessandro De Blasis Date: Tue, 25 Jun 2019 05:39:37 +0100 Subject: [PATCH 12/17] Update content/docs/hooks-overview.md Co-Authored-By: Luca Nardi --- content/docs/hooks-overview.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-overview.md b/content/docs/hooks-overview.md index 934801321..cfa0a1e09 100644 --- a/content/docs/hooks-overview.md +++ b/content/docs/hooks-overview.md @@ -62,7 +62,7 @@ L'[assegnamento di destrutturazione](https://developer.mozilla.org/it/docs/Web/J Gli Hooks sono funzioni che ti permettono di "ancorarti” all'interno delle funzioni di React state e lifecycle da componenti funzione. Gli Hooks non funzionano all'interno delle classi -- ti permettono di usare React senza classi. ([Non raccomandiamo](/docs/hooks-intro.html#gradual-adoption-strategy) la riscrittura dei tuoi componenti già esistenti tutto d'un fiato, raccomandiamo invece di scrivere quelli nuovi usando gli Hooks se ti va.) -React offre Hooks predefiniti come `useState`. YouPuoi anche creare i tuoi Hooks per riutilizzare comportamenti stateful (facenti uso di stato) tra i vari componenti. Per cominciare, diamo uno sguardo agli Hooks predefiniti. +React offre Hooks predefiniti come `useState`. Puoi anche creare i tuoi Hooks per riutilizzare comportamenti stateful (facenti uso di stato) tra i vari componenti. Per cominciare, diamo uno sguardo agli Hooks predefiniti. >Spiegazione Dettagliata > From 33f5449789640fc52d746201234611ec748655c9 Mon Sep 17 00:00:00 2001 From: Alessandro De Blasis Date: Tue, 25 Jun 2019 05:39:50 +0100 Subject: [PATCH 13/17] Update content/docs/hooks-overview.md Co-Authored-By: Luca Nardi --- content/docs/hooks-overview.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-overview.md b/content/docs/hooks-overview.md index cfa0a1e09..f2245a6ba 100644 --- a/content/docs/hooks-overview.md +++ b/content/docs/hooks-overview.md @@ -74,7 +74,7 @@ React offre Hooks predefiniti come `useState`. Puoi anche creare i tuoi Hooks pe L'Effect Hook, `useEffect`, aggiunge la possibilità di eseguire effetti collaterali da componenti funzione. Svolge gli stessi compiti di `componentDidMount`, `componentDidUpdate`, e `componentWillUnmount` nelle classi React, unificate sotto una singola API. (Mostreremo degli esempi che mettono a confronto `useEffect` con questi metodi nella pagina [Usare l'Effect Hook](/docs/hooks-effect.html).) -Ad esempio, questo componente imposta il titolo del documento dopo che React abbia aggiornato il DOM: +Ad esempio, questo componente imposta il titolo del documento dopo che React ha aggiornato il DOM: ```js{1,6-10} import React, { useState, useEffect } from 'react'; From 023948c04b1418e01a47e3a8bf0b3762ae3a8733 Mon Sep 17 00:00:00 2001 From: Alessandro De Blasis Date: Tue, 25 Jun 2019 05:40:06 +0100 Subject: [PATCH 14/17] Update content/docs/hooks-overview.md Co-Authored-By: Luca Nardi --- content/docs/hooks-overview.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-overview.md b/content/docs/hooks-overview.md index f2245a6ba..931443c90 100644 --- a/content/docs/hooks-overview.md +++ b/content/docs/hooks-overview.md @@ -99,7 +99,7 @@ function Esempio() { } ``` -Quando invochi `useEffect`, stai sostanzialmente dicendo a React di eseguire la tua funzione "effetto" dopo aver applicato i cambiamenti al DOM. Gli effetti vengono dichiarati all'interno dei componenti in modo che abbiano accesso alle sue props e state. Di default, React esegue gli effetti ad ogni renderizzazione -- *includendo* la prima renderizzazione. (Discuteremo più in dettagli su come ciò si possa confrontare ai lifecycles delle classi nella pagina dedicata [Usare l'Effect Hook](/docs/hooks-effect.html).) +Quando invochi `useEffect`, stai sostanzialmente dicendo a React di eseguire la tua funzione "effetto" dopo aver applicato i cambiamenti al DOM. Gli effetti vengono dichiarati all'interno dei componenti in modo che abbiano accesso alle sue props e state. Di default, React esegue gli effetti ad ogni renderizzazione -- *inclusa* la prima. (Discuteremo più in dettagli su come ciò si possa confrontare ai lifecycles delle classi nella pagina dedicata [Usare l'Effect Hook](/docs/hooks-effect.html).) Gli effetti possono anche opzionalmente specificare come "fare pulizia" dopo la loro esecuzione. Ad esempio, questo componente utilizza un effetto per sottoscrivere allo stato online di un amico, per poi rimuovere la sottoscrizione nella fase di pulizia: From d77f2ee48a39c766a5b3d06fefe27365f88a9559 Mon Sep 17 00:00:00 2001 From: Alessandro De Blasis Date: Tue, 25 Jun 2019 05:40:21 +0100 Subject: [PATCH 15/17] Update content/docs/hooks-overview.md Co-Authored-By: Luca Nardi --- content/docs/hooks-overview.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-overview.md b/content/docs/hooks-overview.md index 931443c90..99b021ff3 100644 --- a/content/docs/hooks-overview.md +++ b/content/docs/hooks-overview.md @@ -101,7 +101,7 @@ function Esempio() { Quando invochi `useEffect`, stai sostanzialmente dicendo a React di eseguire la tua funzione "effetto" dopo aver applicato i cambiamenti al DOM. Gli effetti vengono dichiarati all'interno dei componenti in modo che abbiano accesso alle sue props e state. Di default, React esegue gli effetti ad ogni renderizzazione -- *inclusa* la prima. (Discuteremo più in dettagli su come ciò si possa confrontare ai lifecycles delle classi nella pagina dedicata [Usare l'Effect Hook](/docs/hooks-effect.html).) -Gli effetti possono anche opzionalmente specificare come "fare pulizia" dopo la loro esecuzione. Ad esempio, questo componente utilizza un effetto per sottoscrivere allo stato online di un amico, per poi rimuovere la sottoscrizione nella fase di pulizia: +Gli effetti possono anche opzionalmente specificare come "fare pulizia" dopo la loro esecuzione. Ad esempio, questo componente utilizza un effetto per sottoscrivere lo stato online di un amico, per poi rimuovere la sottoscrizione nella fase di pulizia: ```js{10-16} import React, { useState, useEffect } from 'react'; From 5fc0e3a7aeb9e143d5d5bedc508502c01de81074 Mon Sep 17 00:00:00 2001 From: Alessandro De Blasis Date: Tue, 25 Jun 2019 05:40:33 +0100 Subject: [PATCH 16/17] Update content/docs/hooks-overview.md Co-Authored-By: Luca Nardi --- content/docs/hooks-overview.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-overview.md b/content/docs/hooks-overview.md index 99b021ff3..957763e96 100644 --- a/content/docs/hooks-overview.md +++ b/content/docs/hooks-overview.md @@ -128,7 +128,7 @@ function FriendStatus(props) { } ``` -In questo esempio, React rimuoverebbe la sottoscrizione alla nostra `ChatAPI` quando il componente viene smontato, ed anche prima che l'effetto venga eseguito nuovamente nel caso di una renderizzazione successiva. (Se vuoi, esiste un modo per [dire a React di evitare che avvengano sottoscrizioni multiple](/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects) nel caso in cui `props.friend.id` che viene passato a `ChatAPI` non è cambiato.) +In questo esempio, React rimuoverebbe la sottoscrizione alla nostra `ChatAPI` quando il componente viene smontato, ed anche prima che l'effetto venga eseguito nuovamente nel caso di una renderizzazione successiva. (Se vuoi, esiste un modo per [dire a React di evitare che avvengano sottoscrizioni multiple](/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects) nel caso in cui `props.friend.id` che viene passato a `ChatAPI` non sia cambiato.) Come avviene con `useState`, puoi usare più di un singolo effetto in un componente: From f85992d83552384395c2d7a94fb742c5fb147d3d Mon Sep 17 00:00:00 2001 From: Alessandro De Blasis Date: Tue, 25 Jun 2019 05:40:42 +0100 Subject: [PATCH 17/17] Update content/docs/hooks-overview.md Co-Authored-By: Luca Nardi --- content/docs/hooks-overview.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/docs/hooks-overview.md b/content/docs/hooks-overview.md index 957763e96..d80198f93 100644 --- a/content/docs/hooks-overview.md +++ b/content/docs/hooks-overview.md @@ -153,7 +153,7 @@ function FriendStatusConContatore(props) { // ... ``` -Gli Hooks ti permettono di organizzare gli effetti collaterani in un componente a seconda di come le parti sono collegate tra loro (come aggiungere o rimuovere una sottoscrizione), piuttosto che forzarti a doverle suddividere in base a metodi di lifecycle. +Gli Hooks ti permettono di organizzare gli effetti collaterali in un componente a seconda di come le parti sono collegate tra loro (come aggiungere o rimuovere una sottoscrizione), piuttosto che forzarti a doverle suddividere in base a metodi di lifecycle. >Spiegazione Dettagliata >