diff --git a/src/components/Layout/Footer.tsx b/src/components/Layout/Footer.tsx index 3f033252d..acb004cdb 100644 --- a/src/components/Layout/Footer.tsx +++ b/src/components/Layout/Footer.tsx @@ -288,7 +288,7 @@ export function Footer() { Impara React - Quick Start + Avvio Rapido Installazione Descrivere la UI 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 e19da96eb..fc154e224 100644 --- a/src/content/blog/2023/03/16/introducing-react-dev.md +++ b/src/content/blog/2023/03/16/introducing-react-dev.md @@ -49,9 +49,9 @@ There are still a few rare class component use cases that do not yet have a Hook -## Quick start {/*quick-start*/} +## Avvio Rapido {/*quick-start*/} -The Learn section begins with the [Quick Start](/learn) page. It is a short introductory tour of React. It introduces the syntax for concepts like components, props, and state, but doesn't go into much detail on how to use them. +The Learn section begins with the [Avvio Rapido](/learn) page. It is a short introductory tour of React. It introduces the syntax for concepts like components, props, and state, but doesn't go into much detail on how to use them. If you like to learn by doing, we recommend checking out the [Tic-Tac-Toe Tutorial](/learn/tutorial-tic-tac-toe) next. It walks you through building a little game with React, while teaching the skills you'll use every day. Here's what you'll build: diff --git a/src/content/learn/index.md b/src/content/learn/index.md index b57655bc4..194de840f 100644 --- a/src/content/learn/index.md +++ b/src/content/learn/index.md @@ -1,29 +1,29 @@ --- -title: Quick Start +title: Avvio Rapido --- -Welcome to the React documentation! This page will give you an introduction to the 80% of React concepts that you will use on a daily basis. +Benvenuto nella documentazione di React! Questa pagina ti darà un'introduzione all'80% dei concetti React che userai quotidianamente. -- How to create and nest components -- How to add markup and styles -- How to display data -- How to render conditions and lists -- How to respond to events and update the screen -- How to share data between components +- Come creare e annidare componenti +- Come aggiungere markup e stili +- Come mostrare i dati +- Come renderizzare condizioni e liste +- Come rispondere a eventi e aggiornare lo schermo +- Come condividere dati tra componenti -## Creating and nesting components {/*components*/} +## Creare e annidare componenti {/*components*/} -React apps are made out of *components*. A component is a piece of the UI (user interface) that has its own logic and appearance. A component can be as small as a button, or as large as an entire page. +Le app React sono composte da *componenti*. Un componente è una parte di UI (interfaccia utente) che ha una propria logica e aspetto. Un componente può essere piccolo come un pulsante o grande come un'intera pagina. -React components are JavaScript functions that return markup: +I componenti React sono funzioni JavaScript che restituiscono markup: ```js function MyButton() { @@ -33,7 +33,7 @@ function MyButton() { } ``` -Now that you've declared `MyButton`, you can nest it into another component: +Ora che hai dichiarato `MyButton`, puoi annidarlo in un altro componente: ```js {5} export default function MyApp() { @@ -46,9 +46,9 @@ export default function MyApp() { } ``` -Notice that `` starts with a capital letter. That's how you know it's a React component. React component names must always start with a capital letter, while HTML tags must be lowercase. +Nota che `` inizia con una lettera maiuscola. È così che riconosci un componente React. I nomi dei componenti React devono sempre iniziare con una lettera maiuscola, mentre i tag HTML devono essere in minuscolo. -Have a look at the result: +Dai un'occhiata al risultato: @@ -73,13 +73,13 @@ export default function MyApp() { -The `export default` keywords specify the main component in the file. If you're not familiar with some piece of JavaScript syntax, [MDN](https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export) and [javascript.info](https://javascript.info/import-export) have great references. +Le parole chiave `export default` specificano il componente principale nel file. Se non sei familiare con alcune parti della sintassi JavaScript, [MDN](https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export) e [javascript.info](https://javascript.info/import-export) hanno ottimi riferimenti. -## Writing markup with JSX {/*writing-markup-with-jsx*/} +## Scrivere markup con JSX {/*writing-markup-with-jsx*/} -The markup syntax you've seen above is called *JSX*. It is optional, but most React projects use JSX for its convenience. All of the [tools we recommend for local development](/learn/installation) support JSX out of the box. +La sintassi del markup che hai visto sopra è chiamata *JSX*. È opzionale, ma la maggior parte dei progetti React utilizza JSX per comodità. Tutti gli [strumenti che consigliamo per lo sviluppo locale](/learn/installation) supportano JSX di default. -JSX is stricter than HTML. You have to close tags like `
`. Your component also can't return multiple JSX tags. You have to wrap them into a shared parent, like a `
...
` or an empty `<>...` wrapper: +JSX è più rigoroso rispetto a HTML. Devi chiudere i tag come `
`. Inoltre, il tuo componente non può restituire più tag JSX. Devi racchiuderli in un genitore condiviso, come un `
...
` o un wrapper vuoto `<>...`: ```js {3,6} function AboutPage() { @@ -92,30 +92,30 @@ function AboutPage() { } ``` -If you have a lot of HTML to port to JSX, you can use an [online converter.](https://transform.tools/html-to-jsx) +Se hai molto codice HTML da convertire in JSX, puoi usare un [convertitore online.](https://transform.tools/html-to-jsx) -## Adding styles {/*adding-styles*/} +## Aggiungere stili {/*adding-styles*/} -In React, you specify a CSS class with `className`. It works the same way as the HTML [`class`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class) attribute: +In React, specifichi una classe CSS con `className`. Funziona allo stesso modo dell'attributo HTML [`class`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class): ```js ``` -Then you write the CSS rules for it in a separate CSS file: +Quindi, scrivi le regole CSS per esso in un file CSS separato: ```css -/* In your CSS */ +/* Nel tuo CSS */ .avatar { border-radius: 50%; } ``` -React does not prescribe how you add CSS files. In the simplest case, you'll add a [``](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link) tag to your HTML. If you use a build tool or a framework, consult its documentation to learn how to add a CSS file to your project. +React non stabilisce come aggiungi i file CSS. Nel caso più semplice, aggiungerai un tag [``](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link) al tuo HTML. Se utilizzi uno strumento di compilazione o un framework, consulta la relativa documentazione per imparare come aggiungere un file CSS al tuo progetto. -## Displaying data {/*displaying-data*/} +## Mostrare dati {/*displaying-data*/} -JSX lets you put markup into JavaScript. Curly braces let you "escape back" into JavaScript so that you can embed some variable from your code and display it to the user. For example, this will display `user.name`: +JSX ti permette di inserire markup in JavaScript. Le parentesi graffe ti permettono di "tornare" a JavaScript, in modo da poter incorporare qualche variabile dal tuo codice e mostrarla all'utente. Ad esempio, questo mostrerà `user.name`: ```js {3} return ( @@ -125,7 +125,7 @@ return ( ); ``` -You can also "escape into JavaScript" from JSX attributes, but you have to use curly braces *instead of* quotes. For example, `className="avatar"` passes the `"avatar"` string as the CSS class, but `src={user.imageUrl}` reads the JavaScript `user.imageUrl` variable value, and then passes that value as the `src` attribute: +Puoi anche "tornare a JavaScript" dagli attributi JSX, ma devi usare le parentesi graffe *invece* delle virgolette. Ad esempio, `className="avatar"` passa la stringa `"avatar"` come classe CSS, ma `src={user.imageUrl}` legge il valore della variabile JavaScript `user.imageUrl` e poi passa questo come attributo `src`: ```js {3,4} return ( @@ -136,7 +136,7 @@ return ( ); ``` -You can put more complex expressions inside the JSX curly braces too, for example, [string concatenation](https://javascript.info/operators#string-concatenation-with-binary): +Puoi anche inserire espressioni più complesse all'interno delle parentesi graffe JSX, come ad esempio la [concatenazione di stringhe](https://javascript.info/operators#string-concatenation-with-binary): @@ -177,11 +177,11 @@ export default function Profile() { -In the above example, `style={{}}` is not a special syntax, but a regular `{}` object inside the `style={ }` JSX curly braces. You can use the `style` attribute when your styles depend on JavaScript variables. +Nell'esempio precedente, `style={{}}` non è una sintassi speciale, ma un normale oggetto `{}` all'interno delle parentesi graffe JSX `style={ }`. Puoi usare l'attributo `style` quando i tuoi stili dipendono da variabili JavaScript. -## Conditional rendering {/*conditional-rendering*/} +## Rendering condizionale {/*conditional-rendering*/} -In React, there is no special syntax for writing conditions. Instead, you'll use the same techniques as you use when writing regular JavaScript code. For example, you can use an [`if`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else) statement to conditionally include JSX: +In React, non esiste una sintassi speciale per scrivere condizioni. Invece, utilizzerai le stesse tecniche che usi quando scrivi normale codice JavaScript. Ad esempio, puoi usare un'istruzione [`if`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/if...else) per includere JSX in modo condizionale. ```js let content; @@ -197,7 +197,7 @@ return ( ); ``` -If you prefer more compact code, you can use the [conditional `?` operator.](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) Unlike `if`, it works inside JSX: +Se preferisci un codice più compatto, puoi usare l'[operatore condizionale `?`.](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator) A differenza di `if`, esso funziona all'interno di JSX. ```js
@@ -209,7 +209,7 @@ If you prefer more compact code, you can use the [conditional `?` operator.](htt
``` -When you don't need the `else` branch, you can also use a shorter [logical `&&` syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND#short-circuit_evaluation): +Quando non hai bisogno del ramo `else`, puoi anche usare una [sintassi logica `&&`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND#short-circuit_evaluation) più breve: ```js
@@ -217,13 +217,13 @@ When you don't need the `else` branch, you can also use a shorter [logical `&&`
``` -All of these approaches also work for conditionally specifying attributes. If you're unfamiliar with some of this JavaScript syntax, you can start by always using `if...else`. +Tutti questi approcci funzionano anche per specificare in modo condizionale gli attributi. Se non hai familiarità con alcune di queste sintassi JavaScript, puoi iniziare ad usare sempre `if...else`. -## Rendering lists {/*rendering-lists*/} +## Renderizzare liste {/*rendering-lists*/} -You will rely on JavaScript features like [`for` loop](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for) and the [array `map()` function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) to render lists of components. +Farai affidamento su funzionalità JavaScript come i [cicli `for`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for) e la [funzione array `map()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) per renderizzare liste di componenti. -For example, let's say you have an array of products: +Ad esempio, supponiamo che tu abbia un array di prodotti: ```js const products = [ @@ -233,7 +233,7 @@ const products = [ ]; ``` -Inside your component, use the `map()` function to transform an array of products into an array of `
  • ` items: +All'interno del tuo componente, usa la funzione `map()` per trasformare un array di prodotti in un array di elementi `
  • `: ```js const listItems = products.map(product => @@ -247,7 +247,7 @@ return ( ); ``` -Notice how `
  • ` has a `key` attribute. For each item in a list, you should pass a string or a number that uniquely identifies that item among its siblings. Usually, a key should be coming from your data, such as a database ID. React uses your keys to know what happened if you later insert, delete, or reorder the items. +Nota come `
  • ` ha un attributo `key`. Per ogni elemento nella lista, dovresti passare una stringa o un numero che identifichi univocamente quell'oggetto tra i suoi "fratelli". Di solito, una chiave dovrebbe provenire dai tuoi dati, come un ID del database. React utilizza le tue chiavi per sapere cosa è successo se successivamente inserisci, elimini o riordini gli elementi. @@ -278,9 +278,9 @@ export default function ShoppingList() { -## Responding to events {/*responding-to-events*/} +## Rispondere agli eventi {/*responding-to-events*/} -You can respond to events by declaring *event handler* functions inside your components: +Puoi rispondere agli eventi dichiarando funzioni **event handler** all'interno dei tuoi componenti: ```js {2-4,7} function MyButton() { @@ -296,19 +296,19 @@ function MyButton() { } ``` -Notice how `onClick={handleClick}` has no parentheses at the end! Do not _call_ the event handler function: you only need to *pass it down*. React will call your event handler when the user clicks the button. +Nota come `onClick={handleClick}` non ha parentesi alla fine! Non _chiamare_ la funzione event handler: hai solo bisogno di *passarla*. React chiamerà il tuo event handler quando l'utente cliccherà sul pulsante. -## Updating the screen {/*updating-the-screen*/} +## Aggiornare lo schermo {/*updating-the-screen*/} -Often, you'll want your component to "remember" some information and display it. For example, maybe you want to count the number of times a button is clicked. To do this, add *state* to your component. +Spesso vorrai che il tuo componente "ricordi" alcune informazioni e le mostri. Ad esempio, potresti voler contare il numero di volte in cui viene fatto clic su un pulsante. Per fare ciò, aggiungi **state** al tuo componente. -First, import [`useState`](/reference/react/useState) from React: +Per prima cosa, importa [`useState`](/reference/react/useState) da React: ```js import { useState } from 'react'; ``` -Now you can declare a *state variable* inside your component: +Ora puoi dichiarare una *variabile state* all'interno del tuo componente: ```js function MyButton() { @@ -316,9 +316,9 @@ function MyButton() { // ... ``` -You’ll get two things from `useState`: the current state (`count`), and the function that lets you update it (`setCount`). You can give them any names, but the convention is to write `[something, setSomething]`. +Otterrai due cose da `useState`: lo state attuale (`count`) e la funzione ti consente di aggiornarlo (`setCount`). Puoi dare loro qualsiasi nome, ma la convenzione è scrivere `[something, setSomething]`. -The first time the button is displayed, `count` will be `0` because you passed `0` to `useState()`. When you want to change state, call `setCount()` and pass the new value to it. Clicking this button will increment the counter: +La prima volta che il pulsante verrà mostrato, `count` sarà `0` perché hai passato `0` a `useState()`. Quando vuoi cambiare lo state, chiama `setCount()` e passagli il nuovo valore. Cliccando su questo pulsante, il contatore incrementerà: ```js {5} function MyButton() { @@ -336,9 +336,9 @@ function MyButton() { } ``` -React will call your component function again. This time, `count` will be `1`. Then it will be `2`. And so on. +React chiamerà di nuovo la tua funzione componente. Questa volta, `count` sarà `1`. Poi sarà `2`. E così via. -If you render the same component multiple times, each will get its own state. Click each button separately: +Se esegui il rendering dello stesso componente più volte, ognuno avrà il proprio state. Fai clic su ogni pulsante separatamente: @@ -379,59 +379,59 @@ button { -Notice how each button "remembers" its own `count` state and doesn't affect other buttons. +Nota come ogni pulsante "ricorda" il proprio state `count` e non influisce sugli altri pulsanti. -## Using Hooks {/*using-hooks*/} +## Usare gli Hooks {/*using-hooks*/} -Functions starting with `use` are called *Hooks*. `useState` is a built-in Hook provided by React. You can find other built-in Hooks in the [API reference.](/reference/react) You can also write your own Hooks by combining the existing ones. +Le funzioni che iniziano con `use` sono chiamate *Hook*. `useState` è un Hook incorporato fornito da React. Puoi trovare altri Hook incorporati nel [riferimento API.](/reference/react) Puoi anche scrivere i tuoi Hook combinando quelli esistenti. -Hooks are more restrictive than other functions. You can only call Hooks *at the top* of your components (or other Hooks). If you want to use `useState` in a condition or a loop, extract a new component and put it there. +Gli Hook sono più restrittivi rispetto ad altre funzioni. Puoi chiamare gli Hook solo *in cima* ai tuoi componenti (o altri Hook). Se vuoi utilizzare `useState` in una condizione o un ciclo, estrai un nuovo componente e inseriscilo lì. -## Sharing data between components {/*sharing-data-between-components*/} +## Condividere dati tra componenti {/*sharing-data-between-components*/} -In the previous example, each `MyButton` had its own independent `count`, and when each button was clicked, only the `count` for the button clicked changed: +Nell'esempio precedente, ogni `MyButton` aveva il proprio e indipendente `count`, e quando si faceva clic su ciascun pulsante, cambiava solo il `count` relativo al pulsante cliccato: -Initially, each `MyButton`'s `count` state is `0` +Inizialmente, lo state `count` di ogni `MyButton` è `0` -The first `MyButton` updates its `count` to `1` +Il primo `MyButton` aggiorna il suo `count` a `1` -However, often you'll need components to *share data and always update together*. +Tuttavia, spesso avrai bisogno di componenti per *condividere dati e aggiornarli sempre insieme*. -To make both `MyButton` components display the same `count` and update together, you need to move the state from the individual buttons "upwards" to the closest component containing all of them. +Per fare in modo che entrambi i componenti `MyButton` mostrino lo stesso `count` e si aggiornino insieme, è necessario spostare lo state dai singoli pulsanti "verso l'alto" al componente più vicino che li contiene tutti. -In this example, it is `MyApp`: +In questo esempio, è `MyApp`: -Initially, `MyApp`'s `count` state is `0` and is passed down to both children +Inizialmente, lo state `count` di `MyApp` è `0` e viene trasmesso ad entrambi i figli. -On click, `MyApp` updates its `count` state to `1` and passes it down to both children +Al click, `MyApp` aggiorna il suo state `count` a `1` e lo trasmette ad entrambi i figli. -Now when you click either button, the `count` in `MyApp` will change, which will change both of the counts in `MyButton`. Here's how you can express this in code. +Ora quando fai click su uno dei due pulsanti, il `count` in `MyApp` cambierà, il quale cambierà entrambi i contatori in `MyButton`. Ecco come puoi esprimerlo nel codice. -First, *move the state up* from `MyButton` into `MyApp`: +Per prima cosa, *sposta lo state in alto* da `MyButton` a `MyApp`: ```js {2-6,18} export default function MyApp() { @@ -451,12 +451,12 @@ export default function MyApp() { } function MyButton() { - // ... we're moving code from here ... + // ... stiamo spostando il codice da qui ... } ``` -Then, *pass the state down* from `MyApp` to each `MyButton`, together with the shared click handler. You can pass information to `MyButton` using the JSX curly braces, just like you previously did with built-in tags like ``: +Quindi, *passa lo state* da `MyApp` a ciascun `MyButton`, insieme al click handler condiviso. Puoi passare informazioni a `MyButton` usando le parentesi graffe JSX, proprio come hai fatto in precedenza con tag incorporati come ``: ```js {11-12} export default function MyApp() { @@ -476,9 +476,9 @@ export default function MyApp() { } ``` -The information you pass down like this is called _props_. Now the `MyApp` component contains the `count` state and the `handleClick` event handler, and *passes both of them down as props* to each of the buttons. +Le informazioni che trasmetti in questo modo si chiamano _props_. Ora il componente `MyApp` contiene lo state `count` e l'event handler `handleClick`, e *passa entrambi come props* a ciascun pulsante. -Finally, change `MyButton` to *read* the props you have passed from its parent component: +Infine, modifica `MyButton` per *leggere* le props che hai passato dal suo componente genitore: ```js {1,3} function MyButton({ count, onClick }) { @@ -490,7 +490,7 @@ function MyButton({ count, onClick }) { } ``` -When you click the button, the `onClick` handler fires. Each button's `onClick` prop was set to the `handleClick` function inside `MyApp`, so the code inside of it runs. That code calls `setCount(count + 1)`, incrementing the `count` state variable. The new `count` value is passed as a prop to each button, so they all show the new value. This is called "lifting state up". By moving state up, you've shared it between components. +Quando fai click sul pulsante, viene attivato l'handler `onClick`. La prop `onClick` di ciascun pulsante è stata impostata sulla funzione `handleClick` all'interno di `MyApp`, quindi il codice al suo interno viene eseguito. Quel codice chiama `setCount(count + 1)`, incrementando la variabile state `count`. Il nuovo valore di `count` viene passato come prop a ciascun pulsante, quindi tutti mostrano il nuovo valore. Questo viene chiamato "sollevamento dello state". Sollevando lo state, lo hai condiviso tra i componenti. @@ -531,8 +531,8 @@ button { -## Next Steps {/*next-steps*/} +## Prossimi Passi {/*next-steps*/} -By now, you know the basics of how to write React code! +Ormai conosci le basi su come scrivere codice React! -Check out the [Tutorial](/learn/tutorial-tic-tac-toe) to put them into practice and build your first mini-app with React. +Dai un'occhiata al [Tutorial](/learn/tutorial-tic-tac-toe) per metterle in pratica e creare la tua prima mini-app con React. diff --git a/src/content/learn/thinking-in-react.md b/src/content/learn/thinking-in-react.md index f4a0746a9..f0c7e656e 100644 --- a/src/content/learn/thinking-in-react.md +++ b/src/content/learn/thinking-in-react.md @@ -195,7 +195,7 @@ td { -(Se questo codice ti spaventa, leggi prima il [Quick Start](/learn/)!) +(Se questo codice ti spaventa, leggi prima l'[Avvio Rapido](/learn/)!) 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. diff --git a/src/sidebarHome.json b/src/sidebarHome.json index 4509c26fc..b77bc98be 100644 --- a/src/sidebarHome.json +++ b/src/sidebarHome.json @@ -7,7 +7,7 @@ "sectionHeader": "GET STARTED" }, { - "title": "Quick Start", + "title": "Avvio Rapido", "path": "/learn" }, { diff --git a/src/sidebarLearn.json b/src/sidebarLearn.json index ca75cd663..036cd5de1 100644 --- a/src/sidebarLearn.json +++ b/src/sidebarLearn.json @@ -7,7 +7,7 @@ "sectionHeader": "GET STARTED" }, { - "title": "Quick Start", + "title": "Avvio Rapido", "path": "/learn", "routes": [ {