My First Component
+Il mio primo componente
-
-
- Components: UI Building Blocks -
- Defining a Component -
- Using a Component +
- Componenti: i mattoni con cui costruire una UI +
- Definire un componente +
- Usare un componente
`, and an (abbreviated) table of contents as an ordered list ``. Markup like this, combined with CSS for style, and JavaScript for interactivity, lies behind every sidebar, avatar, modal, dropdown—every piece of UI you see on the Web.
+Questo markup (la struttura logica di una pagina web) rappresenta questo articolo ``, il suo titolo `` e un indice (abbreviato) come una lista ordinata ``. Un markup come questo, combinato con il codice CSS per lo stile e con JavaScript per l'interattività, è alla base di ogni barra laterale, avatar, modale, dropdown - ogni pezzo di interfaccia utente che si vede sul Web.
-React lets you combine your markup, CSS, and JavaScript into custom "components", **reusable UI elements for your app.** The table of contents code you saw above could be turned into a ``, ``, etc.
+React consente di combinare markup, CSS e JavaScript in "componenti" personalizzati, **elementi dell'interfaccia utente riutilizzabili per la tua applicazione.** Il codice dell'indice che hai visto sopra potrebbe essere trasformato in un componente ``, ``, ecc.
-Just like with HTML tags, you can compose, order and nest components to design whole pages. For example, the documentation page you're reading is made out of React components:
+Proprio come con i tag HTML, è possibile comporre, ordinare e annidare i componenti per progettare intere pagine. Ad esempio, la pagina di documentazione che stai leggendo è composta da componenti React:
```js
@@ -51,11 +51,11 @@ Just like with HTML tags, you can compose, order and nest components to design w
```
-As your project grows, you will notice that many of your designs can be composed by reusing components you already wrote, speeding up your development. Our table of contents above could be added to any screen with `
@@ -76,33 +76,33 @@ img { height: 200px; }
-And here's how to build a component:
+Ed ecco come costruire un componente:
-### Step 1: Export the component {/*step-1-export-the-component*/}
+### Step 1: Esportare il componente {/*step-1-export-the-component*/}
-The `export default` prefix is a [standard JavaScript syntax](https://developer.mozilla.org/docs/web/javascript/reference/statements/export) (not specific to React). It lets you mark the main function in a file so that you can later import it from other files. (More on importing in [Importing and Exporting Components](/learn/importing-and-exporting-components)!)
+Il prefisso `export default` è una [sintassi JavaScript standard](https://developer.mozilla.org/docs/web/javascript/reference/statements/export) (non specifica a React). Consente di contrassegnare la funzione principale di un file in modo da poterla importare successivamente in altri file. (Maggiori informazioni sull'importazione in [Importazione ed esportazione di componenti](/learning/importing-and-exporting-components))!
-### Step 2: Define the function {/*step-2-define-the-function*/}
+### Step 2: Definire la funzione {/*step-2-define-the-function*/}
-With `function Profile() { }` you define a JavaScript function with the name `Profile`.
+Con `function Profile() { }` si definisce una funzione JavaScript con il nome `Profile`.
-React components are regular JavaScript functions, but **their names must start with a capital letter** or they won't work!
+I componenti React sono normali funzioni JavaScript, ma **il loro nome deve iniziare con una lettera maiuscola** o non funzionano!
-### Step 3: Add markup {/*step-3-add-markup*/}
+### Step 3: Aggiungere il markup {/*step-3-add-markup*/}
-The component returns an `![]()
` tag with `src` and `alt` attributes. `![]()
` is written like HTML, but it is actually JavaScript under the hood! This syntax is called [JSX](/learn/writing-markup-with-jsx), and it lets you embed markup inside JavaScript.
+Il componente ritorna un tag `![]()
` con gli attributi `src` e `alt`. `![]()
` è scritto come fosse HTML, ma in realtà si tratta di codice JavaScript sotto il cofano! Questa sintassi si chiama [JSX](/learn/writing-markup-with-jsx) e consente di incorporare markup all'interno di JavaScript.
-Return statements can be written all on one line, as in this component:
+Le istruzioni di ritorno possono essere scritte tutte su una riga, come in questo componente:
```js
return 
;
```
-But if your markup isn't all on the same line as the `return` keyword, you must wrap it in a pair of parentheses:
+Ma se il tuo markup non si trova tutto sulla stessa riga della parola chiave `return`, è necessario racchiuderlo (_wrap_) in una coppia di parentesi tonde:
```js
return (
@@ -114,13 +114,13 @@ return (
-Without parentheses, any code on the lines after `return` [will be ignored](https://stackoverflow.com/questions/2846283/what-are-the-rules-for-javascripts-automatic-semicolon-insertion-asi)!
+Senza parentesi, qualsiasi riga di codice successiva alla riga contenente `return` [sarà ignorata](https://stackoverflow.com/questions/2846283/what-are-the-rules-for-javascripts-automatic-semicolon-insertion-asi)!
-## Using a component {/*using-a-component*/}
+## Usare un componente {/*using-a-component*/}
-Now that you've defined your `Profile` component, you can nest it inside other components. For example, you can export a `Gallery` component that uses multiple `Profile` components:
+Ora che è stato definito il componente `Profile`, è possibile annidarlo all'interno di altri componenti. Per esempio, si può esportare un componente `Gallery` che utilizza più componenti `Profile`:
@@ -137,7 +137,7 @@ function Profile() {
export default function Gallery() {
return (
- Amazing scientists
+ Scienziati incredibili
-### What the browser sees {/*what-the-browser-sees*/}
+### Cosa vede il browser {/*what-the-browser-sees*/}
-Notice the difference in casing:
+Nota la differenza tra il maiuscolo e il minuscolo:
-* `` is lowercase, so React knows we refer to an HTML tag.
-* `` è minuscolo, in modo che React sappia che ci riferiamo a un tag HTML.
+* `![]()
`. In the end, this is what the browser sees:
+E `Profile` contiene lui stesso altri tag HTML: `![]()
`. Alla fine, questo è ciò che vede il browser:
```html
- Amazing scientists
+ Scienziati incredibili
```
-### Nesting and organizing components {/*nesting-and-organizing-components*/}
+### Annidamento e organizzazione dei componenti {/*nesting-and-organizing-components*/}
-Components are regular JavaScript functions, so you can keep multiple components in the same file. This is convenient when components are relatively small or tightly related to each other. If this file gets crowded, you can always move `Profile` to a separate file. You will learn how to do this shortly on the [page about imports.](/learn/importing-and-exporting-components)
+I componenti sono normali funzioni JavaScript, quindi è possibile avere più componenti nello stesso file. Questo è comodo quando i componenti sono relativamente piccoli o strettamente correlati tra loro. Se questo file dovesse diventare troppo affollato, puoi sempre spostare `Profile` in un file separato. Imparerai come fare a breve nella [pagina sulle importazioni.](/learning/importing-and-exporting-components).
-Because the `Profile` components are rendered inside `Gallery`—even several times!—we can say that `Gallery` is a **parent component,** rendering each `Profile` as a "child". This is part of the magic of React: you can define a component once, and then use it in as many places and as many times as you like.
+Poiché i componenti `Profile` sono renderizzati all'interno di `Gallery` - anche più volte! - possiamo dire che `Gallery` è un **componente genitore,** che renderizza ogni `Profile` come un "figlio". Questa è una parte della magia di React: si può definire un componente una sola volta e poi usarlo in tutti i posti e tutte le volte che si vuole.
-Components can render other components, but **you must never nest their definitions:**
+I componenti possono renderizzare altri componenti, ma **non si devono mai annidare le loro definizioni:**
```js {2-5}
export default function Gallery() {
- // 🔴 Never define a component inside another component!
+ // 🔴 Non definire mai un componente all'interno di un altro componente!
function Profile() {
// ...
}
@@ -190,47 +190,47 @@ export default function Gallery() {
}
```
-The snippet above is [very slow and causes bugs.](/learn/preserving-and-resetting-state#different-components-at-the-same-position-reset-state) Instead, define every component at the top level:
+Il codice qui sopra è [molto lento e causa dei bug.](/learn/preserving-and-resetting-state#different-components-at-the-same-position-reset-state) Invece, definisci ogni componente al livello principale:
```js {5-8}
export default function Gallery() {
// ...
}
-// ✅ Declare components at the top level
+// ✅ Dichiara i componenti al livello principale
function Profile() {
// ...
}
```
-When a child component needs some data from a parent, [pass it by props](/learn/passing-props-to-a-component) instead of nesting definitions.
+Quando un componente figlio ha bisogno di alcuni dati da un genitore, [passaglieli tramite props](/learn/passing-props-to-a-component), invece di annidare le definizioni.
-#### Components all the way down {/*components-all-the-way-down*/}
+#### Componenti fino in fondo {/*components-all-the-way-down*/}
-Your React application begins at a "root" component. Usually, it is created automatically when you start a new project. For example, if you use [CodeSandbox](https://codesandbox.io/) or [Create React App](https://create-react-app.dev/), the root component is defined in `src/App.js`. If you use the framework [Next.js](https://nextjs.org/), the root component is defined in `pages/index.js`. In these examples, you've been exporting root components.
+La tua applicazione React inizia con un componente "radice" (_root_). Di solito, viene creato automaticamente quando si comincia un nuovo progetto. Ad esempio, se utilizzi [CodeSandbox](https://codesandbox.io/) o [Create React App](https://create-react-app.dev/), il componente radice è definito in `src/App.js`. Se usi il framework [Next.js](https://nextjs.org/), il componente radice è definito in `pages/index.js`. In questi esempi, abbiamo esportato il componente radice.
-Most React apps use components all the way down. This means that you won't only use components for reusable pieces like buttons, but also for larger pieces like sidebars, lists, and ultimately, complete pages! Components are a handy way to organize UI code and markup, even if some of them are only used once.
+La maggior parte delle applicazioni React utilizza i componenti fino in fondo. Ciò significa che non userai i componenti solo per piccole parti riutilizzabili come i pulsanti, ma anche per parti più grandi come barre laterali, elenchi e, infine, pagine complete! I componenti sono un modo pratico per organizzare il codice e il markup dell'interfaccia utente, anche se alcuni di essi dovessero essere utilizzati una sola volta.
-[React-based frameworks](/learn/start-a-new-react-project) take this a step further. Instead of using an empty HTML file and letting React "take over" managing the page with JavaScript, they *also* generate the HTML automatically from your React components. This allows your app to show some content before the JavaScript code loads.
+I [framework basati su React](/learn/start-a-new-react-project) compiono un ulteriore passo avanti. Invece di usare un file HTML vuoto e lasciare che React si occupi di gestire la pagina con JavaScript, generano automaticamente l'HTML dai componenti React. Questo permette all'applicazione di mostrare alcuni contenuti prima del caricamento del codice JavaScript.
-Still, many websites only use React to [add interactivity to existing HTML pages.](/learn/add-react-to-an-existing-project#using-react-for-a-part-of-your-existing-page) They have many root components instead of a single one for the entire page. You can use as much—or as little—React as you need.
+Tuttavia, molti siti web usano React solo per [aggiungere interattività a pagine HTML esistenti.](/learn/add-react-to-an-existing-project#using-react-for-a-part-of-your-existing-page) Hanno molti componenti radice invece di uno singolo per l'intera pagina. È possibile utilizzare tanto o poco React in base alle tue esigenze.
-You've just gotten your first taste of React! Let's recap some key points.
+Hai appena avuto il tuo primo assaggio di React! Riassumiamo alcuni punti chiave.
-* React lets you create components, **reusable UI elements for your app.**
-* In a React app, every piece of UI is a component.
-* React components are regular JavaScript functions except:
+* React consente di creare componenti, **elementi riutilizzabili dell'interfaccia utente per la tua applicazione.**
+* In un'applicazione React, ogni elemento dell'interfaccia utente è un componente.
+* I componenti React sono normali funzioni JavaScript, tranne che per il fatto che:
- 1. Their names always begin with a capital letter.
- 2. They return JSX markup.
+ 1. I loro nomi iniziano sempre con la lettera maiuscola.
+ 2. Ritornano markup JSX.
@@ -238,9 +238,9 @@ You've just gotten your first taste of React! Let's recap some key points.
-#### Export the component {/*export-the-component*/}
+#### Esporta il componente {/*export-the-component*/}
-This sandbox doesn't work because the root component is not exported:
+Questa sandbox non funziona perché il componente principale non viene esportato:
@@ -261,11 +261,11 @@ img { height: 181px; }
-Try to fix it yourself before looking at the solution!
+Cerca di risolvere il problema da solo/a prima di guardare alla soluzione!
-Add `export default` before the function definition like so:
+Aggiungi `export default` prima della definizione della funzione, in questo modo:
@@ -286,17 +286,17 @@ img { height: 181px; }
-You might be wondering why writing `export` alone is not enough to fix this example. You can learn the difference between `export` and `export default` in [Importing and Exporting Components.](/learn/importing-and-exporting-components)
+Ci si potrebbe chiedere perché scrivere `export` da solo non sia sufficiente a risolvere questo esempio. Si può imparare la differenza tra `export` e `export default` in [Importazione ed esportazione di componenti.](/learning/importing-and-exporting-components)
-#### Fix the return statement {/*fix-the-return-statement*/}
+#### Correggere l'istruzione di ritorno {/*fix-the-return-statement*/}
-Something isn't right about this `return` statement. Can you fix it?
+C'è qualcosa che non va in questa istruzione di ritorno. Si può risolvere?
-You may get an "Unexpected token" error while trying to fix this. In that case, check that the semicolon appears *after* the closing parenthesis. Leaving a semicolon inside `return ( )` will cause an error.
+Potresti ricevere un errore "Unexpected token" mentre cerchi di risolvere questo problema. In tal caso, verifica che il punto e virgola compaia *dopo* la parentesi di chiusura. Lasciare un punto e virgola all'interno di `return ( )` causerà un errore.
@@ -318,7 +318,7 @@ img { height: 180px; }
-You can fix this component by moving the return statement to one line like so:
+È possibile risolvere questo componente spostando l'istruzione di ritorno su una sola riga, in questo modo:
@@ -334,16 +334,16 @@ img { height: 180px; }
-Or by wrapping the returned JSX markup in parentheses that open right after `return`:
+Oppure racchiudendo il markup JSX restituito in una coppia di parentesi che si apre subito dopo `return`:
```js
export default function Profile() {
return (
- 
);
}
@@ -357,9 +357,9 @@ img { height: 180px; }
-#### Spot the mistake {/*spot-the-mistake*/}
+#### Trova l'errore {/*spot-the-mistake*/}
-Something's wrong with how the `Profile` component is declared and used. Can you spot the mistake? (Try to remember how React distinguishes components from the regular HTML tags!)
+C'è qualcosa di sbagliato nel modo in cui il componente `Profile` è definito e utilizzato. Riesci a individuare l'errore? (Cerca di ricordare come React distingue i componenti dai normali tag HTML).
@@ -376,7 +376,7 @@ function profile() {
export default function Gallery() {
return (
- Amazing scientists
+ Scienziati incredibili
-React component names must start with a capital letter.
+I nomi dei componenti React devono iniziare con una lettera maiuscola.
-Change `function profile()` to `function Profile()`, and then change every `
@@ -412,7 +412,7 @@ function Profile() {
export default function Gallery() {
return (
- Amazing scientists
+ Scienziati incredibili
-#### Your own component {/*your-own-component*/}
+#### Il tuo componente {/*your-own-component*/}
-Write a component from scratch. You can give it any valid name and return any markup. If you're out of ideas, you can write a `Congratulations` component that shows `Good job!
`. Don't forget to export it!
+Definisci un componente da zero. Puoi dargli qualsiasi nome valido e restituire qualsiasi markup. Se sei a corto di idee, si puoi definire un componente `Congratulations` che mostri `Buon lavoro!
`. Non dimenticate di esportarlo!
```js
-// Write your component below!
+// Definisci il tuo componente qui sotto!
```
diff --git a/src/sidebarLearn.json b/src/sidebarLearn.json
index 89d5cffca..27fa2bfaf 100644
--- a/src/sidebarLearn.json
+++ b/src/sidebarLearn.json
@@ -52,7 +52,7 @@
"path": "/learn/describing-the-ui",
"routes": [
{
- "title": "Your First Component",
+ "title": "Il Tuo Primo Componente",
"path": "/learn/your-first-component"
},
{
@@ -186,7 +186,7 @@
},
{
"title": "Removing Effect Dependencies",
- "path": "/learn/removing-effect-dependencies"
+ "path": "/learn/removing-effect-dependencies"
},
{
"title": "Reusing Logic with Custom Hooks",
` e un indice (abbreviato) come una lista ordinata ``. Un markup come questo, combinato con il codice CSS per lo stile e con JavaScript per l'interattività, è alla base di ogni barra laterale, avatar, modale, dropdown - ogni pezzo di interfaccia utente che si vede sul Web.
-React lets you combine your markup, CSS, and JavaScript into custom "components", **reusable UI elements for your app.** The table of contents code you saw above could be turned into a ``, ``, etc.
+React consente di combinare markup, CSS e JavaScript in "componenti" personalizzati, **elementi dell'interfaccia utente riutilizzabili per la tua applicazione.** Il codice dell'indice che hai visto sopra potrebbe essere trasformato in un componente ``, ``, ecc.
-Just like with HTML tags, you can compose, order and nest components to design whole pages. For example, the documentation page you're reading is made out of React components:
+Proprio come con i tag HTML, è possibile comporre, ordinare e annidare i componenti per progettare intere pagine. Ad esempio, la pagina di documentazione che stai leggendo è composta da componenti React:
```js
@@ -51,11 +51,11 @@ Just like with HTML tags, you can compose, order and nest components to design w
```
-As your project grows, you will notice that many of your designs can be composed by reusing components you already wrote, speeding up your development. Our table of contents above could be added to any screen with `
@@ -76,33 +76,33 @@ img { height: 200px; }
-And here's how to build a component:
+Ed ecco come costruire un componente:
-### Step 1: Export the component {/*step-1-export-the-component*/}
+### Step 1: Esportare il componente {/*step-1-export-the-component*/}
-The `export default` prefix is a [standard JavaScript syntax](https://developer.mozilla.org/docs/web/javascript/reference/statements/export) (not specific to React). It lets you mark the main function in a file so that you can later import it from other files. (More on importing in [Importing and Exporting Components](/learn/importing-and-exporting-components)!)
+Il prefisso `export default` è una [sintassi JavaScript standard](https://developer.mozilla.org/docs/web/javascript/reference/statements/export) (non specifica a React). Consente di contrassegnare la funzione principale di un file in modo da poterla importare successivamente in altri file. (Maggiori informazioni sull'importazione in [Importazione ed esportazione di componenti](/learning/importing-and-exporting-components))!
-### Step 2: Define the function {/*step-2-define-the-function*/}
+### Step 2: Definire la funzione {/*step-2-define-the-function*/}
-With `function Profile() { }` you define a JavaScript function with the name `Profile`.
+Con `function Profile() { }` si definisce una funzione JavaScript con il nome `Profile`.
-React components are regular JavaScript functions, but **their names must start with a capital letter** or they won't work!
+I componenti React sono normali funzioni JavaScript, ma **il loro nome deve iniziare con una lettera maiuscola** o non funzionano!
-### Step 3: Add markup {/*step-3-add-markup*/}
+### Step 3: Aggiungere il markup {/*step-3-add-markup*/}
-The component returns an `![]()
` tag with `src` and `alt` attributes. `![]()
` is written like HTML, but it is actually JavaScript under the hood! This syntax is called [JSX](/learn/writing-markup-with-jsx), and it lets you embed markup inside JavaScript.
+Il componente ritorna un tag `![]()
` con gli attributi `src` e `alt`. `![]()
` è scritto come fosse HTML, ma in realtà si tratta di codice JavaScript sotto il cofano! Questa sintassi si chiama [JSX](/learn/writing-markup-with-jsx) e consente di incorporare markup all'interno di JavaScript.
-Return statements can be written all on one line, as in this component:
+Le istruzioni di ritorno possono essere scritte tutte su una riga, come in questo componente:
```js
return ;
```
-But if your markup isn't all on the same line as the `return` keyword, you must wrap it in a pair of parentheses:
+Ma se il tuo markup non si trova tutto sulla stessa riga della parola chiave `return`, è necessario racchiuderlo (_wrap_) in una coppia di parentesi tonde:
```js
return (
@@ -114,13 +114,13 @@ return (
-Without parentheses, any code on the lines after `return` [will be ignored](https://stackoverflow.com/questions/2846283/what-are-the-rules-for-javascripts-automatic-semicolon-insertion-asi)!
+Senza parentesi, qualsiasi riga di codice successiva alla riga contenente `return` [sarà ignorata](https://stackoverflow.com/questions/2846283/what-are-the-rules-for-javascripts-automatic-semicolon-insertion-asi)!
-## Using a component {/*using-a-component*/}
+## Usare un componente {/*using-a-component*/}
-Now that you've defined your `Profile` component, you can nest it inside other components. For example, you can export a `Gallery` component that uses multiple `Profile` components:
+Ora che è stato definito il componente `Profile`, è possibile annidarlo all'interno di altri componenti. Per esempio, si può esportare un componente `Gallery` che utilizza più componenti `Profile`:
@@ -137,7 +137,7 @@ function Profile() {
export default function Gallery() {
return (
- Amazing scientists
+ Scienziati incredibili
-### What the browser sees {/*what-the-browser-sees*/}
+### Cosa vede il browser {/*what-the-browser-sees*/}
-Notice the difference in casing:
+Nota la differenza tra il maiuscolo e il minuscolo:
-* `` is lowercase, so React knows we refer to an HTML tag.
-* `` è minuscolo, in modo che React sappia che ci riferiamo a un tag HTML.
+* `![]()
`. In the end, this is what the browser sees:
+E `Profile` contiene lui stesso altri tag HTML: `![]()
`. Alla fine, questo è ciò che vede il browser:
```html
- Amazing scientists
+ Scienziati incredibili
```
-### Nesting and organizing components {/*nesting-and-organizing-components*/}
+### Annidamento e organizzazione dei componenti {/*nesting-and-organizing-components*/}
-Components are regular JavaScript functions, so you can keep multiple components in the same file. This is convenient when components are relatively small or tightly related to each other. If this file gets crowded, you can always move `Profile` to a separate file. You will learn how to do this shortly on the [page about imports.](/learn/importing-and-exporting-components)
+I componenti sono normali funzioni JavaScript, quindi è possibile avere più componenti nello stesso file. Questo è comodo quando i componenti sono relativamente piccoli o strettamente correlati tra loro. Se questo file dovesse diventare troppo affollato, puoi sempre spostare `Profile` in un file separato. Imparerai come fare a breve nella [pagina sulle importazioni.](/learning/importing-and-exporting-components).
-Because the `Profile` components are rendered inside `Gallery`—even several times!—we can say that `Gallery` is a **parent component,** rendering each `Profile` as a "child". This is part of the magic of React: you can define a component once, and then use it in as many places and as many times as you like.
+Poiché i componenti `Profile` sono renderizzati all'interno di `Gallery` - anche più volte! - possiamo dire che `Gallery` è un **componente genitore,** che renderizza ogni `Profile` come un "figlio". Questa è una parte della magia di React: si può definire un componente una sola volta e poi usarlo in tutti i posti e tutte le volte che si vuole.
-Components can render other components, but **you must never nest their definitions:**
+I componenti possono renderizzare altri componenti, ma **non si devono mai annidare le loro definizioni:**
```js {2-5}
export default function Gallery() {
- // 🔴 Never define a component inside another component!
+ // 🔴 Non definire mai un componente all'interno di un altro componente!
function Profile() {
// ...
}
@@ -190,47 +190,47 @@ export default function Gallery() {
}
```
-The snippet above is [very slow and causes bugs.](/learn/preserving-and-resetting-state#different-components-at-the-same-position-reset-state) Instead, define every component at the top level:
+Il codice qui sopra è [molto lento e causa dei bug.](/learn/preserving-and-resetting-state#different-components-at-the-same-position-reset-state) Invece, definisci ogni componente al livello principale:
```js {5-8}
export default function Gallery() {
// ...
}
-// ✅ Declare components at the top level
+// ✅ Dichiara i componenti al livello principale
function Profile() {
// ...
}
```
-When a child component needs some data from a parent, [pass it by props](/learn/passing-props-to-a-component) instead of nesting definitions.
+Quando un componente figlio ha bisogno di alcuni dati da un genitore, [passaglieli tramite props](/learn/passing-props-to-a-component), invece di annidare le definizioni.
-#### Components all the way down {/*components-all-the-way-down*/}
+#### Componenti fino in fondo {/*components-all-the-way-down*/}
-Your React application begins at a "root" component. Usually, it is created automatically when you start a new project. For example, if you use [CodeSandbox](https://codesandbox.io/) or [Create React App](https://create-react-app.dev/), the root component is defined in `src/App.js`. If you use the framework [Next.js](https://nextjs.org/), the root component is defined in `pages/index.js`. In these examples, you've been exporting root components.
+La tua applicazione React inizia con un componente "radice" (_root_). Di solito, viene creato automaticamente quando si comincia un nuovo progetto. Ad esempio, se utilizzi [CodeSandbox](https://codesandbox.io/) o [Create React App](https://create-react-app.dev/), il componente radice è definito in `src/App.js`. Se usi il framework [Next.js](https://nextjs.org/), il componente radice è definito in `pages/index.js`. In questi esempi, abbiamo esportato il componente radice.
-Most React apps use components all the way down. This means that you won't only use components for reusable pieces like buttons, but also for larger pieces like sidebars, lists, and ultimately, complete pages! Components are a handy way to organize UI code and markup, even if some of them are only used once.
+La maggior parte delle applicazioni React utilizza i componenti fino in fondo. Ciò significa che non userai i componenti solo per piccole parti riutilizzabili come i pulsanti, ma anche per parti più grandi come barre laterali, elenchi e, infine, pagine complete! I componenti sono un modo pratico per organizzare il codice e il markup dell'interfaccia utente, anche se alcuni di essi dovessero essere utilizzati una sola volta.
-[React-based frameworks](/learn/start-a-new-react-project) take this a step further. Instead of using an empty HTML file and letting React "take over" managing the page with JavaScript, they *also* generate the HTML automatically from your React components. This allows your app to show some content before the JavaScript code loads.
+I [framework basati su React](/learn/start-a-new-react-project) compiono un ulteriore passo avanti. Invece di usare un file HTML vuoto e lasciare che React si occupi di gestire la pagina con JavaScript, generano automaticamente l'HTML dai componenti React. Questo permette all'applicazione di mostrare alcuni contenuti prima del caricamento del codice JavaScript.
-Still, many websites only use React to [add interactivity to existing HTML pages.](/learn/add-react-to-an-existing-project#using-react-for-a-part-of-your-existing-page) They have many root components instead of a single one for the entire page. You can use as much—or as little—React as you need.
+Tuttavia, molti siti web usano React solo per [aggiungere interattività a pagine HTML esistenti.](/learn/add-react-to-an-existing-project#using-react-for-a-part-of-your-existing-page) Hanno molti componenti radice invece di uno singolo per l'intera pagina. È possibile utilizzare tanto o poco React in base alle tue esigenze.
-You've just gotten your first taste of React! Let's recap some key points.
+Hai appena avuto il tuo primo assaggio di React! Riassumiamo alcuni punti chiave.
-* React lets you create components, **reusable UI elements for your app.**
-* In a React app, every piece of UI is a component.
-* React components are regular JavaScript functions except:
+* React consente di creare componenti, **elementi riutilizzabili dell'interfaccia utente per la tua applicazione.**
+* In un'applicazione React, ogni elemento dell'interfaccia utente è un componente.
+* I componenti React sono normali funzioni JavaScript, tranne che per il fatto che:
- 1. Their names always begin with a capital letter.
- 2. They return JSX markup.
+ 1. I loro nomi iniziano sempre con la lettera maiuscola.
+ 2. Ritornano markup JSX.
@@ -238,9 +238,9 @@ You've just gotten your first taste of React! Let's recap some key points.
-#### Export the component {/*export-the-component*/}
+#### Esporta il componente {/*export-the-component*/}
-This sandbox doesn't work because the root component is not exported:
+Questa sandbox non funziona perché il componente principale non viene esportato:
@@ -261,11 +261,11 @@ img { height: 181px; }
-Try to fix it yourself before looking at the solution!
+Cerca di risolvere il problema da solo/a prima di guardare alla soluzione!
-Add `export default` before the function definition like so:
+Aggiungi `export default` prima della definizione della funzione, in questo modo:
@@ -286,17 +286,17 @@ img { height: 181px; }
-You might be wondering why writing `export` alone is not enough to fix this example. You can learn the difference between `export` and `export default` in [Importing and Exporting Components.](/learn/importing-and-exporting-components)
+Ci si potrebbe chiedere perché scrivere `export` da solo non sia sufficiente a risolvere questo esempio. Si può imparare la differenza tra `export` e `export default` in [Importazione ed esportazione di componenti.](/learning/importing-and-exporting-components)
-#### Fix the return statement {/*fix-the-return-statement*/}
+#### Correggere l'istruzione di ritorno {/*fix-the-return-statement*/}
-Something isn't right about this `return` statement. Can you fix it?
+C'è qualcosa che non va in questa istruzione di ritorno. Si può risolvere?
-You may get an "Unexpected token" error while trying to fix this. In that case, check that the semicolon appears *after* the closing parenthesis. Leaving a semicolon inside `return ( )` will cause an error.
+Potresti ricevere un errore "Unexpected token" mentre cerchi di risolvere questo problema. In tal caso, verifica che il punto e virgola compaia *dopo* la parentesi di chiusura. Lasciare un punto e virgola all'interno di `return ( )` causerà un errore.
@@ -318,7 +318,7 @@ img { height: 180px; }
-You can fix this component by moving the return statement to one line like so:
+È possibile risolvere questo componente spostando l'istruzione di ritorno su una sola riga, in questo modo:
@@ -334,16 +334,16 @@ img { height: 180px; }
-Or by wrapping the returned JSX markup in parentheses that open right after `return`:
+Oppure racchiudendo il markup JSX restituito in una coppia di parentesi che si apre subito dopo `return`:
```js
export default function Profile() {
return (
-
);
}
@@ -357,9 +357,9 @@ img { height: 180px; }
-#### Spot the mistake {/*spot-the-mistake*/}
+#### Trova l'errore {/*spot-the-mistake*/}
-Something's wrong with how the `Profile` component is declared and used. Can you spot the mistake? (Try to remember how React distinguishes components from the regular HTML tags!)
+C'è qualcosa di sbagliato nel modo in cui il componente `Profile` è definito e utilizzato. Riesci a individuare l'errore? (Cerca di ricordare come React distingue i componenti dai normali tag HTML).
@@ -376,7 +376,7 @@ function profile() {
export default function Gallery() {
return (
- Amazing scientists
+ Scienziati incredibili
-React component names must start with a capital letter.
+I nomi dei componenti React devono iniziare con una lettera maiuscola.
-Change `function profile()` to `function Profile()`, and then change every `
@@ -412,7 +412,7 @@ function Profile() {
export default function Gallery() {
return (
- Amazing scientists
+ Scienziati incredibili
-#### Your own component {/*your-own-component*/}
+#### Il tuo componente {/*your-own-component*/}
-Write a component from scratch. You can give it any valid name and return any markup. If you're out of ideas, you can write a `Congratulations` component that shows `Good job!
`. Don't forget to export it!
+Definisci un componente da zero. Puoi dargli qualsiasi nome valido e restituire qualsiasi markup. Se sei a corto di idee, si puoi definire un componente `Congratulations` che mostri `Buon lavoro!
`. Non dimenticate di esportarlo!
```js
-// Write your component below!
+// Definisci il tuo componente qui sotto!
```
diff --git a/src/sidebarLearn.json b/src/sidebarLearn.json
index 89d5cffca..27fa2bfaf 100644
--- a/src/sidebarLearn.json
+++ b/src/sidebarLearn.json
@@ -52,7 +52,7 @@
"path": "/learn/describing-the-ui",
"routes": [
{
- "title": "Your First Component",
+ "title": "Il Tuo Primo Componente",
"path": "/learn/your-first-component"
},
{
@@ -186,7 +186,7 @@
},
{
"title": "Removing Effect Dependencies",
- "path": "/learn/removing-effect-dependencies"
+ "path": "/learn/removing-effect-dependencies"
},
{
"title": "Reusing Logic with Custom Hooks",
`, etc.
+React consente di combinare markup, CSS e JavaScript in "componenti" personalizzati, **elementi dell'interfaccia utente riutilizzabili per la tua applicazione.** Il codice dell'indice che hai visto sopra potrebbe essere trasformato in un componente ``, ``, ecc.
-Just like with HTML tags, you can compose, order and nest components to design whole pages. For example, the documentation page you're reading is made out of React components:
+Proprio come con i tag HTML, è possibile comporre, ordinare e annidare i componenti per progettare intere pagine. Ad esempio, la pagina di documentazione che stai leggendo è composta da componenti React:
```js
@@ -51,11 +51,11 @@ Just like with HTML tags, you can compose, order and nest components to design w
```
-As your project grows, you will notice that many of your designs can be composed by reusing components you already wrote, speeding up your development. Our table of contents above could be added to any screen with `
@@ -76,33 +76,33 @@ img { height: 200px; }
-And here's how to build a component:
+Ed ecco come costruire un componente:
-### Step 1: Export the component {/*step-1-export-the-component*/}
+### Step 1: Esportare il componente {/*step-1-export-the-component*/}
-The `export default` prefix is a [standard JavaScript syntax](https://developer.mozilla.org/docs/web/javascript/reference/statements/export) (not specific to React). It lets you mark the main function in a file so that you can later import it from other files. (More on importing in [Importing and Exporting Components](/learn/importing-and-exporting-components)!)
+Il prefisso `export default` è una [sintassi JavaScript standard](https://developer.mozilla.org/docs/web/javascript/reference/statements/export) (non specifica a React). Consente di contrassegnare la funzione principale di un file in modo da poterla importare successivamente in altri file. (Maggiori informazioni sull'importazione in [Importazione ed esportazione di componenti](/learning/importing-and-exporting-components))!
-### Step 2: Define the function {/*step-2-define-the-function*/}
+### Step 2: Definire la funzione {/*step-2-define-the-function*/}
-With `function Profile() { }` you define a JavaScript function with the name `Profile`.
+Con `function Profile() { }` si definisce una funzione JavaScript con il nome `Profile`.
-React components are regular JavaScript functions, but **their names must start with a capital letter** or they won't work!
+I componenti React sono normali funzioni JavaScript, ma **il loro nome deve iniziare con una lettera maiuscola** o non funzionano!
-### Step 3: Add markup {/*step-3-add-markup*/}
+### Step 3: Aggiungere il markup {/*step-3-add-markup*/}
-The component returns an `![]()
` tag with `src` and `alt` attributes. `![]()
` is written like HTML, but it is actually JavaScript under the hood! This syntax is called [JSX](/learn/writing-markup-with-jsx), and it lets you embed markup inside JavaScript.
+Il componente ritorna un tag `![]()
` con gli attributi `src` e `alt`. `![]()
` è scritto come fosse HTML, ma in realtà si tratta di codice JavaScript sotto il cofano! Questa sintassi si chiama [JSX](/learn/writing-markup-with-jsx) e consente di incorporare markup all'interno di JavaScript.
-Return statements can be written all on one line, as in this component:
+Le istruzioni di ritorno possono essere scritte tutte su una riga, come in questo componente:
```js
return ;
```
-But if your markup isn't all on the same line as the `return` keyword, you must wrap it in a pair of parentheses:
+Ma se il tuo markup non si trova tutto sulla stessa riga della parola chiave `return`, è necessario racchiuderlo (_wrap_) in una coppia di parentesi tonde:
```js
return (
@@ -114,13 +114,13 @@ return (
-Without parentheses, any code on the lines after `return` [will be ignored](https://stackoverflow.com/questions/2846283/what-are-the-rules-for-javascripts-automatic-semicolon-insertion-asi)!
+Senza parentesi, qualsiasi riga di codice successiva alla riga contenente `return` [sarà ignorata](https://stackoverflow.com/questions/2846283/what-are-the-rules-for-javascripts-automatic-semicolon-insertion-asi)!
-## Using a component {/*using-a-component*/}
+## Usare un componente {/*using-a-component*/}
-Now that you've defined your `Profile` component, you can nest it inside other components. For example, you can export a `Gallery` component that uses multiple `Profile` components:
+Ora che è stato definito il componente `Profile`, è possibile annidarlo all'interno di altri componenti. Per esempio, si può esportare un componente `Gallery` che utilizza più componenti `Profile`:
@@ -137,7 +137,7 @@ function Profile() {
export default function Gallery() {
return (
- Amazing scientists
+ Scienziati incredibili
-### What the browser sees {/*what-the-browser-sees*/}
+### Cosa vede il browser {/*what-the-browser-sees*/}
-Notice the difference in casing:
+Nota la differenza tra il maiuscolo e il minuscolo:
-* `` is lowercase, so React knows we refer to an HTML tag.
-* `` è minuscolo, in modo che React sappia che ci riferiamo a un tag HTML.
+* `![]()
`. In the end, this is what the browser sees:
+E `Profile` contiene lui stesso altri tag HTML: `![]()
`. Alla fine, questo è ciò che vede il browser:
```html
- Amazing scientists
+ Scienziati incredibili
```
-### Nesting and organizing components {/*nesting-and-organizing-components*/}
+### Annidamento e organizzazione dei componenti {/*nesting-and-organizing-components*/}
-Components are regular JavaScript functions, so you can keep multiple components in the same file. This is convenient when components are relatively small or tightly related to each other. If this file gets crowded, you can always move `Profile` to a separate file. You will learn how to do this shortly on the [page about imports.](/learn/importing-and-exporting-components)
+I componenti sono normali funzioni JavaScript, quindi è possibile avere più componenti nello stesso file. Questo è comodo quando i componenti sono relativamente piccoli o strettamente correlati tra loro. Se questo file dovesse diventare troppo affollato, puoi sempre spostare `Profile` in un file separato. Imparerai come fare a breve nella [pagina sulle importazioni.](/learning/importing-and-exporting-components).
-Because the `Profile` components are rendered inside `Gallery`—even several times!—we can say that `Gallery` is a **parent component,** rendering each `Profile` as a "child". This is part of the magic of React: you can define a component once, and then use it in as many places and as many times as you like.
+Poiché i componenti `Profile` sono renderizzati all'interno di `Gallery` - anche più volte! - possiamo dire che `Gallery` è un **componente genitore,** che renderizza ogni `Profile` come un "figlio". Questa è una parte della magia di React: si può definire un componente una sola volta e poi usarlo in tutti i posti e tutte le volte che si vuole.
-Components can render other components, but **you must never nest their definitions:**
+I componenti possono renderizzare altri componenti, ma **non si devono mai annidare le loro definizioni:**
```js {2-5}
export default function Gallery() {
- // 🔴 Never define a component inside another component!
+ // 🔴 Non definire mai un componente all'interno di un altro componente!
function Profile() {
// ...
}
@@ -190,47 +190,47 @@ export default function Gallery() {
}
```
-The snippet above is [very slow and causes bugs.](/learn/preserving-and-resetting-state#different-components-at-the-same-position-reset-state) Instead, define every component at the top level:
+Il codice qui sopra è [molto lento e causa dei bug.](/learn/preserving-and-resetting-state#different-components-at-the-same-position-reset-state) Invece, definisci ogni componente al livello principale:
```js {5-8}
export default function Gallery() {
// ...
}
-// ✅ Declare components at the top level
+// ✅ Dichiara i componenti al livello principale
function Profile() {
// ...
}
```
-When a child component needs some data from a parent, [pass it by props](/learn/passing-props-to-a-component) instead of nesting definitions.
+Quando un componente figlio ha bisogno di alcuni dati da un genitore, [passaglieli tramite props](/learn/passing-props-to-a-component), invece di annidare le definizioni.
-#### Components all the way down {/*components-all-the-way-down*/}
+#### Componenti fino in fondo {/*components-all-the-way-down*/}
-Your React application begins at a "root" component. Usually, it is created automatically when you start a new project. For example, if you use [CodeSandbox](https://codesandbox.io/) or [Create React App](https://create-react-app.dev/), the root component is defined in `src/App.js`. If you use the framework [Next.js](https://nextjs.org/), the root component is defined in `pages/index.js`. In these examples, you've been exporting root components.
+La tua applicazione React inizia con un componente "radice" (_root_). Di solito, viene creato automaticamente quando si comincia un nuovo progetto. Ad esempio, se utilizzi [CodeSandbox](https://codesandbox.io/) o [Create React App](https://create-react-app.dev/), il componente radice è definito in `src/App.js`. Se usi il framework [Next.js](https://nextjs.org/), il componente radice è definito in `pages/index.js`. In questi esempi, abbiamo esportato il componente radice.
-Most React apps use components all the way down. This means that you won't only use components for reusable pieces like buttons, but also for larger pieces like sidebars, lists, and ultimately, complete pages! Components are a handy way to organize UI code and markup, even if some of them are only used once.
+La maggior parte delle applicazioni React utilizza i componenti fino in fondo. Ciò significa che non userai i componenti solo per piccole parti riutilizzabili come i pulsanti, ma anche per parti più grandi come barre laterali, elenchi e, infine, pagine complete! I componenti sono un modo pratico per organizzare il codice e il markup dell'interfaccia utente, anche se alcuni di essi dovessero essere utilizzati una sola volta.
-[React-based frameworks](/learn/start-a-new-react-project) take this a step further. Instead of using an empty HTML file and letting React "take over" managing the page with JavaScript, they *also* generate the HTML automatically from your React components. This allows your app to show some content before the JavaScript code loads.
+I [framework basati su React](/learn/start-a-new-react-project) compiono un ulteriore passo avanti. Invece di usare un file HTML vuoto e lasciare che React si occupi di gestire la pagina con JavaScript, generano automaticamente l'HTML dai componenti React. Questo permette all'applicazione di mostrare alcuni contenuti prima del caricamento del codice JavaScript.
-Still, many websites only use React to [add interactivity to existing HTML pages.](/learn/add-react-to-an-existing-project#using-react-for-a-part-of-your-existing-page) They have many root components instead of a single one for the entire page. You can use as much—or as little—React as you need.
+Tuttavia, molti siti web usano React solo per [aggiungere interattività a pagine HTML esistenti.](/learn/add-react-to-an-existing-project#using-react-for-a-part-of-your-existing-page) Hanno molti componenti radice invece di uno singolo per l'intera pagina. È possibile utilizzare tanto o poco React in base alle tue esigenze.
-You've just gotten your first taste of React! Let's recap some key points.
+Hai appena avuto il tuo primo assaggio di React! Riassumiamo alcuni punti chiave.
-* React lets you create components, **reusable UI elements for your app.**
-* In a React app, every piece of UI is a component.
-* React components are regular JavaScript functions except:
+* React consente di creare componenti, **elementi riutilizzabili dell'interfaccia utente per la tua applicazione.**
+* In un'applicazione React, ogni elemento dell'interfaccia utente è un componente.
+* I componenti React sono normali funzioni JavaScript, tranne che per il fatto che:
- 1. Their names always begin with a capital letter.
- 2. They return JSX markup.
+ 1. I loro nomi iniziano sempre con la lettera maiuscola.
+ 2. Ritornano markup JSX.
@@ -238,9 +238,9 @@ You've just gotten your first taste of React! Let's recap some key points.
-#### Export the component {/*export-the-component*/}
+#### Esporta il componente {/*export-the-component*/}
-This sandbox doesn't work because the root component is not exported:
+Questa sandbox non funziona perché il componente principale non viene esportato:
@@ -261,11 +261,11 @@ img { height: 181px; }
-Try to fix it yourself before looking at the solution!
+Cerca di risolvere il problema da solo/a prima di guardare alla soluzione!
-Add `export default` before the function definition like so:
+Aggiungi `export default` prima della definizione della funzione, in questo modo:
@@ -286,17 +286,17 @@ img { height: 181px; }
-You might be wondering why writing `export` alone is not enough to fix this example. You can learn the difference between `export` and `export default` in [Importing and Exporting Components.](/learn/importing-and-exporting-components)
+Ci si potrebbe chiedere perché scrivere `export` da solo non sia sufficiente a risolvere questo esempio. Si può imparare la differenza tra `export` e `export default` in [Importazione ed esportazione di componenti.](/learning/importing-and-exporting-components)
-#### Fix the return statement {/*fix-the-return-statement*/}
+#### Correggere l'istruzione di ritorno {/*fix-the-return-statement*/}
-Something isn't right about this `return` statement. Can you fix it?
+C'è qualcosa che non va in questa istruzione di ritorno. Si può risolvere?
-You may get an "Unexpected token" error while trying to fix this. In that case, check that the semicolon appears *after* the closing parenthesis. Leaving a semicolon inside `return ( )` will cause an error.
+Potresti ricevere un errore "Unexpected token" mentre cerchi di risolvere questo problema. In tal caso, verifica che il punto e virgola compaia *dopo* la parentesi di chiusura. Lasciare un punto e virgola all'interno di `return ( )` causerà un errore.
@@ -318,7 +318,7 @@ img { height: 180px; }
-You can fix this component by moving the return statement to one line like so:
+È possibile risolvere questo componente spostando l'istruzione di ritorno su una sola riga, in questo modo:
@@ -334,16 +334,16 @@ img { height: 180px; }
-Or by wrapping the returned JSX markup in parentheses that open right after `return`:
+Oppure racchiudendo il markup JSX restituito in una coppia di parentesi che si apre subito dopo `return`:
```js
export default function Profile() {
return (
-
);
}
@@ -357,9 +357,9 @@ img { height: 180px; }
-#### Spot the mistake {/*spot-the-mistake*/}
+#### Trova l'errore {/*spot-the-mistake*/}
-Something's wrong with how the `Profile` component is declared and used. Can you spot the mistake? (Try to remember how React distinguishes components from the regular HTML tags!)
+C'è qualcosa di sbagliato nel modo in cui il componente `Profile` è definito e utilizzato. Riesci a individuare l'errore? (Cerca di ricordare come React distingue i componenti dai normali tag HTML).
@@ -376,7 +376,7 @@ function profile() {
export default function Gallery() {
return (
- Amazing scientists
+ Scienziati incredibili
-React component names must start with a capital letter.
+I nomi dei componenti React devono iniziare con una lettera maiuscola.
-Change `function profile()` to `function Profile()`, and then change every `
@@ -412,7 +412,7 @@ function Profile() {
export default function Gallery() {
return (
- Amazing scientists
+ Scienziati incredibili
-#### Your own component {/*your-own-component*/}
+#### Il tuo componente {/*your-own-component*/}
-Write a component from scratch. You can give it any valid name and return any markup. If you're out of ideas, you can write a `Congratulations` component that shows `Good job!
`. Don't forget to export it!
+Definisci un componente da zero. Puoi dargli qualsiasi nome valido e restituire qualsiasi markup. Se sei a corto di idee, si puoi definire un componente `Congratulations` che mostri `Buon lavoro!
`. Non dimenticate di esportarlo!
```js
-// Write your component below!
+// Definisci il tuo componente qui sotto!
```
diff --git a/src/sidebarLearn.json b/src/sidebarLearn.json
index 89d5cffca..27fa2bfaf 100644
--- a/src/sidebarLearn.json
+++ b/src/sidebarLearn.json
@@ -52,7 +52,7 @@
"path": "/learn/describing-the-ui",
"routes": [
{
- "title": "Your First Component",
+ "title": "Il Tuo Primo Componente",
"path": "/learn/your-first-component"
},
{
@@ -186,7 +186,7 @@
},
{
"title": "Removing Effect Dependencies",
- "path": "/learn/removing-effect-dependencies"
+ "path": "/learn/removing-effect-dependencies"
},
{
"title": "Reusing Logic with Custom Hooks",
`, ecc.
-Just like with HTML tags, you can compose, order and nest components to design whole pages. For example, the documentation page you're reading is made out of React components:
+Proprio come con i tag HTML, è possibile comporre, ordinare e annidare i componenti per progettare intere pagine. Ad esempio, la pagina di documentazione che stai leggendo è composta da componenti React:
```js
@@ -51,11 +51,11 @@ Just like with HTML tags, you can compose, order and nest components to design w
```
-As your project grows, you will notice that many of your designs can be composed by reusing components you already wrote, speeding up your development. Our table of contents above could be added to any screen with `
@@ -76,33 +76,33 @@ img { height: 200px; }
-And here's how to build a component:
+Ed ecco come costruire un componente:
-### Step 1: Export the component {/*step-1-export-the-component*/}
+### Step 1: Esportare il componente {/*step-1-export-the-component*/}
-The `export default` prefix is a [standard JavaScript syntax](https://developer.mozilla.org/docs/web/javascript/reference/statements/export) (not specific to React). It lets you mark the main function in a file so that you can later import it from other files. (More on importing in [Importing and Exporting Components](/learn/importing-and-exporting-components)!)
+Il prefisso `export default` è una [sintassi JavaScript standard](https://developer.mozilla.org/docs/web/javascript/reference/statements/export) (non specifica a React). Consente di contrassegnare la funzione principale di un file in modo da poterla importare successivamente in altri file. (Maggiori informazioni sull'importazione in [Importazione ed esportazione di componenti](/learning/importing-and-exporting-components))!
-### Step 2: Define the function {/*step-2-define-the-function*/}
+### Step 2: Definire la funzione {/*step-2-define-the-function*/}
-With `function Profile() { }` you define a JavaScript function with the name `Profile`.
+Con `function Profile() { }` si definisce una funzione JavaScript con il nome `Profile`.
-React components are regular JavaScript functions, but **their names must start with a capital letter** or they won't work!
+I componenti React sono normali funzioni JavaScript, ma **il loro nome deve iniziare con una lettera maiuscola** o non funzionano!
-### Step 3: Add markup {/*step-3-add-markup*/}
+### Step 3: Aggiungere il markup {/*step-3-add-markup*/}
-The component returns an `![]()
` tag with `src` and `alt` attributes. `![]()
` is written like HTML, but it is actually JavaScript under the hood! This syntax is called [JSX](/learn/writing-markup-with-jsx), and it lets you embed markup inside JavaScript.
+Il componente ritorna un tag `![]()
` con gli attributi `src` e `alt`. `![]()
` è scritto come fosse HTML, ma in realtà si tratta di codice JavaScript sotto il cofano! Questa sintassi si chiama [JSX](/learn/writing-markup-with-jsx) e consente di incorporare markup all'interno di JavaScript.
-Return statements can be written all on one line, as in this component:
+Le istruzioni di ritorno possono essere scritte tutte su una riga, come in questo componente:
```js
return ;
```
-But if your markup isn't all on the same line as the `return` keyword, you must wrap it in a pair of parentheses:
+Ma se il tuo markup non si trova tutto sulla stessa riga della parola chiave `return`, è necessario racchiuderlo (_wrap_) in una coppia di parentesi tonde:
```js
return (
@@ -114,13 +114,13 @@ return (
-Without parentheses, any code on the lines after `return` [will be ignored](https://stackoverflow.com/questions/2846283/what-are-the-rules-for-javascripts-automatic-semicolon-insertion-asi)!
+Senza parentesi, qualsiasi riga di codice successiva alla riga contenente `return` [sarà ignorata](https://stackoverflow.com/questions/2846283/what-are-the-rules-for-javascripts-automatic-semicolon-insertion-asi)!
-## Using a component {/*using-a-component*/}
+## Usare un componente {/*using-a-component*/}
-Now that you've defined your `Profile` component, you can nest it inside other components. For example, you can export a `Gallery` component that uses multiple `Profile` components:
+Ora che è stato definito il componente `Profile`, è possibile annidarlo all'interno di altri componenti. Per esempio, si può esportare un componente `Gallery` che utilizza più componenti `Profile`:
@@ -137,7 +137,7 @@ function Profile() {
export default function Gallery() {
return (
- Amazing scientists
+ Scienziati incredibili
-### What the browser sees {/*what-the-browser-sees*/}
+### Cosa vede il browser {/*what-the-browser-sees*/}
-Notice the difference in casing:
+Nota la differenza tra il maiuscolo e il minuscolo:
-* `` is lowercase, so React knows we refer to an HTML tag.
-* `` è minuscolo, in modo che React sappia che ci riferiamo a un tag HTML.
+* `![]()
`. In the end, this is what the browser sees:
+E `Profile` contiene lui stesso altri tag HTML: `![]()
`. Alla fine, questo è ciò che vede il browser:
```html
- Amazing scientists
+ Scienziati incredibili
```
-### Nesting and organizing components {/*nesting-and-organizing-components*/}
+### Annidamento e organizzazione dei componenti {/*nesting-and-organizing-components*/}
-Components are regular JavaScript functions, so you can keep multiple components in the same file. This is convenient when components are relatively small or tightly related to each other. If this file gets crowded, you can always move `Profile` to a separate file. You will learn how to do this shortly on the [page about imports.](/learn/importing-and-exporting-components)
+I componenti sono normali funzioni JavaScript, quindi è possibile avere più componenti nello stesso file. Questo è comodo quando i componenti sono relativamente piccoli o strettamente correlati tra loro. Se questo file dovesse diventare troppo affollato, puoi sempre spostare `Profile` in un file separato. Imparerai come fare a breve nella [pagina sulle importazioni.](/learning/importing-and-exporting-components).
-Because the `Profile` components are rendered inside `Gallery`—even several times!—we can say that `Gallery` is a **parent component,** rendering each `Profile` as a "child". This is part of the magic of React: you can define a component once, and then use it in as many places and as many times as you like.
+Poiché i componenti `Profile` sono renderizzati all'interno di `Gallery` - anche più volte! - possiamo dire che `Gallery` è un **componente genitore,** che renderizza ogni `Profile` come un "figlio". Questa è una parte della magia di React: si può definire un componente una sola volta e poi usarlo in tutti i posti e tutte le volte che si vuole.
-Components can render other components, but **you must never nest their definitions:**
+I componenti possono renderizzare altri componenti, ma **non si devono mai annidare le loro definizioni:**
```js {2-5}
export default function Gallery() {
- // 🔴 Never define a component inside another component!
+ // 🔴 Non definire mai un componente all'interno di un altro componente!
function Profile() {
// ...
}
@@ -190,47 +190,47 @@ export default function Gallery() {
}
```
-The snippet above is [very slow and causes bugs.](/learn/preserving-and-resetting-state#different-components-at-the-same-position-reset-state) Instead, define every component at the top level:
+Il codice qui sopra è [molto lento e causa dei bug.](/learn/preserving-and-resetting-state#different-components-at-the-same-position-reset-state) Invece, definisci ogni componente al livello principale:
```js {5-8}
export default function Gallery() {
// ...
}
-// ✅ Declare components at the top level
+// ✅ Dichiara i componenti al livello principale
function Profile() {
// ...
}
```
-When a child component needs some data from a parent, [pass it by props](/learn/passing-props-to-a-component) instead of nesting definitions.
+Quando un componente figlio ha bisogno di alcuni dati da un genitore, [passaglieli tramite props](/learn/passing-props-to-a-component), invece di annidare le definizioni.
-#### Components all the way down {/*components-all-the-way-down*/}
+#### Componenti fino in fondo {/*components-all-the-way-down*/}
-Your React application begins at a "root" component. Usually, it is created automatically when you start a new project. For example, if you use [CodeSandbox](https://codesandbox.io/) or [Create React App](https://create-react-app.dev/), the root component is defined in `src/App.js`. If you use the framework [Next.js](https://nextjs.org/), the root component is defined in `pages/index.js`. In these examples, you've been exporting root components.
+La tua applicazione React inizia con un componente "radice" (_root_). Di solito, viene creato automaticamente quando si comincia un nuovo progetto. Ad esempio, se utilizzi [CodeSandbox](https://codesandbox.io/) o [Create React App](https://create-react-app.dev/), il componente radice è definito in `src/App.js`. Se usi il framework [Next.js](https://nextjs.org/), il componente radice è definito in `pages/index.js`. In questi esempi, abbiamo esportato il componente radice.
-Most React apps use components all the way down. This means that you won't only use components for reusable pieces like buttons, but also for larger pieces like sidebars, lists, and ultimately, complete pages! Components are a handy way to organize UI code and markup, even if some of them are only used once.
+La maggior parte delle applicazioni React utilizza i componenti fino in fondo. Ciò significa che non userai i componenti solo per piccole parti riutilizzabili come i pulsanti, ma anche per parti più grandi come barre laterali, elenchi e, infine, pagine complete! I componenti sono un modo pratico per organizzare il codice e il markup dell'interfaccia utente, anche se alcuni di essi dovessero essere utilizzati una sola volta.
-[React-based frameworks](/learn/start-a-new-react-project) take this a step further. Instead of using an empty HTML file and letting React "take over" managing the page with JavaScript, they *also* generate the HTML automatically from your React components. This allows your app to show some content before the JavaScript code loads.
+I [framework basati su React](/learn/start-a-new-react-project) compiono un ulteriore passo avanti. Invece di usare un file HTML vuoto e lasciare che React si occupi di gestire la pagina con JavaScript, generano automaticamente l'HTML dai componenti React. Questo permette all'applicazione di mostrare alcuni contenuti prima del caricamento del codice JavaScript.
-Still, many websites only use React to [add interactivity to existing HTML pages.](/learn/add-react-to-an-existing-project#using-react-for-a-part-of-your-existing-page) They have many root components instead of a single one for the entire page. You can use as much—or as little—React as you need.
+Tuttavia, molti siti web usano React solo per [aggiungere interattività a pagine HTML esistenti.](/learn/add-react-to-an-existing-project#using-react-for-a-part-of-your-existing-page) Hanno molti componenti radice invece di uno singolo per l'intera pagina. È possibile utilizzare tanto o poco React in base alle tue esigenze.
-You've just gotten your first taste of React! Let's recap some key points.
+Hai appena avuto il tuo primo assaggio di React! Riassumiamo alcuni punti chiave.
-* React lets you create components, **reusable UI elements for your app.**
-* In a React app, every piece of UI is a component.
-* React components are regular JavaScript functions except:
+* React consente di creare componenti, **elementi riutilizzabili dell'interfaccia utente per la tua applicazione.**
+* In un'applicazione React, ogni elemento dell'interfaccia utente è un componente.
+* I componenti React sono normali funzioni JavaScript, tranne che per il fatto che:
- 1. Their names always begin with a capital letter.
- 2. They return JSX markup.
+ 1. I loro nomi iniziano sempre con la lettera maiuscola.
+ 2. Ritornano markup JSX.
@@ -238,9 +238,9 @@ You've just gotten your first taste of React! Let's recap some key points.
-#### Export the component {/*export-the-component*/}
+#### Esporta il componente {/*export-the-component*/}
-This sandbox doesn't work because the root component is not exported:
+Questa sandbox non funziona perché il componente principale non viene esportato:
@@ -261,11 +261,11 @@ img { height: 181px; }
-Try to fix it yourself before looking at the solution!
+Cerca di risolvere il problema da solo/a prima di guardare alla soluzione!
-Add `export default` before the function definition like so:
+Aggiungi `export default` prima della definizione della funzione, in questo modo:
@@ -286,17 +286,17 @@ img { height: 181px; }
-You might be wondering why writing `export` alone is not enough to fix this example. You can learn the difference between `export` and `export default` in [Importing and Exporting Components.](/learn/importing-and-exporting-components)
+Ci si potrebbe chiedere perché scrivere `export` da solo non sia sufficiente a risolvere questo esempio. Si può imparare la differenza tra `export` e `export default` in [Importazione ed esportazione di componenti.](/learning/importing-and-exporting-components)
-#### Fix the return statement {/*fix-the-return-statement*/}
+#### Correggere l'istruzione di ritorno {/*fix-the-return-statement*/}
-Something isn't right about this `return` statement. Can you fix it?
+C'è qualcosa che non va in questa istruzione di ritorno. Si può risolvere?
-You may get an "Unexpected token" error while trying to fix this. In that case, check that the semicolon appears *after* the closing parenthesis. Leaving a semicolon inside `return ( )` will cause an error.
+Potresti ricevere un errore "Unexpected token" mentre cerchi di risolvere questo problema. In tal caso, verifica che il punto e virgola compaia *dopo* la parentesi di chiusura. Lasciare un punto e virgola all'interno di `return ( )` causerà un errore.
@@ -318,7 +318,7 @@ img { height: 180px; }
-You can fix this component by moving the return statement to one line like so:
+È possibile risolvere questo componente spostando l'istruzione di ritorno su una sola riga, in questo modo:
@@ -334,16 +334,16 @@ img { height: 180px; }
-Or by wrapping the returned JSX markup in parentheses that open right after `return`:
+Oppure racchiudendo il markup JSX restituito in una coppia di parentesi che si apre subito dopo `return`:
```js
export default function Profile() {
return (
-
);
}
@@ -357,9 +357,9 @@ img { height: 180px; }
-#### Spot the mistake {/*spot-the-mistake*/}
+#### Trova l'errore {/*spot-the-mistake*/}
-Something's wrong with how the `Profile` component is declared and used. Can you spot the mistake? (Try to remember how React distinguishes components from the regular HTML tags!)
+C'è qualcosa di sbagliato nel modo in cui il componente `Profile` è definito e utilizzato. Riesci a individuare l'errore? (Cerca di ricordare come React distingue i componenti dai normali tag HTML).
@@ -376,7 +376,7 @@ function profile() {
export default function Gallery() {
return (
- Amazing scientists
+ Scienziati incredibili
-React component names must start with a capital letter.
+I nomi dei componenti React devono iniziare con una lettera maiuscola.
-Change `function profile()` to `function Profile()`, and then change every `
@@ -412,7 +412,7 @@ function Profile() {
export default function Gallery() {
return (
- Amazing scientists
+ Scienziati incredibili
-#### Your own component {/*your-own-component*/}
+#### Il tuo componente {/*your-own-component*/}
-Write a component from scratch. You can give it any valid name and return any markup. If you're out of ideas, you can write a `Congratulations` component that shows `Good job!
`. Don't forget to export it!
+Definisci un componente da zero. Puoi dargli qualsiasi nome valido e restituire qualsiasi markup. Se sei a corto di idee, si puoi definire un componente `Congratulations` che mostri `Buon lavoro!
`. Non dimenticate di esportarlo!
```js
-// Write your component below!
+// Definisci il tuo componente qui sotto!
```
diff --git a/src/sidebarLearn.json b/src/sidebarLearn.json
index 89d5cffca..27fa2bfaf 100644
--- a/src/sidebarLearn.json
+++ b/src/sidebarLearn.json
@@ -52,7 +52,7 @@
"path": "/learn/describing-the-ui",
"routes": [
{
- "title": "Your First Component",
+ "title": "Il Tuo Primo Componente",
"path": "/learn/your-first-component"
},
{
@@ -186,7 +186,7 @@
},
{
"title": "Removing Effect Dependencies",
- "path": "/learn/removing-effect-dependencies"
+ "path": "/learn/removing-effect-dependencies"
},
{
"title": "Reusing Logic with Custom Hooks",
Amazing scientists
+Scienziati incredibili
Amazing scientists
+Scienziati incredibili
);
}
@@ -357,9 +357,9 @@ img { height: 180px; }