Translated page content & Challenge, Recap, Illustration components translations by Th3Wall · Pull Request #428

Translated page content & Challenge, Recap, Illustration components translations by Th3Wall · Pull Request #428 · reactjs/it.react.dev

Translation for "Passing props to to a component" page.
Also added <Challenge>, <Recap>, <Illustration> components translations.

Ref #418

Size changes

Details

📦 Next.js Bundle Analysis for react-dev

This analysis was generated by the Next.js Bundle Analysis action. 🤖

Three Pages Changed Size

The following pages changed size from the code in this PR compared to its base branch:

Page	Size (compressed)	First Load
`/404`	`76.46 KB` (🟡 +43 B)	170.09 KB
`/500`	`76.46 KB` (🟡 +43 B)	170.09 KB
`/[[...markdownPath]]`	`77.88 KB` (🟡 +43 B)	171.51 KB

Details

Only the gzipped size is provided here based on an expert tip.

First Load is the size of the global bundle plus the bundle for the individual page. If a user were to show up to your website and land on a given page, the first load size represents the amount of javascript that user would need to download. If next/link is used, subsequent page loads would only need to download that page's bundle (the number in the "Size" column), since the global bundle has already been downloaded.

Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis

Next to the size is how much the size has increased or decreased compared with the base branch of this PR. If this percentage has increased by 10% or more, there will be a red status indicator applied, indicating that special attention should be given to this.

Co-authored-by: Alessandro De Blasis <alex@deblasis.net>

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Piccola modifica ma altrimenti 💯

Piccola modifica ma altrimenti 💯

Ahaha 😃 Grazie!! 🙏🏼

Size changes

Details

📦 Next.js Bundle Analysis for react-dev

This analysis was generated by the Next.js Bundle Analysis action. 🤖

Three Pages Changed Size

The following pages changed size from the code in this PR compared to its base branch:

Page	Size (compressed)	First Load
`/404`	`76.47 KB` (🟡 +43 B)	170.1 KB
`/500`	`76.47 KB` (🟡 +43 B)	170.09 KB
`/[[...markdownPath]]`	`77.89 KB` (🟡 +43 B)	171.52 KB

Details

Only the gzipped size is provided here based on an expert tip.

Any third party scripts you have added directly to your app using the <script> tag are not accounted for in this analysis

		titleText = isRecipes ? 'Try out some examples' : 'Try out some challenges',
		titleId = isRecipes ? 'examples' : 'challenges',
		titleText = isRecipes ? 'Prova alcuni esempi' : 'Prova alcune sfide',
		titleId = isRecipes ? 'Esempi' : 'Sfide',

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

	titleId = isRecipes ? 'Esempi' : 'Sfide',
	titleId = isRecipes ? 'esempi' : 'sfide',

Comment on lines +21 to +22

		## Props familiari {/familiar-props/}
		Le props sono le informazioni che passi ad un tag JSX. Ad esempio, `className`, `src`, `alt`, `width` e `height` sono alcune delle props che puoi passare ad un `<img>`:

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

	## Props familiari {/familiar-props/}
	Le props sono le informazioni che passi ad un tag JSX. Ad esempio, `className`, `src`, `alt`, `width` e `height` sono alcune delle props che puoi passare ad un `<img>`:
	## Props familiari {/familiar-props/}

	Le props sono le informazioni che passi ad un tag JSX. Ad esempio, `className`, `src`, `alt`, `width` e `height` sono alcune delle props che puoi passare ad un `<img>`:

Aggiunto spazio presente nell'originale :)

		Adesso puoi leggere queste props all'interno del componente `Avatar`.

		### Step 2: Read props inside the child component {/step-2-read-props-inside-the-child-component/}
		### Step 2: Leggi le props all'interno del tuo componente figlio {/step-2-read-props-inside-the-child-component/}

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

	### Step 2: Leggi le props all'interno del tuo componente figlio {/step-2-read-props-inside-the-child-component/}
	### Step 2: Leggi le props all'interno del componente figlio {/step-2-read-props-inside-the-child-component/}

		```js
		function Avatar({ person, size }) {
		// person and size are available here
		// person and size sono disponibili qui

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

	// person and size sono disponibili qui
	// person e size sono disponibili qui

		<Pitfall>

		Don't miss the pair of `{` and `}` curlies inside of `(` and `)` when declaring props:
		Non dimenticare la coppia di `{` e `}` graffe all'interno di `(` e `)` quando dichiari le props:

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

	Non dimenticare la coppia di `{` e `}` graffe all'interno di `(` e `)` quando dichiari le props:
	Non dimenticare la coppia di graffe `{` e `}` all'interno di `(` e `)` quando dichiari le props:

		* Per passare le props, aggiungile al JSX, proprio come faresti con gli attributi HTML.
		* Per leggere le props, usa la sintassi di destrutturazione `function Avatar({ person, size })`.
		* Puoi specificare un valore predefinito come `size = 100`, che viene utilizzato per le props mancanti ed `undefined`.
		* Puoi inoltra tutte le props con la sintassi di spread JSX `<Avatar {...props} />`, ma non abusarne!

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

	* Puoi inoltra tutte le props con la sintassi di spread JSX `<Avatar {...props} />`, ma non abusarne!
	* Puoi inoltrare tutte le props con la sintassi di spread JSX `<Avatar {...props} />`, ma non abusarne!

		* Puoi inoltra tutte le props con la sintassi di spread JSX `<Avatar {...props} />`, ma non abusarne!
		* Il JSX annidato come `<Card><Avatar /></Card>` apparirà come `children` della prop del componente `Card`.
		* Le props sono istantanee di sola lettura nel tempo: ogni render riceve una nuova versione delle props.
		* Non puoi cambiare le props. Quando hai bisogno di interattività, dovrai impostare lo stato.

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

	* Non puoi cambiare le props. Quando hai bisogno di interattività, dovrai impostare lo stato.
	* Non puoi cambiare le props. Quando hai bisogno di interattività, dovrai impostare lo state.

Teniamo state come da glossario 🙂

		Tuttavia, le props sono [immutabili](https://en.wikipedia.org/wiki/Immutable_object)—un termine della scienza informatica che significa "non modificabile". Quando un componente ha bisogno di cambiare le sue props (ad esempio, in risposta a un'interazione dell'utente o a nuovi dati), dovrà "chiedere" al suo componente genitore di passargli _props diverse_—un nuovo oggetto! Le sue vecchie props verranno quindi scartate ed alla fine il motore JavaScript reclamerà la memoria occupata da esse.

		Don't try to "change props". When you need to respond to the user input (like changing the selected color), you will need to "set state", which you can learn about in [State: A Component's Memory.](/learn/state-a-components-memory)
		Non provare a "cambiare le props". Quando hai bisogno di rispondere all'input dell'utente (come cambiare il colore selezionato), dovrai "impostare lo stato", che puoi imparare in [State: La memoria di un Componente.](/learn/state-a-components-memory)

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

	Non provare a "cambiare le props". Quando hai bisogno di rispondere all'input dell'utente (come cambiare il colore selezionato), dovrai "impostare lo stato", che puoi imparare in [State: La memoria di un Componente.](/learn/state-a-components-memory)
	Non provare a "cambiare le props". Quando hai bisogno di rispondere all'input dell'utente (come cambiare il colore selezionato), dovrai "impostare lo stato", che puoi imparare in [State: La Memoria di un Componente.](/learn/state-a-components-memory)

		Tuttavia, le props sono [immutabili](https://en.wikipedia.org/wiki/Immutable_object)—un termine della scienza informatica che significa "non modificabile". Quando un componente ha bisogno di cambiare le sue props (ad esempio, in risposta a un'interazione dell'utente o a nuovi dati), dovrà "chiedere" al suo componente genitore di passargli _props diverse_—un nuovo oggetto! Le sue vecchie props verranno quindi scartate ed alla fine il motore JavaScript reclamerà la memoria occupata da esse.

		Don't try to "change props". When you need to respond to the user input (like changing the selected color), you will need to "set state", which you can learn about in [State: A Component's Memory.](/learn/state-a-components-memory)
		Non provare a "cambiare le props". Quando hai bisogno di rispondere all'input dell'utente (come cambiare il colore selezionato), dovrai "impostare lo stato", che puoi imparare in [State: La memoria di un Componente.](/learn/state-a-components-memory)

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

	Non provare a "cambiare le props". Quando hai bisogno di rispondere all'input dell'utente (come cambiare il colore selezionato), dovrai "impostare lo stato", che puoi imparare in [State: La memoria di un Componente.](/learn/state-a-components-memory)
	Non provare a "cambiare le props". Quando hai bisogno di rispondere all'input dell'utente (come cambiare il colore selezionato), dovrai "impostare lo state", che puoi imparare in [State: La memoria di un Componente.](/learn/state-a-components-memory)

Teniamo state come da glossario 🙂

Oops, ho fatto tardi 😄

No problem, posso aprire una PR separata ed aggiungo queste fix 😉

Ciao @mattia-sanfilippo, ho appena creato la PR per aggiustare le translations con le modifiche che hai suggerito 😄
Aspetto una tua review. Ciaooo! 👋🏼