From b463148665cee03050071971bed689d0a1344b5c Mon Sep 17 00:00:00 2001 From: Samuele Piazzesi Date: Tue, 25 Apr 2023 16:06:26 +0200 Subject: [PATCH 01/26] init translation --- src/content/learn/thinking-in-react.md | 78 +++++++++++++------------- 1 file changed, 40 insertions(+), 38 deletions(-) diff --git a/src/content/learn/thinking-in-react.md b/src/content/learn/thinking-in-react.md index 23d4beb3f..53e7f2b45 100644 --- a/src/content/learn/thinking-in-react.md +++ b/src/content/learn/thinking-in-react.md @@ -239,41 +239,41 @@ This means only the search text and the value of the checkbox are state! Nicely #### Props vs State {/*props-vs-state*/} -There are two types of "model" data in React: props and state. The two are very different: +Esistono due tipi di "modelli" di dati in React: props e state. Sono molto diversi tra di loro -* [**Props** are like arguments you pass](/learn/passing-props-to-a-component) to a function. They let a parent component pass data to a child component and customize its appearance. For example, a `Form` can pass a `color` prop to a `Button`. -* [**State** is like a component’s memory.](/learn/state-a-components-memory) It lets a component keep track of some information and change it in response to interactions. For example, a `Button` might keep track of `isHovered` state. +* [Le **Props** sono come argomenti che passi](/learn/passing-props-to-a-component) ad una funzione. Permettono a un componente genitore di passare dei dati ad un componente figlio e di personalizzarne l'aspetto. Per esempio, un `Form` può passare una prop `color` ad un `Button`. +* [**Lo State** è come se fosse la memoria di un componente.](/learn/state-a-components-memory) Permette a un componente di tenere traccia di alcune informazioni e modificarle in risposta ad interazioni. Per esempio, un `Button` potrebbe tenere traccia dello state `isHovered`. -Props and state are different, but they work together. A parent component will often keep some information in state (so that it can change it), and *pass it down* to child components as their props. It's okay if the difference still feels fuzzy on the first read. It takes a bit of practice for it to really stick! +Props e state sono diversi, ma lavorano insieme. Un componente genitore terrà spesso alcune informazioni nello state (in modo che possa modificarle) e *passarle* ai componenti figlio come props. È normale se questa differenza ti sembra ancora un po' confusa alla prima lettura. Ci vuole un po' di pratica per farla rimanere impressa! -## Step 4: Identify where your state should live {/*step-4-identify-where-your-state-should-live*/} +## Step 4: Identifica dove lo state dovrebbe vivere {/*step-4-identify-where-your-state-should-live*/} -After identifying your app’s minimal state data, you need to identify which component is responsible for changing this state, or *owns* the state. Remember: React uses one-way data flow, passing data down the component hierarchy from parent to child component. It may not be immediately clear which component should own what state. This can be challenging if you’re new to this concept, but you can figure it out by following these steps! +Dopo aver identificato il valore minimo dello state della tua applicazione, devi identificare quale componente è responsabile per modificarlo, o *possiede* lo state. Ricorda: React usa un flusso di dati unidirezionale, passando i dati dalla gerarchia dei componenti da genitore a componente figlio. Potrebbe non essere immediatamente chiaro quale componente dovrebbe possedere quale stato. Questo concetto può essere difficile da capire se per te è nuovo, ma puoi capirlo seguendo questi passaggi! -For each piece of state in your application: +Per ogni pezzo di state nella tua applicazione: -1. Identify *every* component that renders something based on that state. -2. Find their closest common parent component--a component above them all in the hierarchy. -3. Decide where the state should live: - 1. Often, you can put the state directly into their common parent. - 2. You can also put the state into some component above their common parent. - 3. If you can't find a component where it makes sense to own the state, create a new component solely for holding the state and add it somewhere in the hierarchy above the common parent component. +1. Identifica *tutti* i componenti che mostrano qualcosa basandosi su quello state. +2. Trova il loro componente genitore comune più vicino--un componente sopra di loro nella gerarchia. +3. Decidi dove lo state dovrebbe vivere: + 1. Spesso, puoi mettere lo state direttamente nel loro genitore comune. + 2. Puoi anche mettere lo state in qualche componente sopra il loro genitore comune. + 3. Se non puoi trovare un componente in cui abbia senso possedere lo state, crea un nuovo componente esclusivamente per contenere lo state e aggiungilo in qualche punto della gerarchia sopra il componente genitore comune. -In the previous step, you found two pieces of state in this application: the search input text, and the value of the checkbox. In this example, they always appear together, so it makes sense to put them into the same place. +Nello step precedente, hai identificato due pezzi di state in questa applicazione: il testo di input di ricerca e il valore della checkbox. In questo esempio, appaiono sempre insieme, quindi ha senso metterli nello stesso posto. -Now let's run through our strategy for them: +Adesso eseguiamo la nostra strategia per essi: -1. **Identify components that use state:** - * `ProductTable` needs to filter the product list based on that state (search text and checkbox value). - * `SearchBar` needs to display that state (search text and checkbox value). -1. **Find their common parent:** The first parent component both components share is `FilterableProductTable`. -2. **Decide where the state lives**: We'll keep the filter text and checked state values in `FilterableProductTable`. +1. **Identifica i componenti che usano lo state:** + * `ProductTable` ha bisogno di filtrare la lista dei prodotti in base a quei valori di state (testo di ricerca e valore della checkbox). + * `SearchBar` ha bisogno di mostrare lo state (testo di ricerca e valore della checkbox). +1. **Trova il loro genitore comune:** Il primo componente genitore che entrambi i componenti condividono è `FilterableProductTable`. +2. **Decidi dove vive lo state**: Terremo i valori dello state del testo del filtro e della checkbox in `FilterableProductTable`. -So the state values will live in `FilterableProductTable`. +Quindi i valori di state vivranno in `FilterableProductTable`. -Add state to the component with the [`useState()` Hook.](/reference/react/useState) Hooks are special functions that let you "hook into" React. Add two state variables at the top of `FilterableProductTable` and specify their initial state: +Aggiungi lo state al componente con l'[`useState()` Hook.](/reference/react/useState) Gli Hooks sono funzioni speciali che ti permettono di "collegarti" a React. Aggiungi due variabili state all'inizio di `FilterableProductTable` e specifica il loro stato iniziale: ```js function FilterableProductTable({ products }) { @@ -281,7 +281,7 @@ function FilterableProductTable({ products }) { const [inStockOnly, setInStockOnly] = useState(false); ``` -Then, pass `filterText` and `inStockOnly` to `ProductTable` and `SearchBar` as props: +Poi, passa `filterText` e `inStockOnly` a `ProductTable` e `SearchBar` come props: ```js
@@ -295,7 +295,7 @@ Then, pass `filterText` and `inStockOnly` to `ProductTable` and `SearchBar` as p
``` -You can start seeing how your application will behave. Edit the `filterText` initial value from `useState('')` to `useState('fruit')` in the sandbox code below. You'll see both the search input text and the table update: +Puoi iniziare a vedere come si comporterà la tua applicazione. Modifica il valore iniziale di `filterText` da `useState('')` a `useState('fruit')` nel codice sandbox qui sotto. Vedrai sia il testo di input di ricerca che la tabella si aggiornano: @@ -398,7 +398,7 @@ function SearchBar({ filterText, inStockOnly }) { type="checkbox" checked={inStockOnly} /> {' '} - Only show products in stock + Mostra solo prodotti in stock ); @@ -437,7 +437,7 @@ td { -Notice that editing the form doesn't work yet. There is a console error in the sandbox above explaining why: +Nota che la modifica del form non funziona ancora. Nello sandbox sopra c'è un errore di console che spiega perché: @@ -445,7 +445,7 @@ You provided a \`value\` prop to a form field without an \`onChange\` handler. T -In the sandbox above, `ProductTable` and `SearchBar` read the `filterText` and `inStockOnly` props to render the table, the input, and the checkbox. For example, here is how `SearchBar` populates the input value: +Nel sandbox sopra, `ProductTable` e `SearchBar` leggono le props `filterText` e `inStockOnly` per renderizzare la tabella, l'input e checkbox. Ad esempio, ecco come `SearchBar` popola il valore dell'input: ```js {1,6} function SearchBar({ filterText, inStockOnly }) { @@ -457,16 +457,15 @@ function SearchBar({ filterText, inStockOnly }) { placeholder="Search..."/> ``` -However, you haven't added any code to respond to the user actions like typing yet. This will be your final step. - +Tuttavia, non hai aggiunto alcun codice per rispondere alle azioni dell'utente come la digitazione. Questo sarà il tuo ultimo passaggio. -## Step 5: Add inverse data flow {/*step-5-add-inverse-data-flow*/} +## Step 5: Aggiungi il flusso di dati inverso {/*step-5-add-inverse-data-flow*/} -Currently your app renders correctly with props and state flowing down the hierarchy. But to change the state according to user input, you will need to support data flowing the other way: the form components deep in the hierarchy need to update the state in `FilterableProductTable`. +Attualmente la tua applicazione viene visualizzata correttamente con le props e lo state che fluiscono verso il basso nella gerarchia. Ma per modificare lo state in base all'input dell'utente, è necessario supportare il flusso di dati anche in senso inverso: i componenti del modulo che si trovano più in basso nell'albero devono aggiornare lo state in `FilterableProductTable`. -React makes this data flow explicit, but it requires a little more typing than two-way data binding. If you try to type or check the box in the example above, you'll see that React ignores your input. This is intentional. By writing ``, you've set the `value` prop of the `input` to always be equal to the `filterText` state passed in from `FilterableProductTable`. Since `filterText` state is never set, the input never changes. +React rende questo flusso di dati in modo esplicito, ma richiede un po' più di scrittura rispetto al two-way data binding. Se provi a digitare o a spuntare la checkbox nell'esempio qui sopra, vedrai che React ignora la tua input. Questo è voluto. Scrivendo ``, hai impostato la prop `value` dell'`input` per essere sempre uguale allo stato `filterText` passato da `FilterableProductTable`. Poiché lo stato `filterText` non viene mai impostato, l'input non cambia mai. -You want to make it so whenever the user changes the form inputs, the state updates to reflect those changes. The state is owned by `FilterableProductTable`, so only it can call `setFilterText` and `setInStockOnly`. To let `SearchBar` update the `FilterableProductTable`'s state, you need to pass these functions down to `SearchBar`: +L'obiettivo è che ogni volta che l'utente modifica gli input del form lo state si aggiorni per riflettere tali modifiche. Lo state è di proprietà di `FilterableProductTable`, quindi solo esso può chiamare `setFilterText` e `setInStockOnly`. Per consentire a `SearchBar` di aggiornare lo state di `FilterableProductTable`, è necessario passare queste funzioni a `SearchBar`: ```js {2,3,10,11} function FilterableProductTable({ products }) { @@ -482,7 +481,8 @@ function FilterableProductTable({ products }) { onInStockOnlyChange={setInStockOnly} /> ``` -Inside the `SearchBar`, you will add the `onChange` event handlers and set the parent state from them: +All'interno di `SearchBar`, aggiungi l'evento `onChange` e imposta lo state del genitore da esso: + ```js {5} onFilterTextChange(e.target.value)} /> ``` +Adesso l'applicazione funziona completamente! Now the application fully works! @@ -603,7 +604,7 @@ function SearchBar({ checked={inStockOnly} onChange={(e) => onInStockOnlyChange(e.target.checked)} /> {' '} - Only show products in stock + Mostra solo prodotti in stock ); @@ -642,8 +643,9 @@ td { -You can learn all about handling events and updating state in the [Adding Interactivity](/learn/adding-interactivity) section. +Puoi imparare tutto su come gestire gli eventi e aggiornare lo state nella sezione [Adding Interactivity](/learn/adding-interactivity). + +## Come procedere {/*where-to-go-from-here*/} -## Where to go from here {/*where-to-go-from-here*/} +Questa è stata una breve introduzione su come pensare alla costruzione di componenti e applicazioni con React. Puoi [iniziare un progetto React](/learn/installation) subito o [approfondire la sintassi](/learn/describing-the-ui) usata in questo tutorial. -This was a very brief introduction to how to think about building components and applications with React. You can [start a React project](/learn/installation) right now or [dive deeper on all the syntax](/learn/describing-the-ui) used in this tutorial. From 460b6bca7a71f2489794538a18ab51967de86c22 Mon Sep 17 00:00:00 2001 From: Samuele Piazzesi Date: Tue, 25 Apr 2023 16:38:06 +0200 Subject: [PATCH 02/26] finish translation --- src/content/learn/thinking-in-react.md | 96 +++++++++++++------------- 1 file changed, 48 insertions(+), 48 deletions(-) diff --git a/src/content/learn/thinking-in-react.md b/src/content/learn/thinking-in-react.md index 53e7f2b45..29027593f 100644 --- a/src/content/learn/thinking-in-react.md +++ b/src/content/learn/thinking-in-react.md @@ -1,18 +1,18 @@ --- -title: Thinking in React +title: Pensare in React --- -React can change how you think about the designs you look at and the apps you build. When you build a user interface with React, you will first break it apart into pieces called *components*. Then, you will describe the different visual states for each of your components. Finally, you will connect your components together so that the data flows through them. In this tutorial, we’ll guide you through the thought process of building a searchable product data table with React. +React può cambiare il modo in cui pensi ai design che vedi e alle applicazioni che costruisci. Quando costruisci un'interfaccia utente con React, prima dividerai il tutto in parti chiamate *componenti*. Poi, descriverai gli stati visivi diversi per ogni componente. Infine, collegherai i tuoi componenti in modo che i dati fluiscono attraverso di essi. In questo tutorial, ti guideremo attraverso il processo di pensiero per costruire una tabella di dati prodotto ricercabile con React. -## Start with the mockup {/*start-with-the-mockup*/} +## Inizia con il mockup {/*start-with-the-mockup*/} -Imagine that you already have a JSON API and a mockup from a designer. +Immagina che tu abbia già una API JSON e un mockup di un designer. -The JSON API returns some data that looks like this: +L'API JSON ritorna alcuni dati come i seguenti: ```json [ @@ -25,25 +25,25 @@ The JSON API returns some data that looks like this: ] ``` -The mockup looks like this: +Il mockup appare così: -To implement a UI in React, you will usually follow the same five steps. +Per implementare una UI in React, di solito segui i seguenti cinque step. -## Step 1: Break the UI into a component hierarchy {/*step-1-break-the-ui-into-a-component-hierarchy*/} +## Step 1: Dividi la UI in una gerarchia di componenti {/*step-1-break-the-ui-into-a-component-hierarchy*/} -Start by drawing boxes around every component and subcomponent in the mockup and naming them. If you work with a designer, they may have already named these components in their design tool. Ask them! +Inizia disegnando rettangoli intorno a ogni componente e sottocomponente nel mockup e assegna loro un nome. Se lavori con un designer, potrebbe avere già nominato questi componenti nel suo tool di design. Chiediglieli! -Depending on your background, you can think about splitting up a design into components in different ways: +A seconda del tuo background, puoi pensare a dividere un design in componenti in diversi modi: -* **Programming**--use the same techniques for deciding if you should create a new function or object. One such technique is the [single responsibility principle](https://en.wikipedia.org/wiki/Single_responsibility_principle), that is, a component should ideally only do one thing. If it ends up growing, it should be decomposed into smaller subcomponents. -* **CSS**--consider what you would make class selectors for. (However, components are a bit less granular.) -* **Design**--consider how you would organize the design's layers. +* **Programming**--usa la stesso metodo per decidere se creare una nuova funzione o un nuovo oggetto. Uno di questi metodi è la [single responsibility principle](https://en.wikipedia.org/wiki/Single_responsibility_principle), ovvero un componente dovrebbe fare solo una cosa. Se cresce, dovrebbe essere decomposto in sottocomponenti più piccoli. +* **CSS**--considera cosa farebbe un selettore di classe. (Tuttavia, i componenti sono un po' meno granulari.) +* **Design**--considera come organizzare i livelli del design. -If your JSON is well-structured, you'll often find that it naturally maps to the component structure of your UI. That's because UI and data models often have the same information architecture--that is, the same shape. Separate your UI into components, where each component matches one piece of your data model. +Se il tuo JSON è strutturato bene, noterai che spesso mappa naturalmente la struttura dei componenti della tua UI. Questo perché la UI e i modelli di dati spesso hanno la stessa architettura dell'informazione--ovvero la stessa forma. Separa la tua UI in componenti, in cui ogni componente corrisponde a una parte del tuo modello di dati. -There are five components on this screen: +In questa schermata ci sono cinque componento: @@ -51,19 +51,19 @@ There are five components on this screen: -1. `FilterableProductTable` (grey) contains the entire app. -2. `SearchBar` (blue) receives the user input. -3. `ProductTable` (lavender) displays and filters the list according to the user input. -4. `ProductCategoryRow` (green) displays a heading for each category. -5. `ProductRow` (yellow) displays a row for each product. +1. `FilterableProductTable` (grigio) contiene l'intera app. +2. `SearchBar` (blu) riceve l'input dell'utente. +3. `ProductTable` (lavanda) mostra e filtra la lista in relazione all'input dell'utente. +4. `ProductCategoryRow` (verde) mostra un titolo per ogni categoria. +5. `ProductRow` (giallo) mostra una riga per ogni prodotto. -If you look at `ProductTable` (lavender), you'll see that the table header (containing the "Name" and "Price" labels) isn't its own component. This is a matter of preference, and you could go either way. For this example, it is a part of `ProductTable` because it appears inside the `ProductTable`'s list. However, if this header grows to be complex (e.g., if you add sorting), you can move it into its own `ProductTableHeader` component. +Se guardi il `ProductTable` (lavanda), noterai che l'intestazione della tabella (che contiene le label "Name" e "Price") non hanno i propri componenti. Questa è una questione di preferenza e puoi scegliere entrambe le opzioni. Per questo esempio, fa parte di `ProductTable` perché appare all'interno della lista di `ProductTable`. Tuttavia, se questa intestazione diventa complessa (ad esempio, se aggiungi la possibilità di ordinare), puoi spostarla in un proprio componente `ProductTableHeader`. -Now that you've identified the components in the mockup, arrange them into a hierarchy. Components that appear within another component in the mockup should appear as a child in the hierarchy: +Adesso che hai identificato i componenti nel mockup, organizzali in una gerarchia. I componenti che appaiono all'interno di un altro componente nel mockup dovrebbero apparire come figli: * `FilterableProductTable` * `SearchBar` @@ -71,13 +71,13 @@ Now that you've identified the components in the mockup, arrange them into a hie * `ProductCategoryRow` * `ProductRow` -## Step 2: Build a static version in React {/*step-2-build-a-static-version-in-react*/} +## Step 2: Costruisci una versione statica in React {/*step-2-build-a-static-version-in-react*/} -Now that you have your component hierarchy, it's time to implement your app. The most straightforward approach is to build a version that renders the UI from your data model without adding any interactivity... yet! It's often easier to build the static version first and add interactivity later. Building a static version requires a lot of typing and no thinking, but adding interactivity requires a lot of thinking and not a lot of typing. +Adesso che hai la tua gerarchia di componenti, è tempo di implementare la tua app. La soluzione più semplice è costruire una versione statica che renderizza la UI dal tuo modello di dati senza aggiungere alcuna interattività... almeno per ora! È spesso più facile costruire la versione statica prima e aggiungere interattività dopo. Costruire una versione statica richiede molta scrittura e nessuna riflessione, mentre aggiungere interattività richiede molta riflessione e poca scrittura. -To build a static version of your app that renders your data model, you'll want to build [components](/learn/your-first-component) that reuse other components and pass data using [props.](/learn/passing-props-to-a-component) Props are a way of passing data from parent to child. (If you're familiar with the concept of [state](/learn/state-a-components-memory), don't use state at all to build this static version. State is reserved only for interactivity, that is, data that changes over time. Since this is a static version of the app, you don't need it.) +Per costruire una versione statica della tua app che renderizza il tuo modello di dati, vorrai costruire [componenti](/learn/your-first-component) che riutilizzano altri componenti e passano dati usando [props.](/learn/passing-props-to-a-component) Le Props sono un modo per passare dati da genitore a figlio. (Se hai familiarità con il concetto di [state](/learn/state-a-components-memory), non usare lo state per costruire questa versione statica. Lo state è riservato solo all'interattività, ovvero i dati che cambiano nel tempo. Poiché questa è una versione statica dell'app, non ne hai bisogno.) -You can either build "top down" by starting with building the components higher up in the hierarchy (like `FilterableProductTable`) or "bottom up" by working from components lower down (like `ProductRow`). In simpler examples, it’s usually easier to go top-down, and on larger projects, it’s easier to go bottom-up. +Puoi costruirli "dall' alto verso il basso" iniziando a costruire i componenti più in alto nella gerarchia (come `FilterableProductTable`) o "dal basso verso l'alto" iniziando dai componenti più bassi (come `ProductRow`). In esempi più semplici, è solitamente più facile iniziare dall'alto verso il basso, e nei progetti più grandi è più facile iniziare dal basso verso l'alto. @@ -195,45 +195,45 @@ td { -(If this code looks intimidating, go through the [Quick Start](/learn/) first!) +(Se questo codice ti spaventa, leggi prima il [Quick Start](/learn/)!) -After building your components, you'll have a library of reusable components that render your data model. Because this is a static app, the components will only return JSX. The component at the top of the hierarchy (`FilterableProductTable`) will take your data model as a prop. This is called _one-way data flow_ because the data flows down from the top-level component to the ones at the bottom of the tree. +Dopo aver costruito i tuoi componenti, avrai una libreria di componenti riutilizzabili che renderizzano il tuo modello di dati. Dato che questa è un'app statica, i componenti restituiranno solo JSX. Il componente alla cima della gerarchia (`FilterableProductTable`) prenderà il tuo modello di dati come prop. Questo viene chiamato _one-way data flow_ (flusso di dati unidirezionale) perché i dati fluiscono dal componente di livello superiore a quelli al fondo dell'albero. -At this point, you should not be using any state values. That’s for the next step! +A questo punto, non dovresti usare alcun valore di state. Lo farai nel prossimo step! -## Step 3: Find the minimal but complete representation of UI state {/*step-3-find-the-minimal-but-complete-representation-of-ui-state*/} +## Step 3: Trova la minima ma completa rappresentazione dello state della UI {/*step-3-find-the-minimal-but-complete-representation-of-ui-state*/} -To make the UI interactive, you need to let users change your underlying data model. You will use *state* for this. +Per rendere la UI interattiva, hai bisogno di permettere agli utenti di modificare il tuo modello di dati sottostante. Per questo userai lo *state*. -Think of state as the minimal set of changing data that your app needs to remember. The most important principle for structuring state is to keep it [DRY (Don't Repeat Yourself).](https://en.wikipedia.org/wiki/Don%27t_repeat_yourself) Figure out the absolute minimal representation of the state your application needs and compute everything else on-demand. For example, if you're building a shopping list, you can store the items as an array in state. If you want to also display the number of items in the list, don't store the number of items as another state value--instead, read the length of your array. +Immaginati lo state come il set minimo di dati modificabili che la tua app deve ricordare per funzionare. Il principio più importante per la struttura dello state è quello di mantenerlo [DRY (Don't Repeat Yourself).](https://en.wikipedia.org/wiki/Don%27t_repeat_yourself) Trova la rappresentazione minima dello state che la tua applicazione ha bisogno e calcola tutto il resto on-demand. Per esempio, se stai costruendo una lista della spesa, puoi memorizzare gli elementi come un array nello state. Se vuoi anche visualizzare il numero di elementi nella lista, non memorizzare il numero di elementi come un altro valore di state--invece, leggi la lunghezza del tuo array. -Now think of all of the pieces of data in this example application: +Adesso immaginati tutti i pezzi di dati in questa applicazione d'esempio: -1. The original list of products -2. The search text the user has entered -3. The value of the checkbox -4. The filtered list of products +1. La lista originale di prodotti +2. Il testo di ricerca che l'utente ha inserito +3. Il valore della checkbox +4. La lista filtrata di prodotti -Which of these are state? Identify the ones that are not: +Quale di questi può essere state? Identifica quelli che non lo sono: -* Does it **remain unchanged** over time? If so, it isn't state. -* Is it **passed in from a parent** via props? If so, it isn't state. -* **Can you compute it** based on existing state or props in your component? If so, it *definitely* isn't state! +* **Rimane invariato** nel tempo? Allora non è state. +* Viene **passato da un componente genitore** via props? Allora non è state. +* **Puoi calcolarlo** basandoti su uno state diverso o da props nel tuo componente? Allora *sicuramente non é* state! -What's left is probably state. +Quello che è rimane probabilmente può considerarsi state. -Let's go through them one by one again: +Analizziamo di nuovo questi dati uno alla volta: -1. The original list of products is **passed in as props, so it's not state.** -2. The search text seems to be state since it changes over time and can't be computed from anything. -3. The value of the checkbox seems to be state since it changes over time and can't be computed from anything. -4. The filtered list of products **isn't state because it can be computed** by taking the original list of products and filtering it according to the search text and value of the checkbox. +1. la lista originale di prodotti è **passata in via props, quindi non è state.** +2. Il testo di ricerca sembra essere state visto che cambia nel tempo e non può essere ricavato da nulla. +3. Il valore della checkbox sembra essere state visto che cambia nel tempo e non può essere ricavato da nulla. +4. La lista filtrata dei prodotti **non è state perchè può essere calcolata** prendendo la lista originale dei prodotti e filtrandola in base al testo di ricerca e al valore della checkbox. -This means only the search text and the value of the checkbox are state! Nicely done! +Quindi significa che solo il testo di ricerca e il valore della checkbox sono state! Bene fatto! From d08cf02c266ceae717fe2e07760bb69c4ea87c0a Mon Sep 17 00:00:00 2001 From: Samuele Piazzesi Date: Tue, 25 Apr 2023 16:41:07 +0200 Subject: [PATCH 03/26] finisth translation --- src/content/learn/thinking-in-react.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/content/learn/thinking-in-react.md b/src/content/learn/thinking-in-react.md index 29027593f..c0780ea2b 100644 --- a/src/content/learn/thinking-in-react.md +++ b/src/content/learn/thinking-in-react.md @@ -222,7 +222,7 @@ Quale di questi può essere state? Identifica quelli che non lo sono: * **Rimane invariato** nel tempo? Allora non è state. * Viene **passato da un componente genitore** via props? Allora non è state. -* **Puoi calcolarlo** basandoti su uno state diverso o da props nel tuo componente? Allora *sicuramente non é* state! +* **Puoi calcolarlo** basandoti su uno state diverso o da props nel tuo componente? Allora **sicuramente non é** state! Quello che è rimane probabilmente può considerarsi state. @@ -398,7 +398,7 @@ function SearchBar({ filterText, inStockOnly }) { type="checkbox" checked={inStockOnly} /> {' '} - Mostra solo prodotti in stock + Only show products in stock ); @@ -604,7 +604,7 @@ function SearchBar({ checked={inStockOnly} onChange={(e) => onInStockOnlyChange(e.target.checked)} /> {' '} - Mostra solo prodotti in stock + Only show products in stock ); From 28f8b3e647afb8cea3b4274f5def93591bb5df40 Mon Sep 17 00:00:00 2001 From: Samuele Piazzesi <38422754+SamuelePiazzesi@users.noreply.github.com> Date: Wed, 26 Apr 2023 08:47:40 +0200 Subject: [PATCH 04/26] Update src/content/learn/thinking-in-react.md Co-authored-by: Mattia Sanfilippo --- src/content/learn/thinking-in-react.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/thinking-in-react.md b/src/content/learn/thinking-in-react.md index c0780ea2b..2a8a0a423 100644 --- a/src/content/learn/thinking-in-react.md +++ b/src/content/learn/thinking-in-react.md @@ -35,7 +35,7 @@ Per implementare una UI in React, di solito segui i seguenti cinque step. Inizia disegnando rettangoli intorno a ogni componente e sottocomponente nel mockup e assegna loro un nome. Se lavori con un designer, potrebbe avere già nominato questi componenti nel suo tool di design. Chiediglieli! -A seconda del tuo background, puoi pensare a dividere un design in componenti in diversi modi: +A seconda del tuo background, puoi pensare di dividere un design in componenti in diversi modi: * **Programming**--usa la stesso metodo per decidere se creare una nuova funzione o un nuovo oggetto. Uno di questi metodi è la [single responsibility principle](https://en.wikipedia.org/wiki/Single_responsibility_principle), ovvero un componente dovrebbe fare solo una cosa. Se cresce, dovrebbe essere decomposto in sottocomponenti più piccoli. * **CSS**--considera cosa farebbe un selettore di classe. (Tuttavia, i componenti sono un po' meno granulari.) From 84d76e25265c84d2d45575e4cff3bf0063e3a1ab Mon Sep 17 00:00:00 2001 From: Samuele Piazzesi <38422754+SamuelePiazzesi@users.noreply.github.com> Date: Wed, 26 Apr 2023 08:47:58 +0200 Subject: [PATCH 05/26] Update src/content/learn/thinking-in-react.md Co-authored-by: Mattia Sanfilippo --- src/content/learn/thinking-in-react.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/thinking-in-react.md b/src/content/learn/thinking-in-react.md index 2a8a0a423..d247d2408 100644 --- a/src/content/learn/thinking-in-react.md +++ b/src/content/learn/thinking-in-react.md @@ -37,7 +37,7 @@ Inizia disegnando rettangoli intorno a ogni componente e sottocomponente nel moc A seconda del tuo background, puoi pensare di dividere un design in componenti in diversi modi: -* **Programming**--usa la stesso metodo per decidere se creare una nuova funzione o un nuovo oggetto. Uno di questi metodi è la [single responsibility principle](https://en.wikipedia.org/wiki/Single_responsibility_principle), ovvero un componente dovrebbe fare solo una cosa. Se cresce, dovrebbe essere decomposto in sottocomponenti più piccoli. +* **Programming**--usa lo stesso metodo per decidere se creare una nuova funzione o un nuovo oggetto. Uno di questi metodi è il [single responsibility principle](https://en.wikipedia.org/wiki/Single_responsibility_principle), ovvero un componente dovrebbe fare solo una cosa. Se cresce, dovrebbe essere decomposto in sottocomponenti più piccoli. * **CSS**--considera cosa farebbe un selettore di classe. (Tuttavia, i componenti sono un po' meno granulari.) * **Design**--considera come organizzare i livelli del design. From 15bab83dd400446c989b3510c19f250465dce8c8 Mon Sep 17 00:00:00 2001 From: Samuele Piazzesi <38422754+SamuelePiazzesi@users.noreply.github.com> Date: Wed, 26 Apr 2023 08:48:54 +0200 Subject: [PATCH 06/26] Update src/content/learn/thinking-in-react.md Co-authored-by: Mattia Sanfilippo --- src/content/learn/thinking-in-react.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/thinking-in-react.md b/src/content/learn/thinking-in-react.md index d247d2408..52d908d52 100644 --- a/src/content/learn/thinking-in-react.md +++ b/src/content/learn/thinking-in-react.md @@ -43,7 +43,7 @@ A seconda del tuo background, puoi pensare di dividere un design in componenti i Se il tuo JSON è strutturato bene, noterai che spesso mappa naturalmente la struttura dei componenti della tua UI. Questo perché la UI e i modelli di dati spesso hanno la stessa architettura dell'informazione--ovvero la stessa forma. Separa la tua UI in componenti, in cui ogni componente corrisponde a una parte del tuo modello di dati. -In questa schermata ci sono cinque componento: +In questa schermata ci sono cinque componenti: From 259f6129ff495c4f507db12fe044f504ce6e8a03 Mon Sep 17 00:00:00 2001 From: Samuele Piazzesi <38422754+SamuelePiazzesi@users.noreply.github.com> Date: Wed, 26 Apr 2023 08:49:09 +0200 Subject: [PATCH 07/26] Update src/content/learn/thinking-in-react.md Co-authored-by: Mattia Sanfilippo --- src/content/learn/thinking-in-react.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/thinking-in-react.md b/src/content/learn/thinking-in-react.md index 52d908d52..8a882bfa7 100644 --- a/src/content/learn/thinking-in-react.md +++ b/src/content/learn/thinking-in-react.md @@ -61,7 +61,7 @@ In questa schermata ci sono cinque componenti: -Se guardi il `ProductTable` (lavanda), noterai che l'intestazione della tabella (che contiene le label "Name" e "Price") non hanno i propri componenti. Questa è una questione di preferenza e puoi scegliere entrambe le opzioni. Per questo esempio, fa parte di `ProductTable` perché appare all'interno della lista di `ProductTable`. Tuttavia, se questa intestazione diventa complessa (ad esempio, se aggiungi la possibilità di ordinare), puoi spostarla in un proprio componente `ProductTableHeader`. +Se guardi il `ProductTable` (lavanda), noterai che l'intestazione della tabella (che contiene le label "Name" e "Price") non ha un proprio componente. Questa è una questione di preferenza e puoi scegliere entrambe le opzioni. Per questo esempio, fa parte di `ProductTable` perché appare all'interno della lista di `ProductTable`. Tuttavia, se questa intestazione diventa complessa (ad esempio, se aggiungi la possibilità di ordinare), puoi spostarla in un proprio componente `ProductTableHeader`. Adesso che hai identificato i componenti nel mockup, organizzali in una gerarchia. I componenti che appaiono all'interno di un altro componente nel mockup dovrebbero apparire come figli: From 64740cb25dffc263b612dd5636e758c9f3efb96f Mon Sep 17 00:00:00 2001 From: Samuele Piazzesi <38422754+SamuelePiazzesi@users.noreply.github.com> Date: Wed, 26 Apr 2023 08:49:49 +0200 Subject: [PATCH 08/26] Update src/content/learn/thinking-in-react.md Co-authored-by: Mattia Sanfilippo --- src/content/learn/thinking-in-react.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/thinking-in-react.md b/src/content/learn/thinking-in-react.md index 8a882bfa7..b5c241239 100644 --- a/src/content/learn/thinking-in-react.md +++ b/src/content/learn/thinking-in-react.md @@ -209,7 +209,7 @@ A questo punto, non dovresti usare alcun valore di state. Lo farai nel prossimo Per rendere la UI interattiva, hai bisogno di permettere agli utenti di modificare il tuo modello di dati sottostante. Per questo userai lo *state*. -Immaginati lo state come il set minimo di dati modificabili che la tua app deve ricordare per funzionare. Il principio più importante per la struttura dello state è quello di mantenerlo [DRY (Don't Repeat Yourself).](https://en.wikipedia.org/wiki/Don%27t_repeat_yourself) Trova la rappresentazione minima dello state che la tua applicazione ha bisogno e calcola tutto il resto on-demand. Per esempio, se stai costruendo una lista della spesa, puoi memorizzare gli elementi come un array nello state. Se vuoi anche visualizzare il numero di elementi nella lista, non memorizzare il numero di elementi come un altro valore di state--invece, leggi la lunghezza del tuo array. +Immagina lo state come il set minimo di dati modificabili che la tua app deve ricordare per funzionare. Il principio più importante per la struttura dello state è quello di mantenerlo [DRY (Don't Repeat Yourself).](https://it.wikipedia.org/wiki/Don%27t_repeat_yourself) Trova la rappresentazione minima assoluta dello state che la tua applicazione ha bisogno e calcola tutto il resto on-demand. Per esempio, se stai costruendo una lista della spesa, puoi memorizzare gli elementi come un array nello state. Se vuoi anche visualizzare il numero di elementi nella lista, non memorizzare il numero di elementi come un altro valore di state--invece, leggi la lunghezza del tuo array. Adesso immaginati tutti i pezzi di dati in questa applicazione d'esempio: From 8e4fe42b213a7ac715c233d220afd8e0b15d5b84 Mon Sep 17 00:00:00 2001 From: Samuele Piazzesi <38422754+SamuelePiazzesi@users.noreply.github.com> Date: Wed, 26 Apr 2023 08:50:03 +0200 Subject: [PATCH 09/26] Update src/content/learn/thinking-in-react.md Co-authored-by: Mattia Sanfilippo --- src/content/learn/thinking-in-react.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/thinking-in-react.md b/src/content/learn/thinking-in-react.md index b5c241239..06ab83176 100644 --- a/src/content/learn/thinking-in-react.md +++ b/src/content/learn/thinking-in-react.md @@ -295,7 +295,7 @@ Poi, passa `filterText` e `inStockOnly` a `ProductTable` e `SearchBar` come prop ``` -Puoi iniziare a vedere come si comporterà la tua applicazione. Modifica il valore iniziale di `filterText` da `useState('')` a `useState('fruit')` nel codice sandbox qui sotto. Vedrai sia il testo di input di ricerca che la tabella si aggiornano: +Puoi iniziare a vedere come si comporterà la tua applicazione. Modifica il valore iniziale di `filterText` da `useState('')` a `useState('fruit')` nel codice sandbox qui sotto. Vedrai che sia il testo di input di ricerca che la tabella si aggiornano: From cd0c883a8f6be1d619a484d2a89c1201bf953c39 Mon Sep 17 00:00:00 2001 From: Samuele Piazzesi <38422754+SamuelePiazzesi@users.noreply.github.com> Date: Wed, 26 Apr 2023 08:50:27 +0200 Subject: [PATCH 10/26] Update src/content/learn/thinking-in-react.md Co-authored-by: Mattia Sanfilippo --- src/content/learn/thinking-in-react.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/thinking-in-react.md b/src/content/learn/thinking-in-react.md index 06ab83176..ba214e682 100644 --- a/src/content/learn/thinking-in-react.md +++ b/src/content/learn/thinking-in-react.md @@ -437,7 +437,7 @@ td { -Nota che la modifica del form non funziona ancora. Nello sandbox sopra c'è un errore di console che spiega perché: +Nota che la modifica del form non funziona ancora. Nel sandbox sopra c'è un errore di console che spiega perché: From 6e622a9fc2dd4a7669e4cbbd8daa1b690860a928 Mon Sep 17 00:00:00 2001 From: Samuele Piazzesi <38422754+SamuelePiazzesi@users.noreply.github.com> Date: Wed, 26 Apr 2023 08:50:37 +0200 Subject: [PATCH 11/26] Update src/content/learn/thinking-in-react.md Co-authored-by: Mattia Sanfilippo --- src/content/learn/thinking-in-react.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/thinking-in-react.md b/src/content/learn/thinking-in-react.md index ba214e682..554dc85ad 100644 --- a/src/content/learn/thinking-in-react.md +++ b/src/content/learn/thinking-in-react.md @@ -463,7 +463,7 @@ Tuttavia, non hai aggiunto alcun codice per rispondere alle azioni dell'utente c Attualmente la tua applicazione viene visualizzata correttamente con le props e lo state che fluiscono verso il basso nella gerarchia. Ma per modificare lo state in base all'input dell'utente, è necessario supportare il flusso di dati anche in senso inverso: i componenti del modulo che si trovano più in basso nell'albero devono aggiornare lo state in `FilterableProductTable`. -React rende questo flusso di dati in modo esplicito, ma richiede un po' più di scrittura rispetto al two-way data binding. Se provi a digitare o a spuntare la checkbox nell'esempio qui sopra, vedrai che React ignora la tua input. Questo è voluto. Scrivendo ``, hai impostato la prop `value` dell'`input` per essere sempre uguale allo stato `filterText` passato da `FilterableProductTable`. Poiché lo stato `filterText` non viene mai impostato, l'input non cambia mai. +React rende questo flusso di dati in modo esplicito, ma richiede un po' più di scrittura rispetto al two-way data binding. Se provi a digitare o a spuntare la checkbox nell'esempio qui sopra, vedrai che React ignora il tuo input. Questo è voluto. Scrivendo ``, hai impostato la prop `value` dell'`input` per essere sempre uguale allo stato `filterText` passato da `FilterableProductTable`. Poiché lo stato `filterText` non viene mai impostato, l'input non cambia mai. L'obiettivo è che ogni volta che l'utente modifica gli input del form lo state si aggiorni per riflettere tali modifiche. Lo state è di proprietà di `FilterableProductTable`, quindi solo esso può chiamare `setFilterText` e `setInStockOnly`. Per consentire a `SearchBar` di aggiornare lo state di `FilterableProductTable`, è necessario passare queste funzioni a `SearchBar`: From 05369721fca3cad41e410d9941e29f0b1f461c5e Mon Sep 17 00:00:00 2001 From: Samuele Piazzesi <38422754+SamuelePiazzesi@users.noreply.github.com> Date: Wed, 26 Apr 2023 08:50:50 +0200 Subject: [PATCH 12/26] Update src/content/learn/thinking-in-react.md Co-authored-by: Mattia Sanfilippo --- src/content/learn/thinking-in-react.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/thinking-in-react.md b/src/content/learn/thinking-in-react.md index 554dc85ad..a5057c3d4 100644 --- a/src/content/learn/thinking-in-react.md +++ b/src/content/learn/thinking-in-react.md @@ -445,7 +445,7 @@ You provided a \`value\` prop to a form field without an \`onChange\` handler. T -Nel sandbox sopra, `ProductTable` e `SearchBar` leggono le props `filterText` e `inStockOnly` per renderizzare la tabella, l'input e checkbox. Ad esempio, ecco come `SearchBar` popola il valore dell'input: +Nel sandbox sopra, `ProductTable` e `SearchBar` leggono le props `filterText` e `inStockOnly` per renderizzare la tabella, l'input e la checkbox. Ad esempio, ecco come `SearchBar` popola il valore dell'input: ```js {1,6} function SearchBar({ filterText, inStockOnly }) { From 28d2824712b56ab3a7d8a8ad699d886386ea7117 Mon Sep 17 00:00:00 2001 From: Samuele Piazzesi <38422754+SamuelePiazzesi@users.noreply.github.com> Date: Wed, 26 Apr 2023 08:51:02 +0200 Subject: [PATCH 13/26] Update src/content/learn/thinking-in-react.md Co-authored-by: Mattia Sanfilippo --- src/content/learn/thinking-in-react.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/thinking-in-react.md b/src/content/learn/thinking-in-react.md index a5057c3d4..97e9e36c8 100644 --- a/src/content/learn/thinking-in-react.md +++ b/src/content/learn/thinking-in-react.md @@ -461,7 +461,7 @@ Tuttavia, non hai aggiunto alcun codice per rispondere alle azioni dell'utente c ## Step 5: Aggiungi il flusso di dati inverso {/*step-5-add-inverse-data-flow*/} -Attualmente la tua applicazione viene visualizzata correttamente con le props e lo state che fluiscono verso il basso nella gerarchia. Ma per modificare lo state in base all'input dell'utente, è necessario supportare il flusso di dati anche in senso inverso: i componenti del modulo che si trovano più in basso nell'albero devono aggiornare lo state in `FilterableProductTable`. +Attualmente la tua applicazione viene visualizzata correttamente con le props e lo state che fluiscono verso il basso nella gerarchia. Ma per modificare lo state in base all'input dell'utente, è necessario supportare il flusso di dati anche in senso inverso: i componenti del form che si trovano più in basso nell'albero devono aggiornare lo state in `FilterableProductTable`. React rende questo flusso di dati in modo esplicito, ma richiede un po' più di scrittura rispetto al two-way data binding. Se provi a digitare o a spuntare la checkbox nell'esempio qui sopra, vedrai che React ignora il tuo input. Questo è voluto. Scrivendo ``, hai impostato la prop `value` dell'`input` per essere sempre uguale allo stato `filterText` passato da `FilterableProductTable`. Poiché lo stato `filterText` non viene mai impostato, l'input non cambia mai. From 78bac6da6eb167da8db0d07221a0ff46a86e007b Mon Sep 17 00:00:00 2001 From: Samuele Piazzesi <38422754+SamuelePiazzesi@users.noreply.github.com> Date: Wed, 26 Apr 2023 08:51:38 +0200 Subject: [PATCH 14/26] Update src/content/learn/thinking-in-react.md Co-authored-by: Mattia Sanfilippo --- src/content/learn/thinking-in-react.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/thinking-in-react.md b/src/content/learn/thinking-in-react.md index 97e9e36c8..ba3f4ccb6 100644 --- a/src/content/learn/thinking-in-react.md +++ b/src/content/learn/thinking-in-react.md @@ -221,7 +221,7 @@ Adesso immaginati tutti i pezzi di dati in questa applicazione d'esempio: Quale di questi può essere state? Identifica quelli che non lo sono: * **Rimane invariato** nel tempo? Allora non è state. -* Viene **passato da un componente genitore** via props? Allora non è state. +* Viene **passato da un componente genitore** tramite props? Allora non è state. * **Puoi calcolarlo** basandoti su uno state diverso o da props nel tuo componente? Allora **sicuramente non é** state! Quello che è rimane probabilmente può considerarsi state. From c5375ea8b0559b4750a362952638e54aeb3c4e01 Mon Sep 17 00:00:00 2001 From: Samuele Piazzesi <38422754+SamuelePiazzesi@users.noreply.github.com> Date: Wed, 26 Apr 2023 08:51:59 +0200 Subject: [PATCH 15/26] Update src/content/learn/thinking-in-react.md Co-authored-by: Mattia Sanfilippo --- src/content/learn/thinking-in-react.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/thinking-in-react.md b/src/content/learn/thinking-in-react.md index ba3f4ccb6..2b0b11385 100644 --- a/src/content/learn/thinking-in-react.md +++ b/src/content/learn/thinking-in-react.md @@ -222,7 +222,7 @@ Quale di questi può essere state? Identifica quelli che non lo sono: * **Rimane invariato** nel tempo? Allora non è state. * Viene **passato da un componente genitore** tramite props? Allora non è state. -* **Puoi calcolarlo** basandoti su uno state diverso o da props nel tuo componente? Allora **sicuramente non é** state! +* **Puoi calcolarlo** basandoti su uno state diverso o da props nel tuo componente? Allora **sicuramente** non è state! Quello che è rimane probabilmente può considerarsi state. From 7dfed6e20411d683827f8d6abe20b672be4814b1 Mon Sep 17 00:00:00 2001 From: Samuele Piazzesi <38422754+SamuelePiazzesi@users.noreply.github.com> Date: Wed, 26 Apr 2023 08:52:15 +0200 Subject: [PATCH 16/26] Update src/content/learn/thinking-in-react.md Co-authored-by: Mattia Sanfilippo --- src/content/learn/thinking-in-react.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/thinking-in-react.md b/src/content/learn/thinking-in-react.md index 2b0b11385..15032eb3b 100644 --- a/src/content/learn/thinking-in-react.md +++ b/src/content/learn/thinking-in-react.md @@ -224,7 +224,7 @@ Quale di questi può essere state? Identifica quelli che non lo sono: * Viene **passato da un componente genitore** tramite props? Allora non è state. * **Puoi calcolarlo** basandoti su uno state diverso o da props nel tuo componente? Allora **sicuramente** non è state! -Quello che è rimane probabilmente può considerarsi state. +Quello che è rimasto probabilmente può considerarsi state. Analizziamo di nuovo questi dati uno alla volta: From b9dc35057a7e2ce3f677fb9ac059fc8d7d2654d9 Mon Sep 17 00:00:00 2001 From: Samuele Piazzesi <38422754+SamuelePiazzesi@users.noreply.github.com> Date: Wed, 26 Apr 2023 08:52:36 +0200 Subject: [PATCH 17/26] Update src/content/learn/thinking-in-react.md Co-authored-by: Mattia Sanfilippo --- src/content/learn/thinking-in-react.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/thinking-in-react.md b/src/content/learn/thinking-in-react.md index 15032eb3b..4386f90fe 100644 --- a/src/content/learn/thinking-in-react.md +++ b/src/content/learn/thinking-in-react.md @@ -228,7 +228,7 @@ Quello che è rimasto probabilmente può considerarsi state. Analizziamo di nuovo questi dati uno alla volta: -1. la lista originale di prodotti è **passata in via props, quindi non è state.** +1. La lista originale di prodotti è **passata tramite props, quindi non è state.** 2. Il testo di ricerca sembra essere state visto che cambia nel tempo e non può essere ricavato da nulla. 3. Il valore della checkbox sembra essere state visto che cambia nel tempo e non può essere ricavato da nulla. 4. La lista filtrata dei prodotti **non è state perchè può essere calcolata** prendendo la lista originale dei prodotti e filtrandola in base al testo di ricerca e al valore della checkbox. From 1b7e6443735d8fc7c5e9216a81ffb4f88c8b329f Mon Sep 17 00:00:00 2001 From: Samuele Piazzesi <38422754+SamuelePiazzesi@users.noreply.github.com> Date: Wed, 26 Apr 2023 08:52:53 +0200 Subject: [PATCH 18/26] Update src/content/learn/thinking-in-react.md Co-authored-by: Mattia Sanfilippo --- src/content/learn/thinking-in-react.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/thinking-in-react.md b/src/content/learn/thinking-in-react.md index 4386f90fe..a2194de2b 100644 --- a/src/content/learn/thinking-in-react.md +++ b/src/content/learn/thinking-in-react.md @@ -229,7 +229,7 @@ Quello che è rimasto probabilmente può considerarsi state. Analizziamo di nuovo questi dati uno alla volta: 1. La lista originale di prodotti è **passata tramite props, quindi non è state.** -2. Il testo di ricerca sembra essere state visto che cambia nel tempo e non può essere ricavato da nulla. +2. Il testo di ricerca sembra essere state visto che cambia nel tempo e non può essere ricavato dal nulla. 3. Il valore della checkbox sembra essere state visto che cambia nel tempo e non può essere ricavato da nulla. 4. La lista filtrata dei prodotti **non è state perchè può essere calcolata** prendendo la lista originale dei prodotti e filtrandola in base al testo di ricerca e al valore della checkbox. From fa284a1948b8668c7e2fae8478f3f1b0f8172794 Mon Sep 17 00:00:00 2001 From: Samuele Piazzesi <38422754+SamuelePiazzesi@users.noreply.github.com> Date: Wed, 26 Apr 2023 08:53:08 +0200 Subject: [PATCH 19/26] Update src/content/learn/thinking-in-react.md Co-authored-by: Mattia Sanfilippo --- src/content/learn/thinking-in-react.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/thinking-in-react.md b/src/content/learn/thinking-in-react.md index a2194de2b..83b48b556 100644 --- a/src/content/learn/thinking-in-react.md +++ b/src/content/learn/thinking-in-react.md @@ -230,7 +230,7 @@ Analizziamo di nuovo questi dati uno alla volta: 1. La lista originale di prodotti è **passata tramite props, quindi non è state.** 2. Il testo di ricerca sembra essere state visto che cambia nel tempo e non può essere ricavato dal nulla. -3. Il valore della checkbox sembra essere state visto che cambia nel tempo e non può essere ricavato da nulla. +3. Il valore della checkbox sembra essere state visto che cambia nel tempo e non può essere ricavato dal nulla. 4. La lista filtrata dei prodotti **non è state perchè può essere calcolata** prendendo la lista originale dei prodotti e filtrandola in base al testo di ricerca e al valore della checkbox. Quindi significa che solo il testo di ricerca e il valore della checkbox sono state! Bene fatto! From 9ab4576fcd820a1bf67f10f2a60dd6e80a7f45a3 Mon Sep 17 00:00:00 2001 From: Samuele Piazzesi <38422754+SamuelePiazzesi@users.noreply.github.com> Date: Wed, 26 Apr 2023 08:53:26 +0200 Subject: [PATCH 20/26] Update src/content/learn/thinking-in-react.md Co-authored-by: Mattia Sanfilippo --- src/content/learn/thinking-in-react.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/thinking-in-react.md b/src/content/learn/thinking-in-react.md index 83b48b556..daf7d65b0 100644 --- a/src/content/learn/thinking-in-react.md +++ b/src/content/learn/thinking-in-react.md @@ -233,7 +233,7 @@ Analizziamo di nuovo questi dati uno alla volta: 3. Il valore della checkbox sembra essere state visto che cambia nel tempo e non può essere ricavato dal nulla. 4. La lista filtrata dei prodotti **non è state perchè può essere calcolata** prendendo la lista originale dei prodotti e filtrandola in base al testo di ricerca e al valore della checkbox. -Quindi significa che solo il testo di ricerca e il valore della checkbox sono state! Bene fatto! +Questo significa che solo il testo di ricerca e il valore della checkbox sono state! Ben fatto! From 6b7486e164200846c99a9b99b28392ee6bee3519 Mon Sep 17 00:00:00 2001 From: Samuele Piazzesi <38422754+SamuelePiazzesi@users.noreply.github.com> Date: Wed, 26 Apr 2023 08:53:42 +0200 Subject: [PATCH 21/26] Update src/content/learn/thinking-in-react.md Co-authored-by: Mattia Sanfilippo --- src/content/learn/thinking-in-react.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/thinking-in-react.md b/src/content/learn/thinking-in-react.md index daf7d65b0..6ccd28e29 100644 --- a/src/content/learn/thinking-in-react.md +++ b/src/content/learn/thinking-in-react.md @@ -239,7 +239,7 @@ Questo significa che solo il testo di ricerca e il valore della checkbox sono st #### Props vs State {/*props-vs-state*/} -Esistono due tipi di "modelli" di dati in React: props e state. Sono molto diversi tra di loro +Esistono due tipi di "modelli" di dati in React: props e state. Sono molto diversi tra di loro: * [Le **Props** sono come argomenti che passi](/learn/passing-props-to-a-component) ad una funzione. Permettono a un componente genitore di passare dei dati ad un componente figlio e di personalizzarne l'aspetto. Per esempio, un `Form` può passare una prop `color` ad un `Button`. * [**Lo State** è come se fosse la memoria di un componente.](/learn/state-a-components-memory) Permette a un componente di tenere traccia di alcune informazioni e modificarle in risposta ad interazioni. Per esempio, un `Button` potrebbe tenere traccia dello state `isHovered`. From 1b2c3a94bcfaf8a2ac0c4f3f919a596aa567689b Mon Sep 17 00:00:00 2001 From: Samuele Piazzesi <38422754+SamuelePiazzesi@users.noreply.github.com> Date: Wed, 26 Apr 2023 08:54:01 +0200 Subject: [PATCH 22/26] Update src/content/learn/thinking-in-react.md Co-authored-by: Mattia Sanfilippo --- src/content/learn/thinking-in-react.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/thinking-in-react.md b/src/content/learn/thinking-in-react.md index 6ccd28e29..8344bc219 100644 --- a/src/content/learn/thinking-in-react.md +++ b/src/content/learn/thinking-in-react.md @@ -273,7 +273,7 @@ Adesso eseguiamo la nostra strategia per essi: Quindi i valori di state vivranno in `FilterableProductTable`. -Aggiungi lo state al componente con l'[`useState()` Hook.](/reference/react/useState) Gli Hooks sono funzioni speciali che ti permettono di "collegarti" a React. Aggiungi due variabili state all'inizio di `FilterableProductTable` e specifica il loro stato iniziale: +Aggiungi lo state al componente con l'[Hook `useState()`.](/reference/react/useState) Gli Hooks sono funzioni speciali che ti permettono di "collegarti" a React. Aggiungi due variabili state all'inizio di `FilterableProductTable` e specifica il loro stato iniziale: ```js function FilterableProductTable({ products }) { From 944998a4efe219a03c33ea1f9ea23ff302a43687 Mon Sep 17 00:00:00 2001 From: Samuele Piazzesi <38422754+SamuelePiazzesi@users.noreply.github.com> Date: Wed, 26 Apr 2023 08:54:22 +0200 Subject: [PATCH 23/26] Update src/content/learn/thinking-in-react.md Co-authored-by: Mattia Sanfilippo --- src/content/learn/thinking-in-react.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/learn/thinking-in-react.md b/src/content/learn/thinking-in-react.md index 8344bc219..597065c30 100644 --- a/src/content/learn/thinking-in-react.md +++ b/src/content/learn/thinking-in-react.md @@ -241,7 +241,7 @@ Questo significa che solo il testo di ricerca e il valore della checkbox sono st Esistono due tipi di "modelli" di dati in React: props e state. Sono molto diversi tra di loro: -* [Le **Props** sono come argomenti che passi](/learn/passing-props-to-a-component) ad una funzione. Permettono a un componente genitore di passare dei dati ad un componente figlio e di personalizzarne l'aspetto. Per esempio, un `Form` può passare una prop `color` ad un `Button`. +* [Le **Props** sono come argomenti che passi](/learn/passing-props-to-a-component) ad una funzione. Permettono ad un componente genitore di passare dei dati ad un componente figlio e di personalizzarne l'aspetto. Per esempio, un `Form` può passare una prop `color` ad un `Button`. * [**Lo State** è come se fosse la memoria di un componente.](/learn/state-a-components-memory) Permette a un componente di tenere traccia di alcune informazioni e modificarle in risposta ad interazioni. Per esempio, un `Button` potrebbe tenere traccia dello state `isHovered`. Props e state sono diversi, ma lavorano insieme. Un componente genitore terrà spesso alcune informazioni nello state (in modo che possa modificarle) e *passarle* ai componenti figlio come props. È normale se questa differenza ti sembra ancora un po' confusa alla prima lettura. Ci vuole un po' di pratica per farla rimanere impressa! From 3188d47468c5bc38dbfe15b908743d3ea7259ee3 Mon Sep 17 00:00:00 2001 From: Alessandro De Blasis Date: Wed, 26 Apr 2023 11:15:38 +0100 Subject: [PATCH 24/26] chore(thinking-in-react): updated references as well --- .../blog/2023/03/16/introducing-react-dev.md | 74 +++++++++---------- .../learn/sharing-state-between-components.md | 6 +- src/content/learn/tutorial-tic-tac-toe.md | 8 +- .../learn/you-might-not-need-an-effect.md | 2 +- src/sidebarLearn.json | 4 +- 5 files changed, 47 insertions(+), 47 deletions(-) diff --git a/src/content/blog/2023/03/16/introducing-react-dev.md b/src/content/blog/2023/03/16/introducing-react-dev.md index d27673d90..e19da96eb 100644 --- a/src/content/blog/2023/03/16/introducing-react-dev.md +++ b/src/content/blog/2023/03/16/introducing-react-dev.md @@ -222,7 +222,7 @@ body { -We'd also like to highlight [Thinking in React](/learn/thinking-in-react)—that's the tutorial that made React "click" for many of us. **We've updated both of these classic tutorials to use function components and Hooks,** so they're as good as new. +We'd also like to highlight [Pensare in React](/learn/thinking-in-react)—that's the tutorial that made React "click" for many of us. **We've updated both of these classic tutorials to use function components and Hooks,** so they're as good as new. @@ -276,17 +276,17 @@ export default function PackingList() {

Sally Ride's Packing List

    - - -
@@ -314,17 +314,17 @@ export default function PackingList() {

Sally Ride's Packing List

    - - -
@@ -362,17 +362,17 @@ export default function PackingList() {

Sally Ride's Packing List

    - - -
@@ -406,17 +406,17 @@ export default function PackingList() {

Sally Ride's Packing List

    - - -
diff --git a/src/content/learn/sharing-state-between-components.md b/src/content/learn/sharing-state-between-components.md index 149164fe1..1b6891bd5 100644 --- a/src/content/learn/sharing-state-between-components.md +++ b/src/content/learn/sharing-state-between-components.md @@ -308,7 +308,7 @@ In a React application, many components will have their own state. Some state ma Your app will change as you work on it. It is common that you will move state down or back up while you're still figuring out where each piece of the state "lives". This is all part of the process! -To see what this feels like in practice with a few more components, read [Thinking in React.](/learn/thinking-in-react) +To see what this feels like in practice with a few more components, read [Pensare in React.](/learn/thinking-in-react) @@ -323,7 +323,7 @@ To see what this feels like in practice with a few more components, read [Thinki #### Synced inputs {/*synced-inputs*/} -These two inputs are independent. Make them stay in sync: editing one input should update the other input with the same text, and vice versa. +These two inputs are independent. Make them stay in sync: editing one input should update the other input with the same text, and vice versa. @@ -571,7 +571,7 @@ function SearchBar({ query, onChange }) { function List({ items }) { return ( - + {items.map(food => ( diff --git a/src/content/learn/tutorial-tic-tac-toe.md b/src/content/learn/tutorial-tic-tac-toe.md index 28d997b04..9e41232e6 100644 --- a/src/content/learn/tutorial-tic-tac-toe.md +++ b/src/content/learn/tutorial-tic-tac-toe.md @@ -337,7 +337,7 @@ import './styles.css'; import App from './App'; ``` -Lines 1-5 brings all the necessary pieces together: +Lines 1-5 brings all the necessary pieces together: * React * React's library to talk to web browsers (React DOM) @@ -551,7 +551,7 @@ export default function Board() { } ``` -Note how unlike the browser `div`s, your own components `Board` and `Square` must start with a capital letter. +Note how unlike the browser `div`s, your own components `Board` and `Square` must start with a capital letter. Let's take a look: @@ -1094,7 +1094,7 @@ function Square({ value, onSquareClick }) { } ``` -Now you'll connect the `onSquareClick` prop to a function in the `Board` component that you'll name `handleClick`. To connect `onSquareClick` to `handleClick` you'll pass a function to the `onSquareClick` prop of the first `Square` component: +Now you'll connect the `onSquareClick` prop to a function in the `Board` component that you'll name `handleClick`. To connect `onSquareClick` to `handleClick` you'll pass a function to the `onSquareClick` prop of the first `Square` component: ```js {7} export default function Board() { @@ -2909,4 +2909,4 @@ If you have extra time or want to practice your new React skills, here are some 1. When someone wins, highlight the three squares that caused the win (and when no one wins, display a message about the result being a draw). 1. Display the location for each move in the format (row, col) in the move history list. -Throughout this tutorial, you've touched on React concepts including elements, components, props, and state. Now that you've seen how these concepts work when building a game, check out [Thinking in React](/learn/thinking-in-react) to see how the same React concepts work when build an app's UI. +Throughout this tutorial, you've touched on React concepts including elements, components, props, and state. Now that you've seen how these concepts work when building a game, check out [Pensare in React](/learn/thinking-in-react) to see how the same React concepts work when build an app's UI. diff --git a/src/content/learn/you-might-not-need-an-effect.md b/src/content/learn/you-might-not-need-an-effect.md index 05f053be2..fc2cf1197 100644 --- a/src/content/learn/you-might-not-need-an-effect.md +++ b/src/content/learn/you-might-not-need-an-effect.md @@ -60,7 +60,7 @@ function Form() { } ``` -**When something can be calculated from the existing props or state, [don't put it in state.](/learn/choosing-the-state-structure#avoid-redundant-state) Instead, calculate it during rendering.** This makes your code faster (you avoid the extra "cascading" updates), simpler (you remove some code), and less error-prone (you avoid bugs caused by different state variables getting out of sync with each other). If this approach feels new to you, [Thinking in React](/learn/thinking-in-react#step-3-find-the-minimal-but-complete-representation-of-ui-state) explains what should go into state. +**When something can be calculated from the existing props or state, [don't put it in state.](/learn/choosing-the-state-structure#avoid-redundant-state) Instead, calculate it during rendering.** This makes your code faster (you avoid the extra "cascading" updates), simpler (you remove some code), and less error-prone (you avoid bugs caused by different state variables getting out of sync with each other). If this approach feels new to you, [Pensare in React](/learn/thinking-in-react#step-3-find-the-minimal-but-complete-representation-of-ui-state) explains what should go into state. ### Caching expensive calculations {/*caching-expensive-calculations*/} diff --git a/src/sidebarLearn.json b/src/sidebarLearn.json index 89d5cffca..cb7a4c922 100644 --- a/src/sidebarLearn.json +++ b/src/sidebarLearn.json @@ -15,7 +15,7 @@ "path": "/learn/tutorial-tic-tac-toe" }, { - "title": "Thinking in React", + "title": "Pensare in React", "path": "/learn/thinking-in-react" } ] @@ -186,7 +186,7 @@ }, { "title": "Removing Effect Dependencies", - "path": "/learn/removing-effect-dependencies" + "path": "/learn/removing-effect-dependencies" }, { "title": "Reusing Logic with Custom Hooks", From 4e4f55d6749f0c84bcde623d04ddcd85368f6c05 Mon Sep 17 00:00:00 2001 From: Samuele Piazzesi <38422754+SamuelePiazzesi@users.noreply.github.com> Date: Wed, 26 Apr 2023 13:30:07 +0200 Subject: [PATCH 25/26] Update src/content/learn/thinking-in-react.md Co-authored-by: Alessandro De Blasis --- src/content/learn/thinking-in-react.md | 1 - 1 file changed, 1 deletion(-) diff --git a/src/content/learn/thinking-in-react.md b/src/content/learn/thinking-in-react.md index 597065c30..9fd42b627 100644 --- a/src/content/learn/thinking-in-react.md +++ b/src/content/learn/thinking-in-react.md @@ -483,7 +483,6 @@ function FilterableProductTable({ products }) { All'interno di `SearchBar`, aggiungi l'evento `onChange` e imposta lo state del genitore da esso: - ```js {5} Date: Wed, 26 Apr 2023 13:30:22 +0200 Subject: [PATCH 26/26] Update src/content/learn/thinking-in-react.md Co-authored-by: Alessandro De Blasis --- src/content/learn/thinking-in-react.md | 1 - 1 file changed, 1 deletion(-) diff --git a/src/content/learn/thinking-in-react.md b/src/content/learn/thinking-in-react.md index 9fd42b627..f4a0746a9 100644 --- a/src/content/learn/thinking-in-react.md +++ b/src/content/learn/thinking-in-react.md @@ -492,7 +492,6 @@ All'interno di `SearchBar`, aggiungi l'evento `onChange` e imposta lo state del ``` Adesso l'applicazione funziona completamente! -Now the application fully works!
{food.name}