From 8ec47eacdaab529b016e7556ec865f8389e283b7 Mon Sep 17 00:00:00 2001 From: Bastien Dumont Date: Tue, 25 Apr 2023 15:27:26 +0200 Subject: [PATCH 01/12] intro --- src/content/reference/react/Fragment.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/Fragment.md b/src/content/reference/react/Fragment.md index 638450405..376d3a867 100644 --- a/src/content/reference/react/Fragment.md +++ b/src/content/reference/react/Fragment.md @@ -4,7 +4,7 @@ title: (<>...) -``, often used via `<>...` syntax, lets you group elements without a wrapper node. +``, souvent utilisé avec la syntaxe `<>...`, vous permet de grouper des éléments sans balise englobante. ```js <> From c849b3144985e6fe845ab2dda7448615bcb4401d Mon Sep 17 00:00:00 2001 From: Bastien Dumont Date: Tue, 25 Apr 2023 15:42:10 +0200 Subject: [PATCH 02/12] reference --- src/content/reference/react/Fragment.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/content/reference/react/Fragment.md b/src/content/reference/react/Fragment.md index 376d3a867..96d5105d8 100644 --- a/src/content/reference/react/Fragment.md +++ b/src/content/reference/react/Fragment.md @@ -19,11 +19,11 @@ title: (<>...) --- -## Reference {/*reference*/} +## Référence {/*reference*/} ### `` {/*fragment*/} -Wrap elements in `` 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 `` in most cases. +Englober des éléments dans un `` pour les grouper ensemble dans des situations ou vous avez besoin d'un seul élément. Grouper des éléments dans un `` n'a pas d'effet particulier sur le DOM ; c'est comme si les éléments n'étaient pas groupés. La plupart du temps, la balise vide en JSX `<>` est utilisée afin de raccourcir l'écriture de ``. #### Props {/*props*/} From c422b48869fad0f3aca0133969a84e8bd0132939 Mon Sep 17 00:00:00 2001 From: Bastien Dumont Date: Tue, 25 Apr 2023 16:34:59 +0200 Subject: [PATCH 03/12] props --- src/content/reference/react/Fragment.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/reference/react/Fragment.md b/src/content/reference/react/Fragment.md index 96d5105d8..36c772aa6 100644 --- a/src/content/reference/react/Fragment.md +++ b/src/content/reference/react/Fragment.md @@ -27,7 +27,7 @@ Englober des éléments dans un `` pour les grouper ensemble dans des #### Props {/*props*/} -- **optional** `key`: Fragments declared with the explicit `` syntax may have [keys.](/learn/rendering-lists#keeping-list-items-in-order-with-key) +- **optionnel** `key`: Les Fragments déclarés explicitement avec la syntaxe `` peuvent contenir des [keys.](/learn/rendering-lists#keeping-list-items-in-order-with-key) #### Caveats {/*caveats*/} From d0df85ed575eb512091980dbd758f205776770eb Mon Sep 17 00:00:00 2001 From: Bastien Dumont Date: Tue, 25 Apr 2023 17:19:25 +0200 Subject: [PATCH 04/12] caveats --- src/content/reference/react/Fragment.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/content/reference/react/Fragment.md b/src/content/reference/react/Fragment.md index 36c772aa6..bde2e4a84 100644 --- a/src/content/reference/react/Fragment.md +++ b/src/content/reference/react/Fragment.md @@ -29,11 +29,11 @@ Englober des éléments dans un `` pour les grouper ensemble dans des - **optionnel** `key`: Les Fragments déclarés explicitement avec la syntaxe `` peuvent contenir des [keys.](/learn/rendering-lists#keeping-list-items-in-order-with-key) -#### Caveats {/*caveats*/} +#### Limitations {/*caveats*/} -- If you want to pass `key` to a Fragment, you can't use the `<>...` syntax. You have to explicitly import `Fragment` from `'react'` and render `...`. +- Si vous souhaitez utiliser des `key` dans un Fragment, vous ne pouvez pas utiliser la syntaxe `<>...`. Vous devez explicitement importer `Fragment` depuis `'react'` et rendre `...`. -- React does not [reset state](/learn/preserving-and-resetting-state) when you go from rendering `<>` to `[]` or back, or when you go from rendering `<>` to `` and back. This only works a single level deep: for example, going from `<><>` to `` 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 `<>` à `[]` et inversement, ou ni si vous passez de rendre `<>` à `` et inversement. Ça marche seulement à un niveau plus profond : par exemple, en passer de `<><>` à `` réinitialise l'état. Consultez la sémantique précise [ici.](https://gist.github.com/clemmy/b3ef00f9507909429d8aa0d3ee4f986b) --- From fe9520925c6ba51b155947684d33a416de7c5ebe Mon Sep 17 00:00:00 2001 From: Bastien Dumont Date: Wed, 26 Apr 2023 08:43:05 +0200 Subject: [PATCH 05/12] returning multiple elements --- src/content/reference/react/Fragment.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/content/reference/react/Fragment.md b/src/content/reference/react/Fragment.md index bde2e4a84..51b39bcfa 100644 --- a/src/content/reference/react/Fragment.md +++ b/src/content/reference/react/Fragment.md @@ -37,11 +37,11 @@ Englober des éléments dans un `` pour les grouper ensemble dans des --- -## Usage {/*usage*/} +## Utilisation {/*usage*/} -### Returning multiple elements {/*returning-multiple-elements*/} +### Renvoyer plusieurs éléments {/*returning-multiple-elements*/} -Use `Fragment`, or the equivalent `<>...` syntax, to group multiple elements together. You can use it to put multiple elements in any place where a single element can go. For example, a component can only return one element, but by using a Fragment you can group multiple elements together and then return them as a group: +Utilisez `Fragment`, ou la syntaxe équivalente `<>...`, afin de grouper plusieurs éléments ensemble. Vous pouvez l'utiliser pour mettre plusieurs éléments à la place d'un élément. Par exemple, un composant ne peut d'habitude renvoyer qu'un élément unique, mais avec un Fragment vous pouvez grouper plusieurs éléments et renvoyer ce groupe : ```js {3,6} function Post() { @@ -54,7 +54,7 @@ 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 `

` and `

` 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 `

` et `

` du DOM apparaissent en tant frères et sœur sans balise englobante : @@ -62,8 +62,8 @@ Fragments are useful because grouping elements with a Fragment has no effect on export default function Blog() { return ( <> - - + + ) } From e92ad6cd781b1942f3881e1aaab4c2217e9b309d Mon Sep 17 00:00:00 2001 From: Bastien Dumont Date: Wed, 26 Apr 2023 08:48:13 +0200 Subject: [PATCH 06/12] special syntax --- src/content/reference/react/Fragment.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/content/reference/react/Fragment.md b/src/content/reference/react/Fragment.md index 51b39bcfa..b4671a25f 100644 --- a/src/content/reference/react/Fragment.md +++ b/src/content/reference/react/Fragment.md @@ -94,9 +94,9 @@ function PostBody({ body }) { -#### How to write a Fragment without the special syntax? {/*how-to-write-a-fragment-without-the-special-syntax*/} +#### Comment utiliser un Fragment sans la syntaxe spéciale ? {/*how-to-write-a-fragment-without-the-special-syntax*/} -The example above is equivalent to importing `Fragment` from React: +L'exemple ci-dessus est equivalent à importer `Fragment` depuis React : ```js {1,5,8} import { Fragment } from 'react'; @@ -111,7 +111,7 @@ function Post() { } ``` -Usually you won't need this unless you need to [pass a `key` to your `Fragment`.](#rendering-a-list-of-fragments) +Normalement vous n'aurez pas besoin d'utiliser ça à moins d'avoir besoin de [donner des `key` à votre `Fragment`.](#rendering-a-list-of-fragments) From 3ccb4f8d1a509e5a9947ac82a10489cd6ed9d394 Mon Sep 17 00:00:00 2001 From: Bastien Dumont Date: Wed, 26 Apr 2023 08:54:50 +0200 Subject: [PATCH 07/12] assign multiple elements --- src/content/reference/react/Fragment.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/content/reference/react/Fragment.md b/src/content/reference/react/Fragment.md index b4671a25f..c7eccabbc 100644 --- a/src/content/reference/react/Fragment.md +++ b/src/content/reference/react/Fragment.md @@ -117,9 +117,9 @@ Normalement vous n'aurez pas besoin d'utiliser ça à moins d'avoir besoin de [d --- -### Assigning multiple elements to a variable {/*assigning-multiple-elements-to-a-variable*/} +### Initialiser plusieurs éléments à une variable {/*assigning-multiple-elements-to-a-variable*/} -Like any other element, you can assign Fragment elements to variables, pass them as props, and so on: +Comme pour tous les autres éléments, vous pouvez initialiser un Fragment à des variables, les passer en tant que props, etc : ```js function CloseDialog() { @@ -131,7 +131,7 @@ function CloseDialog() { ); return ( - Are you sure you want to leave this page? + Êtes vous sûr de vouloir quittez cette page ? ); } From 358b9c387d9ffebecad1898f130f61425464fe61 Mon Sep 17 00:00:00 2001 From: Bastien Dumont Date: Wed, 26 Apr 2023 08:59:26 +0200 Subject: [PATCH 08/12] grouping elements with text --- src/content/reference/react/Fragment.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/content/reference/react/Fragment.md b/src/content/reference/react/Fragment.md index c7eccabbc..ad00e3777 100644 --- a/src/content/reference/react/Fragment.md +++ b/src/content/reference/react/Fragment.md @@ -139,17 +139,17 @@ function CloseDialog() { --- -### Grouping elements with text {/*grouping-elements-with-text*/} +### Englober des éléments avec du texte {/*grouping-elements-with-text*/} -You can use `Fragment` to group text together with components: +Vous pouvez utilisez `Fragment` pour grouper des textes avec des éléments : ```js function DateRangePicker({ start, end }) { return ( <> - From + De - to + à ); From b6a20219ccdeff3c7488d7631553f2eff25dd16a Mon Sep 17 00:00:00 2001 From: Bastien Dumont Date: Wed, 26 Apr 2023 13:48:46 +0200 Subject: [PATCH 09/12] rendering a list of fragments --- src/content/reference/react/Fragment.md | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/src/content/reference/react/Fragment.md b/src/content/reference/react/Fragment.md index ad00e3777..610764377 100644 --- a/src/content/reference/react/Fragment.md +++ b/src/content/reference/react/Fragment.md @@ -158,9 +158,9 @@ function DateRangePicker({ start, end }) { --- -### Rendering a list of Fragments {/*rendering-a-list-of-fragments*/} +### Rendre une liste de Fragments {/*rendering-a-list-of-fragments*/} -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 `Fragment` explicitement 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 JSX classique afin de fournir l'attribut `key` : ```js {3,6} function Blog() { @@ -173,6 +173,7 @@ function Blog() { } ``` +Vous pouvez inspecter le DOM pour vérifier qu'il n'y a pas de balise englobante autour des enfants du Fragment : You can inspect the DOM to verify that there are no wrapper elements around the Fragment children: @@ -181,8 +182,8 @@ You can inspect the DOM to verify that there are no wrapper elements around the 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é..." }, + { id: 2, title: 'Mon nouveau blog', body: 'Je démarre un nouveau blog !' } ]; export default function Blog() { From 96ef342d792088b645be11fea8dec80204944d81 Mon Sep 17 00:00:00 2001 From: Bastien Dumont Date: Wed, 26 Apr 2023 14:08:36 +0200 Subject: [PATCH 10/12] cleanup --- src/content/reference/react/Fragment.md | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/src/content/reference/react/Fragment.md b/src/content/reference/react/Fragment.md index 610764377..9cb950e8a 100644 --- a/src/content/reference/react/Fragment.md +++ b/src/content/reference/react/Fragment.md @@ -23,7 +23,7 @@ title: (<>...) ### `` {/*fragment*/} -Englober des éléments dans un `` pour les grouper ensemble dans des situations ou vous avez besoin d'un seul élément. Grouper des éléments dans un `` n'a pas d'effet particulier sur le DOM ; c'est comme si les éléments n'étaient pas groupés. La plupart du temps, la balise vide en JSX `<>` est utilisée afin de raccourcir l'écriture de ``. +Englober des éléments dans un `` pour les grouper dans des situations ou vous avez besoin d'un seul élément. Grouper des éléments dans un `` 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 ``. #### Props {/*props*/} @@ -33,7 +33,7 @@ Englober des éléments dans un `` pour les grouper ensemble dans des - Si vous souhaitez utiliser des `key` dans un Fragment, vous ne pouvez pas utiliser la syntaxe `<>...`. Vous devez explicitement importer `Fragment` depuis `'react'` et rendre `...`. -- React ne [réinitialise pas l'état](/learn/preserving-and-resetting-state) quand vous passez de rendre `<>` à `[]` et inversement, ou ni si vous passez de rendre `<>` à `` et inversement. Ça marche seulement à un niveau plus profond : par exemple, en passer de `<><>` à `` 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 de rendre `<>` à `[]` et inversement, ou ni si vous passez de rendre `<>` à `` et inversement. Ça marche seulement à un niveau plus profond : par exemple, passer de `<><>` à `` réinitialise l'état. Consultez la sémantique précise [ici.](https://gist.github.com/clemmy/b3ef00f9507909429d8aa0d3ee4f986b) --- @@ -41,7 +41,7 @@ Englober des éléments dans un `` pour les grouper ensemble dans des ### Renvoyer plusieurs éléments {/*returning-multiple-elements*/} -Utilisez `Fragment`, ou la syntaxe équivalente `<>...`, afin de grouper plusieurs éléments ensemble. Vous pouvez l'utiliser pour mettre plusieurs éléments à la place d'un élément. Par exemple, un composant ne peut d'habitude renvoyer qu'un élément unique, mais avec un Fragment vous pouvez grouper plusieurs éléments et renvoyer ce groupe : +Utilisez `Fragment`, ou la syntaxe équivalente `<>...`, afin de grouper plusieurs éléments ensemble. Vous pouvez l'utiliser pour mettre plusieurs éléments à la place d'un élément. Par exemple, un composant ne peut renvoyer qu'un élément unique, mais avec un Fragment vous pouvez grouper plusieurs éléments et renvoyer ce groupe : ```js {3,6} function Post() { @@ -160,7 +160,7 @@ function DateRangePicker({ start, end }) { ### Rendre une liste de Fragments {/*rendering-a-list-of-fragments*/} -Voici une situation ou vous avez besoin d'écrire `Fragment` explicitement 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 JSX classique afin de fournir l'attribut `key` : +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` : ```js {3,6} function Blog() { @@ -174,7 +174,6 @@ function Blog() { ``` Vous pouvez inspecter le DOM pour vérifier qu'il n'y a pas de balise englobante autour des enfants du Fragment : -You can inspect the DOM to verify that there are no wrapper elements around the Fragment children: From c986e06ac1297586c294643b511b49e2a3938f29 Mon Sep 17 00:00:00 2001 From: Bastien Dumont Date: Wed, 26 Apr 2023 16:59:21 +0200 Subject: [PATCH 11/12] replace apostrophe --- src/content/reference/react/Fragment.md | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/src/content/reference/react/Fragment.md b/src/content/reference/react/Fragment.md index 9cb950e8a..195944d69 100644 --- a/src/content/reference/react/Fragment.md +++ b/src/content/reference/react/Fragment.md @@ -23,7 +23,7 @@ title: (<>...) ### `` {/*fragment*/} -Englober des éléments dans un `` pour les grouper dans des situations ou vous avez besoin d'un seul élément. Grouper des éléments dans un `` 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 ``. +Englober des éléments dans un `` pour les grouper dans des situations ou vous avez besoin d’un seul élément. Grouper des éléments dans un `` 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 ``. #### Props {/*props*/} @@ -33,7 +33,7 @@ Englober des éléments dans un `` pour les grouper dans des situation - Si vous souhaitez utiliser des `key` dans un Fragment, vous ne pouvez pas utiliser la syntaxe `<>...`. Vous devez explicitement importer `Fragment` depuis `'react'` et rendre `...`. -- React ne [réinitialise pas l'état](/learn/preserving-and-resetting-state) quand vous passez de rendre `<>` à `[]` et inversement, ou ni si vous passez de rendre `<>` à `` et inversement. Ça marche seulement à un niveau plus profond : par exemple, passer de `<><>` à `` 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 de rendre `<>` à `[]` et inversement, ou ni si vous passez de rendre `<>` à `` et inversement. Ça marche seulement à un niveau plus profond : par exemple, passer de `<><>` à `` réinitialise l’état. Consultez la sémantique précise [ici.](https://gist.github.com/clemmy/b3ef00f9507909429d8aa0d3ee4f986b) --- @@ -41,7 +41,7 @@ Englober des éléments dans un `` pour les grouper dans des situation ### Renvoyer plusieurs éléments {/*returning-multiple-elements*/} -Utilisez `Fragment`, ou la syntaxe équivalente `<>...`, afin de grouper plusieurs éléments ensemble. Vous pouvez l'utiliser pour mettre plusieurs éléments à la place d'un élément. Par exemple, un composant ne peut renvoyer qu'un élément unique, mais avec un Fragment vous pouvez grouper plusieurs éléments et renvoyer ce groupe : +Utilisez `Fragment`, ou la syntaxe équivalente `<>...`, afin de grouper plusieurs éléments ensemble. Vous pouvez l’utiliser pour mettre plusieurs éléments à la place d’un élément. Par exemple, un composant ne peut renvoyer qu’un élément unique, mais avec un Fragment vous pouvez grouper plusieurs éléments et renvoyer ce groupe : ```js {3,6} function Post() { @@ -54,7 +54,7 @@ function Post() { } ``` -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 `

` et `

` du DOM apparaissent en tant frères et sœur sans balise englobante : +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 `

` et `

` du DOM apparaissent en tant frères et sœur sans balise englobante : @@ -62,7 +62,7 @@ Les Fragments sont utiles car grouper des éléments avec un Fragment n'as pas d export default function Blog() { return ( <> - + ) @@ -96,7 +96,7 @@ function PostBody({ body }) { #### Comment utiliser un Fragment sans la syntaxe spéciale ? {/*how-to-write-a-fragment-without-the-special-syntax*/} -L'exemple ci-dessus est equivalent à importer `Fragment` depuis React : +L’exemple ci-dessus est equivalent à importer `Fragment` depuis React : ```js {1,5,8} import { Fragment } from 'react'; @@ -111,7 +111,7 @@ function Post() { } ``` -Normalement vous n'aurez pas besoin d'utiliser ça à moins d'avoir besoin de [donner des `key` à votre `Fragment`.](#rendering-a-list-of-fragments) +Normalement vous n’aurez pas besoin d’utiliser ça à moins d’avoir besoin de [donner des `key` à votre `Fragment`.](#rendering-a-list-of-fragments) @@ -160,7 +160,7 @@ function DateRangePicker({ start, end }) { ### Rendre une liste de Fragments {/*rendering-a-list-of-fragments*/} -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 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` : ```js {3,6} function Blog() { @@ -173,7 +173,7 @@ function Blog() { } ``` -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 de balise englobante autour des enfants du Fragment : @@ -181,7 +181,7 @@ Vous pouvez inspecter le DOM pour vérifier qu'il n'y a pas de balise englobante import { Fragment } from 'react'; const posts = [ - { id: 1, title: 'Une mise à jour', body: "Ça fait un moment que je n'ai pas posté..." }, + { id: 1, title: 'Une mise à jour', body: 'Ça fait un moment que je n’ai pas posté...' }, { id: 2, title: 'Mon nouveau blog', body: 'Je démarre un nouveau blog !' } ]; From 6aba69b2a1c296ef1c67e28c327ed6b1b4300e95 Mon Sep 17 00:00:00 2001 From: Bastien Dumont <32489032+bastiendmt@users.noreply.github.com> Date: Thu, 27 Apr 2023 12:44:20 +0200 Subject: [PATCH 12/12] Apply suggestions from code review Co-authored-by: Christophe Porteneuve --- src/content/reference/react/Fragment.md | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/src/content/reference/react/Fragment.md b/src/content/reference/react/Fragment.md index 195944d69..7a799963b 100644 --- a/src/content/reference/react/Fragment.md +++ b/src/content/reference/react/Fragment.md @@ -4,7 +4,7 @@ title: (<>...) -``, souvent utilisé avec la syntaxe `<>...`, vous permet de grouper des éléments sans balise englobante. +``, qu’on utilise souvent *via* la syntaxe `<>...`, vous permet de grouper des éléments sans balise enrobante. ```js <> @@ -27,11 +27,11 @@ Englober des éléments dans un `` pour les grouper dans des situation #### Props {/*props*/} -- **optionnel** `key`: Les Fragments déclarés explicitement avec la syntaxe `` peuvent contenir des [keys.](/learn/rendering-lists#keeping-list-items-in-order-with-key) +- `key` **optionnel** : les fragments déclarés explicitement avec la syntaxe `` peuvent avoir une [keys](/learn/rendering-lists#keeping-list-items-in-order-with-key). #### Limitations {/*caveats*/} -- Si vous souhaitez utiliser des `key` dans un Fragment, vous ne pouvez pas utiliser la syntaxe `<>...`. Vous devez explicitement importer `Fragment` depuis `'react'` et rendre `...`. +- Si vous souhaitez utiliser une `key` dans un Fragment, vous ne pouvez pas utiliser la syntaxe `<>...`. Vous devez explicitement importer `Fragment` depuis `'react'` et écrire `...`. - React ne [réinitialise pas l’état](/learn/preserving-and-resetting-state) quand vous passez de rendre `<>` à `[]` et inversement, ou ni si vous passez de rendre `<>` à `` et inversement. Ça marche seulement à un niveau plus profond : par exemple, passer de `<><>` à `` réinitialise l’état. Consultez la sémantique précise [ici.](https://gist.github.com/clemmy/b3ef00f9507909429d8aa0d3ee4f986b) @@ -117,9 +117,9 @@ Normalement vous n’aurez pas besoin d’utiliser ça à moins d’avoir besoin --- -### Initialiser plusieurs éléments à une variable {/*assigning-multiple-elements-to-a-variable*/} +### Affecter plusieurs éléments à une variable {/*assigning-multiple-elements-to-a-variable*/} -Comme pour tous les autres éléments, vous pouvez initialiser un Fragment à des variables, les passer en tant que props, etc : +Comme pour tous les autres éléments, vous pouvez affecter des Fragment à des variables, les passer en tant que props, etc. : ```js function CloseDialog() { @@ -131,7 +131,7 @@ function CloseDialog() { ); return ( - Êtes vous sûr de vouloir quittez cette page ? + Êtes vous sûr·e de vouloir quitter cette page ? ); } @@ -139,9 +139,9 @@ function CloseDialog() { --- -### Englober des éléments avec du texte {/*grouping-elements-with-text*/} +### Grouper des éléments et du texte {/*grouping-elements-with-text*/} -Vous pouvez utilisez `Fragment` pour grouper des textes avec des éléments : +Vous pouvez utiliser `Fragment` pour grouper du texte et des éléments : ```js function DateRangePicker({ start, end }) { @@ -158,7 +158,7 @@ function DateRangePicker({ start, end }) { --- -### Rendre une liste de Fragments {/*rendering-a-list-of-fragments*/} +### Afficher une liste de Fragments {/*rendering-a-list-of-fragments*/} 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` :