Translation of the "Fragment" page #455
Conversation
| @@ -54,16 +54,16 @@ function Post() { | |||
| } | |||
| ``` | |||
|
|
|||
| Fragments are useful because grouping elements with a Fragment has no effect on layout or styles, unlike if you wrapped the elements in another container like a DOM element. If you inspect this example with the browser tools, you'll see that all `<h1>` and `<p>` DOM nodes appear as siblings without wrappers around them: | |||
| Les Fragments sont utiles car grouper des éléments avec un Fragment n'as pas d'effet sur la mise en page ou les styles, contrairement à l'utilisation d'un autre balise englobante du DOM. Si vous inspectez cet exemple avec les outils du navigateur, vous verrez que toutes les balises `<h1>` et `<p>` du DOM apparaissent en tant frères et sœur sans balise englobante : | |||
There was a problem hiding this comment.
Pas sur de la traduction de siblings => enfants ?
There was a problem hiding this comment.
En effet, ce n'est pas ça ("children"). "Siblings" n'a hélas pas de traduction satisfaisante en un mot, ça désigne les frères et sœurs IRL, donc les éléments de même parent en fait.
tdd
added
Pending Review
|
Coucou Bastien, bien joué ! (Et bravo pour la mise immédiate en commentaires PR de tes doutes ; tu peux aussi en faire des commentaires HTML "FIXME" dans le Markdown si tu veux être sûr de rien oublier.) Je vais relire ça tout prochainement, j'ai un peu explosé mon quota "docs React" pour la journée avec #457 😁 |
There was a problem hiding this comment.
Salut @bastiendmt !
Avant toute chose, merci pour tout ce boulot ! C'est super cool de nous filer un coup de main.
Avant de traiter les retours, lis bien TOUT ce message, notamment les consignes d'intégration optimale des retours par lot(s)
Tout est fait sous forme de Suggestions GitHub, il te suffit à chaque suggestion que tu approuves de
cliquer le bouton d'ajout au lot de modifs à committer (pas de commit direct !), et sur la fin de créer le commit groupé. (ce mode de regroupement en un seul commit est à favoriser absolument, mais tu devras aller dans l'onglet Files changed pour y accéder, il n'est pas utilisable dans l’onglet Conversation)
Si certaines appellent discussion, n'hésite pas, tu réponds, on en parle, on avance ensemble 🤝
Quand tout sera bouclé côté code, je ferai une repasse visuelle finale en local avant de fusionner. J'y recalerai si besoin les usual suspects : espaces insécables avant les ponctuations doubles, et apostrophes françaises.
Encore mille mercis, j'ai hâte de voir cette PR finalisée et dans main !
|
|
||
| ### `<Fragment>` {/*fragment*/} | ||
|
|
||
| Wrap elements in `<Fragment>` to group them together in situations where you need a single element. Grouping elements in `Fragment` has no effect on the resulting DOM; it is the same as if the elements were not grouped. The empty JSX tag `<></>` is shorthand for `<Fragment></Fragment>` in most cases. | ||
| Englober des éléments dans un `<Fragment>` pour les grouper dans des situations ou vous avez besoin d'un seul élément. Grouper des éléments dans un `<Fragment>` n'a pas d'effet sur le DOM rendu ; c'est comme si les éléments n'étaient pas groupés. La balise vide `<></>` en JSX est utilisée la plupart du temps afin de raccourcir l'écriture de `<Fragment></Fragment>`. |
There was a problem hiding this comment.
| Englober des éléments dans un `<Fragment>` pour les grouper dans des situations ou vous avez besoin d'un seul élément. Grouper des éléments dans un `<Fragment>` n'a pas d'effet sur le DOM rendu ; c'est comme si les éléments n'étaient pas groupés. La balise vide `<></>` en JSX est utilisée la plupart du temps afin de raccourcir l'écriture de `<Fragment></Fragment>`. | |
| Enrobez des éléments dans un `<Fragment>` pour les grouper dans des situations ou vous ne devez fournir qu’un seul élément. Grouper des éléments dans un `<Fragment>` n'a pas d'effet sur le DOM résultat ; c'est comme si les éléments n'étaient pas groupés. La balise vide `<></>` en JSX est utilisée la plupart du temps comme version concise de `<Fragment></Fragment>`. |
- Enrober, du coup… (je vais pas forcément le changer partout, ça dépend si j'ai autre chose à ajuster en plus, revérifie après application des suggestions). Par ailleurs ici c'est un impératif, pas un infinitif.
- La VO n'est pas hyper claire sur le "pourquoi" on aurait besoin d'un seul élément, j'ai pris le parti de clarifier dans la VF (comme on l'a souvent fait dans les docs précédentes).
- Attention au terme "rendu", qui est connoté en React, d'autant qu'ici la VO parler de "resulting", pas de "rendered" (logique, vu qu'en React le rendering n'a rien à voir avec le DOM final). Du coup j'ai mis "résultat".
GG sur les accords et participes passés 100% corrects en revanche 👏
|
|
||
| - React does not [reset state](/learn/preserving-and-resetting-state) when you go from rendering `<><Child /></>` to `[<Child />]` or back, or when you go from rendering `<><Child /></>` to `<Child />` and back. This only works a single level deep: for example, going from `<><><Child /></></>` to `<Child />` resets the state. See the precise semantics [here.](https://gist.github.com/clemmy/b3ef00f9507909429d8aa0d3ee4f986b) | ||
| - React ne [réinitialise pas l'état](/learn/preserving-and-resetting-state) quand vous passez de rendre `<><Child /></>` à `[<Child />]` et inversement, ou ni si vous passez de rendre `<><Child /></>` à `<Child />` et inversement. Ça marche seulement à un niveau plus profond : par exemple, passer de `<><><Child /></></>` à `<Child />` réinitialise l'état. Consultez la sémantique précise [ici.](https://gist.github.com/clemmy/b3ef00f9507909429d8aa0d3ee4f986b) |
There was a problem hiding this comment.
| - React ne [réinitialise pas l'état](/learn/preserving-and-resetting-state) quand vous passez de rendre `<><Child /></>` à `[<Child />]` et inversement, ou ni si vous passez de rendre `<><Child /></>` à `<Child />` et inversement. Ça marche seulement à un niveau plus profond : par exemple, passer de `<><><Child /></></>` à `<Child />` réinitialise l'état. Consultez la sémantique précise [ici.](https://gist.github.com/clemmy/b3ef00f9507909429d8aa0d3ee4f986b) | |
| - React ne [réinitialise pas l'état](/learn/preserving-and-resetting-state) quand vous passez d'une structure `<><Child /></>` à `[<Child />]` et inversement, ni quand vous passez de `<><Child /></>` à `<Child />` et inversement. Ça ne marche qu’à un niveau de profondeur : par exemple, passer de `<><><Child /></></>` à `<Child />` réinitialise l'état. Consultez [la sémantique précise ici](https://gist.github.com/clemmy/b3ef00f9507909429d8aa0d3ee4f986b). |
- Quelques écarts de sens ("plus profond")
- "Rendre", etc.
- On évite d'utiliser des subordonnées basées sur un infinitif, on va simplifier autant que possible.
- Amélioration de l'accessibilité du lien en évitant juste "ici" comme texte (souci de la VO aussi).
|
|
||
| Here's a situation where you need to write `Fragment` explicitly instead of using the `<></>` syntax. When you [render multiple elements in a loop](/learn/rendering-lists), you need to assign a `key` to each element. If the elements within the loop are Fragments, you need to use the normal JSX element syntax in order to provide the `key` attribute: | ||
| Voici une situation ou vous avez besoin d'écrire explicitement `Fragment` plutôt que d'utiliser la syntaxe `<></>`. Quand vous [rendez plusieurs éléments dans une boucle](/learn/rendering-lists), vous avez besoin d'assigner une `key` à chaque élément. Si les éléments compris dans une boucle sont des Fragments, vous devez utiliser la syntaxe classique JSX afin de fournir l'attribut `key` : |
There was a problem hiding this comment.
| Voici une situation ou vous avez besoin d'écrire explicitement `Fragment` plutôt que d'utiliser la syntaxe `<></>`. Quand vous [rendez plusieurs éléments dans une boucle](/learn/rendering-lists), vous avez besoin d'assigner une `key` à chaque élément. Si les éléments compris dans une boucle sont des Fragments, vous devez utiliser la syntaxe classique JSX afin de fournir l'attribut `key` : | |
| Voici un cas de figure où vous devez écrire `Fragment` explicitement plutôt que d'utiliser la syntaxe `<></>`. Quand vous [affichez plusieurs éléments dans une boucle](/learn/rendering-lists), vous avez besoin d'associer une `key` à chaque élément. Si les éléments compris dans la boucle sont des Fragments, vous devez utiliser la syntaxe classique JSX afin de fournir la prop `key` : |
La VO n'est pas parfaite… Elle utilise "the" au lieu de "some" (le truc reste vrai pour tout fragment dans la liste, même si le reste est constitué d'éléments classique), et elle entretient la confusion (pas mal présente dans les nouvelles docs) entre "prop" et "attribut". Je tends à vouloir préserver le distingo historique qui réserve "attribut" aux éléments natifs et "prop" à ce qui touche à React, surtout pour les props techniques que sont key, ref et children.
| @@ -173,16 +173,16 @@ function Blog() { | |||
| } | |||
| ``` | |||
|
|
|||
| You can inspect the DOM to verify that there are no wrapper elements around the Fragment children: | |||
| Vous pouvez inspecter le DOM pour vérifier qu'il n'y a pas de balise englobante autour des enfants du Fragment : | |||
There was a problem hiding this comment.
| Vous pouvez inspecter le DOM pour vérifier qu'il n'y a pas de balise englobante autour des enfants du Fragment : | |
| Vous pouvez inspecter le DOM pour vérifier qu'il n'y a pas d'élément enrobant autour des enfants du Fragment : |
"Balise" est un terme de syntaxe. Le DOM ne contient pas de balise, que des nœuds (essentiellement texte et éléments). #ayatollah
|
|
||
| <Sandpack> | ||
|
|
||
| ```js | ||
| import { Fragment } from 'react'; | ||
|
|
||
| const posts = [ | ||
| { id: 1, title: 'An update', body: "It's been a while since I posted..." }, | ||
| { id: 2, title: 'My new blog', body: 'I am starting a new blog!' } | ||
| { id: 1, title: 'Une mise à jour', body: "Ça fait un moment que je n'ai pas posté..." }, |
There was a problem hiding this comment.
| { id: 1, title: 'Une mise à jour', body: "Ça fait un moment que je n'ai pas posté..." }, | |
| { id: 1, title: 'Des nouvelles', body: "Ça fait un moment que je n'ai pas écrit..." }, |
Cohérence avec la correction d'avant.
tdd
added
Reviewed
and removed
Pending Review
Co-authored-by: Christophe Porteneuve <[email protected]>
Size changes📦 Next.js Bundle Analysis for react-devThis analysis was generated by the Next.js Bundle Analysis action. 🤖 Three Pages Changed SizeThe following pages changed size from the code in this PR compared to its base branch:
DetailsOnly 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 Any third party scripts you have added directly to your app using the 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. |
|
Bizarrement je n'avais tous les changes dans l'onglet files 🫤 j'ai appliqué les corrections à la main mais en plusieurs commit du coup |
|
@bastiendmt ah oui super bizarre… Normalement tout marche. En tous les cas j'avais bien toutes tes prises en compte, j'ai donc mergé. J'ai fait une dernière repasse directement sur Bravo pour ta première trad intégrée en tout cas ! 👏👏👏 |
Hello, voici ma PR pour la traduction de la page "Fragment", j'espère que c'est ok, ouverte aux retours 😀