Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Translated page content & Challenge, Recap, Illustration components translations #428

Merged

Conversation

Th3Wall
Copy link
Contributor

@Th3Wall Th3Wall commented Apr 27, 2023

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

Ref #418

@github-actions
Copy link

Size changes

📦 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 <[email protected]>
Copy link
Collaborator

@deblasis deblasis left a comment

Choose a reason for hiding this comment

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

ApplaudingYesGIF

Piccola modifica ma altrimenti 💯

@Th3Wall
Copy link
Contributor Author

Th3Wall commented Apr 28, 2023

ApplaudingYesGIF

Piccola modifica ma altrimenti 💯

Ahaha 😃 Grazie!! 🙏🏼

@github-actions
Copy link

Size changes

📦 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.

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.

@deblasis deblasis merged commit 85d76bc into reactjs:main Apr 28, 2023
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',
Copy link
Collaborator

Choose a reason for hiding this comment

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

Suggested change
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>`:
Copy link
Collaborator

Choose a reason for hiding this comment

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

Suggested change
## 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 :)


### 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*/}
Copy link
Collaborator

Choose a reason for hiding this comment

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

Suggested change
### 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
Copy link
Collaborator

Choose a reason for hiding this comment

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

Suggested change
// 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:
Copy link
Collaborator

Choose a reason for hiding this comment

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

Suggested change
**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!
Copy link
Collaborator

Choose a reason for hiding this comment

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

Suggested change
* 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.
Copy link
Collaborator

Choose a reason for hiding this comment

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

Suggested change
* 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 🙂


**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)
Copy link
Collaborator

Choose a reason for hiding this comment

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

Suggested change
**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)


**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)
Copy link
Collaborator

Choose a reason for hiding this comment

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

Suggested change
**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 🙂

@mattia-sanfilippo
Copy link
Collaborator

Oops, ho fatto tardi 😄

@Th3Wall
Copy link
Contributor Author

Th3Wall commented Apr 28, 2023

Oops, ho fatto tardi 😄

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

@Th3Wall
Copy link
Contributor Author

Th3Wall commented Apr 29, 2023

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants