From 8d305bbae075a6f90b614a0151e575c02f83d45d Mon Sep 17 00:00:00 2001 From: Yann Birba Date: Thu, 8 Jun 2023 20:59:45 +0200 Subject: [PATCH 1/3] translation: importing-and-exporting-components page --- .../docs/illustrations/i_import-export.svg | 6 +- .../importing-and-exporting-components.md | 139 +++++++++--------- src/sidebarLearn.json | 2 +- 3 files changed, 73 insertions(+), 74 deletions(-) diff --git a/public/images/docs/illustrations/i_import-export.svg b/public/images/docs/illustrations/i_import-export.svg index eb62e2b8c..766c05ce2 100644 --- a/public/images/docs/illustrations/i_import-export.svg +++ b/public/images/docs/illustrations/i_import-export.svg @@ -69,10 +69,10 @@ Component.js - one default export + un export par défaut - multiple named exports + plusieurs exports nommés @@ -95,6 +95,6 @@ export default function FriendsList() { ... } - named export(s)and one default export + exports nomméset un export par défaut diff --git a/src/content/learn/importing-and-exporting-components.md b/src/content/learn/importing-and-exporting-components.md index f8f55605c..10af7df75 100644 --- a/src/content/learn/importing-and-exporting-components.md +++ b/src/content/learn/importing-and-exporting-components.md @@ -1,26 +1,26 @@ --- -title: Importing and Exporting Components +title: Importer et exporter des composants --- -The magic of components lies in their reusability: you can create components that are composed of other components. But as you nest more and more components, it often makes sense to start splitting them into different files. This lets you keep your files easy to scan and reuse components in more places. +La magie des composants réside dans leur réutilisabilité : vous pouvez créer des composants qui sont composés d’autres composants. Mais plus vous imbriquez de composants, plus il est souvent judicieux de les diviser en différents fichiers. Cela vous permet de garder vos fichiers faciles à analyser et de réutiliser les composants à plus d’endroits. -* What a root component file is -* How to import and export a component -* When to use default and named imports and exports -* How to import and export multiple components from one file -* How to split components into multiple files +* Qu’est-ce qu’un fichier de composant racine +* Comment importer et exporter un composant +* Quand utiliser les imports/exports par défaut et nommés +* Comment importer et exporter plusieurs composants à partir d’un seul fichier +* Comment diviser les composants en plusieurs fichiers -## The root component file {/*the-root-component-file*/} +## Le fichier de composant racine{/*the-root-component-file*/} -In [Your First Component](/learn/your-first-component), you made a `Profile` component and a `Gallery` component that renders it: +Dans [Votre premier composant](/learn/your-first-component), vous avez créé un composant `Profile` et un composant `Gallery`, en voici le code : @@ -37,7 +37,7 @@ function Profile() { export default function Gallery() { return (
-

Amazing scientists

+

Scientifiques de renom

@@ -52,17 +52,17 @@ img { margin: 0 10px 10px 0; height: 90px; } -These currently live in a **root component file,** named `App.js` in this example. In [Create React App](https://create-react-app.dev/), your app lives in `src/App.js`. Depending on your setup, your root component could be in another file, though. If you use a framework with file-based routing, such as Next.js, your root component will be different for every page. +Ces composants sont déclarés dans un **fichier de composant racine,** nommé `App.js` dans cet exemple. Si vous utilisez [Create React App](https://create-react-app.dev/), votre application se trouve dans `src/App.js`. Selon votre configuration, votre composant racine pourrait être dans un autre fichier. Si vous utilisez un framework avec un système routage basé sur les fichiers, comme Next.js, votre composant racine sera différent pour chaque page. -## Exporting and importing a component {/*exporting-and-importing-a-component*/} +## Exporter et importer un composant{/*exporting-and-importing-a-component*/} -What if you want to change the landing screen in the future and put a list of science books there? Or place all the profiles somewhere else? It makes sense to move `Gallery` and `Profile` out of the root component file. This will make them more modular and reusable in other files. You can move a component in three steps: +Et si vous souhaitiez changer l’écran d’accueil à l’avenir et y mettre une liste de livres de science ? Ou encore placer tous les profils ailleurs ? Il est logique de déplacer `Gallery` et `Profile` en dehors du fichier de composant racine. Cela les rendra plus modulaires et réutilisables dans d’autres fichiers. Il est possible déplacer un composant en trois étapes : -1. **Make** a new JS file to put the components in. -2. **Export** your function component from that file (using either [default](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/export#using_the_default_export) or [named](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/export#using_named_exports) exports). -3. **Import** it in the file where you’ll use the component (using the corresponding technique for importing [default](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/import#importing_defaults) or [named](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/import#import_a_single_export_from_a_module) exports). +1. **Créer** un nouveau fichier JS pour y mettre les composants. +2. **Exporter** votre fonction composant de ce fichier (en utilisant soit les exports [par défaut](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Statements/export#using_the_default_export) ou [nommés](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Statements/export#using_named_exports)). +3. **Importer** le dans le fichier où vous utiliserez le composant (en utilisant la technique correspondante pour importer les exports [par défaut](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Statements/import#importing_defaults) ou [nommés](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Statements/import#import_a_single_export_from_a_module)). -Here both `Profile` and `Gallery` have been moved out of `App.js` into a new file called `Gallery.js`. Now you can change `App.js` to import `Gallery` from `Gallery.js`: +Maintenant que les deux composants `Profile` et `Gallery` ont été déplacés du fichier `App.js` vers un nouveau fichier `Gallery.js`, Vous pouvez modifier `App.js` pour importer le composant `Gallery` depuis `Gallery.js` : @@ -89,7 +89,7 @@ function Profile() { export default function Gallery() { return (
-

Amazing scientists

+

Scientifiques de renom

@@ -104,60 +104,59 @@ img { margin: 0 10px 10px 0; height: 90px; } -Notice how this example is broken down into two component files now: +Cet exemple est maintenant divisé en deux fichiers de composants : 1. `Gallery.js`: - - Defines the `Profile` component which is only used within the same file and is not exported. - - Exports the `Gallery` component as a **default export.** + * Définit le composant `Profile` qui n’est utilisé que dans le même fichier et n’est pas exporté. + * Exporte le composant `Gallery` en tant qu’**export par défaut**. 2. `App.js`: - - Imports `Gallery` as a **default import** from `Gallery.js`. - - Exports the root `App` component as a **default export.** - + * Importe `Gallery` en tant qu’**import par défaut** depuis `Gallery.js`. + * Exporte le composant racine `App` en tant qu’**export par défaut**. -You may encounter files that leave off the `.js` file extension like so: +Il se peut que vous rencontriez des fichiers qui omettent l’extension `.js` comme ceci : -```js +```js import Gallery from './Gallery'; ``` -Either `'./Gallery.js'` or `'./Gallery'` will work with React, though the former is closer to how [native ES Modules](https://developer.mozilla.org/docs/Web/JavaScript/Guide/Modules) work. +`'./Gallery.js'` ou `'./Gallery'` fonctionneront tous les deux avec React, bien que le premier soit plus proche de la façon dont fonctionnent les [modules natifs ES](https://developer.mozilla.org/fr/docs/Web/JavaScript/Guide/Modules). -#### Default vs named exports {/*default-vs-named-exports*/} +#### Les Exports par défaut versus les exports nommés {/*default-vs-named-exports*/} -There are two primary ways to export values with JavaScript: default exports and named exports. So far, our examples have only used default exports. But you can use one or both of them in the same file. **A file can have no more than one _default_ export, but it can have as many _named_ exports as you like.** +Il existe deux façons principales d’exporter des valeurs avec JavaScript : les exports par défaut et les exports nommés. Jusqu’à présent, nos exemples n’ont utilisé que des exports par défaut. Mais vous pouvez utiliser l’un ou l’autre, ou les deux, dans le même fichier. **Un fichier ne peut avoir qu’un seul export *par défaut*, mais il peut avoir autant d’exports *nommés* que vous le souhaitez.** -![Default and named exports](/images/docs/illustrations/i_import-export.svg) +![Exports par défaut et nommés](/images/docs/illustrations/i_import-export.svg) -How you export your component dictates how you must import it. You will get an error if you try to import a default export the same way you would a named export! This chart can help you keep track: +La manière dont vous exportez votre composant dicte la manière dont vous devez l’importer. Vous obtiendrez une erreur si vous essayez d’importer un export par défaut de la même manière que vous le feriez avec un export nommé ! Ce tableau peut vous aider à vous y retrouver : -| Syntax | Export statement | Import statement | +| Syntaxe | Déclaration d’exportation | Déclaration d’importation | | ----------- | ----------- | ----------- | -| Default | `export default function Button() {}` | `import Button from './Button.js';` | -| Named | `export function Button() {}` | `import { Button } from './Button.js';` | +| Par défaut | `export default function Button() {}` | `import Button from './Button.js';` | +| Nommé | `export function Button() {}` | `import { Button } from './Button.js';` | -When you write a _default_ import, you can put any name you want after `import`. For example, you could write `import Banana from './Button.js'` instead and it would still provide you with the same default export. In contrast, with named imports, the name has to match on both sides. That's why they are called _named_ imports! +Lorsque vous utilisez un *import par défaut*, vous pouvez mettre n’importe quel nom après `import`. Par exemple, vous pourriez écrire `import Banana from './Button.js'` et cela vous fournirait toujours la même exportation par défaut. En revanche, avec les imports nommés, le nom doit correspondre des deux côtés. C'est pour ça qu'on les appelent les imports *nommés*. -**People often use default exports if the file exports only one component, and use named exports if it exports multiple components and values.** Regardless of which coding style you prefer, always give meaningful names to your component functions and the files that contain them. Components without names, like `export default () => {}`, are discouraged because they make debugging harder. +**On utilise souvent les exports par défaut si le fichier n’exporte qu’un seul composant, et les exports nommés si l'on souhaite exporter plusieurs composants et valeurs.** Quel que soit le style de développement que vous préférez, donnez toujours des noms significatifs à vos fonctions composants et aux fichiers qui les contiennent. Les composants sans noms, comme `export default () => {}`, sont découragés car ils rendent le débogage plus difficile. -## Exporting and importing multiple components from the same file {/*exporting-and-importing-multiple-components-from-the-same-file*/} +## Exporter et importer plusieurs composants depuis le même fichier {/*exporting-and-importing-multiple-components-from-the-same-file*/} -What if you want to show just one `Profile` instead of a gallery? You can export the `Profile` component, too. But `Gallery.js` already has a *default* export, and you can't have _two_ default exports. You could create a new file with a default export, or you could add a *named* export for `Profile`. **A file can only have one default export, but it can have numerous named exports!** +Et si vous vouliez afficher un seul `Profile` au lieu d’une galerie ? Vous pouvez également exporter le composant `Profile`. Mais `Gallery.js` a déjà un export *par défaut*, et vous ne pouvez pas en avoir *deux* dans un même fichier. Dans ce cas, vous pouvez créer un nouveau fichier avec un export par défaut, ou ajouter un export *nommé* pour le composant `Profile`. **Un fichier ne peut avoir qu’un seul export par défaut, mais il peut avoir de nombreux exports nommés !** -To reduce the potential confusion between default and named exports, some teams choose to only stick to one style (default or named), or avoid mixing them in a single file. Do what works best for you! +Pour réduire la confusion potentielle entre les exports par défaut et nommés, certaines équipes choisissent de ne s’en tenir qu’à un seul style (par défaut ou nommé), ou évitent simplement de les mélanger dans un seul fichier. Faites ce qui vous convient le mieux ! -First, **export** `Profile` from `Gallery.js` using a named export (no `default` keyword): +Tout d’abord, **exportez** `Profile` depuis `Gallery.js` en utilisant un export nommé (sans le mot-clé `default`) : ```js export function Profile() { @@ -165,13 +164,13 @@ export function Profile() { } ``` -Then, **import** `Profile` from `Gallery.js` to `App.js` using a named import (with the curly braces): +Puis, **importez** `Profile` depuis `Gallery.js` vers `App.js` en utilisant un import nommé (avec les accolades) : ```js import { Profile } from './Gallery.js'; ``` -Finally, **render** `` from the `App` component: +Enfin, **Affichez** `` depuis le composant `App` : ```js export default function App() { @@ -179,7 +178,7 @@ export default function App() { } ``` -Now `Gallery.js` contains two exports: a default `Gallery` export, and a named `Profile` export. `App.js` imports both of them. Try editing `` to `` and back in this example: +Désormais, `Gallery.js` contient deux exports : un export par défaut : `Gallery`, et un export nommé : `Profile`. `App.js` les importe maintenant les 2 composants. Essayez d’éditer `` en `` et inversement dans cet exemple : @@ -207,7 +206,7 @@ export function Profile() { export default function Gallery() { return (
-

Amazing scientists

+

Scientifiques de renom

@@ -222,24 +221,24 @@ img { margin: 0 10px 10px 0; height: 90px; } -Now you're using a mix of default and named exports: +Dorénavant, vous utilisez un mélange d’exports par défaut et nommés : * `Gallery.js`: - - Exports the `Profile` component as a **named export called `Profile`.** - - Exports the `Gallery` component as a **default export.** + * Exporte le composant `Profile` en tant qu’**export nommé appelé `Profile`.** + * Exporte le composant `Gallery` en tant qu’**export par défaut.** * `App.js`: - - Imports `Profile` as a **named import called `Profile`** from `Gallery.js`. - - Imports `Gallery` as a **default import** from `Gallery.js`. - - Exports the root `App` component as a **default export.** + * Importe `Profile` en tant qu’**import nommé appelé `Profile`** depuis `Gallery.js`. + * Importe `Gallery` en tant qu’**import par défaut** depuis `Gallery.js`. + * Exporte le composant racine `App` en tant qu’**export par défaut.** -On this page you learned: +Dans cette page, vous avez appris : -* What a root component file is -* How to import and export a component -* When and how to use default and named imports and exports -* How to export multiple components from the same file +* Qu’est-ce qu’un fichier de composant racine +* Comment importer et exporter un composant +* Comment et quand utiliser les imports/exports par défaut et nommés +* Comment importer plusieurs composants depuis le même fichier @@ -247,22 +246,22 @@ On this page you learned: -#### Split the components further {/*split-the-components-further*/} +#### Séparer les composants davantage {/*split-the-components-further*/} -Currently, `Gallery.js` exports both `Profile` and `Gallery`, which is a bit confusing. +Actuellement, `Gallery.js` exporte à la fois `Profile` et `Gallery`, ce qui est un peu confus. -Move the `Profile` component to its own `Profile.js`, and then change the `App` component to render both `` and `` one after another. +Déplacez le composant `Profile` vers son propre fichier `Profile.js`, puis modifiez le composant `App` pour qu’il affiche à la fois `` et `` l'un après l’autre. -You may use either a default or a named export for `Profile`, but make sure that you use the corresponding import syntax in both `App.js` and `Gallery.js`! You can refer to the table from the deep dive above: +Vous devrier utiliser soit un export par défaut, soit un export nommé pour le composant `Profile`, mais assurez-vous d’utiliser la syntaxe d’importation correspondante dans `App.js` et `Gallery.js` ! N'hésitez pas à vous référer au tableau de la partie "En détail" ci-dessus : -| Syntax | Export statement | Import statement | +| Syntaxe | Déclaration d’exportation | Déclaration d’importation | | ----------- | ----------- | ----------- | -| Default | `export default function Button() {}` | `import Button from './Button.js';` | -| Named | `export function Button() {}` | `import { Button } from './Button.js';` | +| Par défaut | `export default function Button() {}` | `import Button from './Button.js';` | +| Nommé | `export function Button() {}` | `import { Button } from './Button.js';` | -Don't forget to import your components where they are called. Doesn't `Gallery` use `Profile`, too? +N’oublier pas d’importer vos composants là où ils sont appelés. `Gallery` n’utilise-t-il pas aussi `Profile` ? @@ -282,7 +281,7 @@ export default function App() { ``` ```js Gallery.js active -// Move me to Profile.js! +// Déplace-moi vers Profile.js ! export function Profile() { return ( -

Amazing scientists

+

Scientifiques de renom

@@ -313,11 +312,11 @@ img { margin: 0 10px 10px 0; height: 90px; } -After you get it working with one kind of exports, make it work with the other kind. +Après avoir réussi à faire fonctionner votre composant avec un type d’export, faites-le fonctionner avec l’autre type. -This is the solution with named exports: +Voici la solution avec les exports nommés : @@ -341,7 +340,7 @@ import { Profile } from './Profile.js'; export default function Gallery() { return (
-

Amazing scientists

+

Scientifiques de renom

@@ -367,7 +366,7 @@ img { margin: 0 10px 10px 0; height: 90px; } -This is the solution with default exports: +Voici la solution avec les exports par défaut : @@ -391,7 +390,7 @@ import Profile from './Profile.js'; export default function Gallery() { return (
-

Amazing scientists

+

Scientifiques de renom

diff --git a/src/sidebarLearn.json b/src/sidebarLearn.json index 4d62faba5..6f40f1ead 100644 --- a/src/sidebarLearn.json +++ b/src/sidebarLearn.json @@ -56,7 +56,7 @@ "path": "/learn/your-first-component" }, { - "title": "Importing and Exporting Components", + "title": "Importer et exporter des composants", "path": "/learn/importing-and-exporting-components" }, { From cb4cde38c721cfd0127a1e4f52c74f10f8d82953 Mon Sep 17 00:00:00 2001 From: Yann <66469030+YannBirba@users.noreply.github.com> Date: Thu, 15 Jun 2023 22:24:56 +0200 Subject: [PATCH 2/3] fix: apply suggestions of @tdd Co-authored-by: Christophe Porteneuve --- .../importing-and-exporting-components.md | 66 +++++++++---------- 1 file changed, 33 insertions(+), 33 deletions(-) diff --git a/src/content/learn/importing-and-exporting-components.md b/src/content/learn/importing-and-exporting-components.md index 10af7df75..4f2f61ec8 100644 --- a/src/content/learn/importing-and-exporting-components.md +++ b/src/content/learn/importing-and-exporting-components.md @@ -4,7 +4,7 @@ title: Importer et exporter des composants -La magie des composants réside dans leur réutilisabilité : vous pouvez créer des composants qui sont composés d’autres composants. Mais plus vous imbriquez de composants, plus il est souvent judicieux de les diviser en différents fichiers. Cela vous permet de garder vos fichiers faciles à analyser et de réutiliser les composants à plus d’endroits. +La magie des composants réside dans leur réutilisabilité : vous pouvez créer des composants qui sont composés d’autres composants. Mais plus vous imbriquez de composants, plus il devient judicieux de les répartir en différents fichiers. Ça vous permet de garder vos fichiers faciles à analyser et de réutiliser les composants à davantage d’endroits. @@ -14,13 +14,13 @@ La magie des composants réside dans leur réutilisabilité : vous pouvez créer * Comment importer et exporter un composant * Quand utiliser les imports/exports par défaut et nommés * Comment importer et exporter plusieurs composants à partir d’un seul fichier -* Comment diviser les composants en plusieurs fichiers +* Comment découper les composants en plusieurs fichiers -## Le fichier de composant racine{/*the-root-component-file*/} +## Le fichier de composant racine {/*the-root-component-file*/} -Dans [Votre premier composant](/learn/your-first-component), vous avez créé un composant `Profile` et un composant `Gallery`, en voici le code : +Dans [Votre premier composant](/learn/your-first-component), vous avez créé un composant `Profile` et un composant `Gallery` qui l'affiche : @@ -52,17 +52,17 @@ img { margin: 0 10px 10px 0; height: 90px; } -Ces composants sont déclarés dans un **fichier de composant racine,** nommé `App.js` dans cet exemple. Si vous utilisez [Create React App](https://create-react-app.dev/), votre application se trouve dans `src/App.js`. Selon votre configuration, votre composant racine pourrait être dans un autre fichier. Si vous utilisez un framework avec un système routage basé sur les fichiers, comme Next.js, votre composant racine sera différent pour chaque page. +Ces composants sont actuellement déclarés dans un **fichier de composant racine**, nommé `App.js` dans cet exemple. Si vous utilisez [Create React App](https://create-react-app.dev/), votre appli se trouve dans `src/App.js`. Selon votre configuration, votre composant racine pourrait toutefois être dans un autre fichier. Si vous utilisez un framework avec un système de routage basé sur les fichiers, comme Next.js, votre composant racine sera différent pour chaque page. -## Exporter et importer un composant{/*exporting-and-importing-a-component*/} +## Exporter et importer un composant {/*exporting-and-importing-a-component*/} -Et si vous souhaitiez changer l’écran d’accueil à l’avenir et y mettre une liste de livres de science ? Ou encore placer tous les profils ailleurs ? Il est logique de déplacer `Gallery` et `Profile` en dehors du fichier de composant racine. Cela les rendra plus modulaires et réutilisables dans d’autres fichiers. Il est possible déplacer un composant en trois étapes : +Et si vous souhaitiez changer l’écran d’accueil à l’avenir et y mettre une liste de livres de science ? Ou encore placer tous les profils ailleurs ? Il est logique de déplacer `Gallery` et `Profile` en dehors du fichier de composant racine. Ça les rendra plus modulaires et réutilisables par d’autres fichiers. Vous pouvez déplacer un composant en trois étapes : -1. **Créer** un nouveau fichier JS pour y mettre les composants. -2. **Exporter** votre fonction composant de ce fichier (en utilisant soit les exports [par défaut](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Statements/export#using_the_default_export) ou [nommés](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Statements/export#using_named_exports)). -3. **Importer** le dans le fichier où vous utiliserez le composant (en utilisant la technique correspondante pour importer les exports [par défaut](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Statements/import#importing_defaults) ou [nommés](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Statements/import#import_a_single_export_from_a_module)). +1. **Créez** un nouveau fichier JS pour y mettre les composants. +2. **Exportez** votre fonction composant à partir de ce fichier (en utilisant soit les exports [par défaut](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Statements/export#utilisation_dexports_par_d%C3%A9faut) soit les exports [nommés](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Statements/export#utilisation_dexports_nomm%C3%A9s)). +3. **Importez-la** dans le fichier qui utilisera le composant (en utilisant la technique correspondante pour importer les exports [par défaut](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Statements/import#importation_des_d%C3%A9fauts) ou [nommés](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Statements/import#importer_un_seul_export_depuis_un_module)). -Maintenant que les deux composants `Profile` et `Gallery` ont été déplacés du fichier `App.js` vers un nouveau fichier `Gallery.js`, Vous pouvez modifier `App.js` pour importer le composant `Gallery` depuis `Gallery.js` : +À présent que les deux composants `Profile` et `Gallery` ont été déplacés du fichier `App.js` vers un nouveau fichier `Gallery.js`, Vous pouvez modifier `App.js` pour importer le composant `Gallery` depuis `Gallery.js` : @@ -104,10 +104,10 @@ img { margin: 0 10px 10px 0; height: 90px; } -Cet exemple est maintenant divisé en deux fichiers de composants : +Voyez comme cet exemple est désormais découpé en deux fichiers de composants : 1. `Gallery.js`: - * Définit le composant `Profile` qui n’est utilisé que dans le même fichier et n’est pas exporté. + * Définit le composant `Profile` qui n’est utilisé qu'au sein de ce même fichier et n’est pas exporté. * Exporte le composant `Gallery` en tant qu’**export par défaut**. 2. `App.js`: * Importe `Gallery` en tant qu’**import par défaut** depuis `Gallery.js`. @@ -121,28 +121,28 @@ Il se peut que vous rencontriez des fichiers qui omettent l’extension `.js` co import Gallery from './Gallery'; ``` -`'./Gallery.js'` ou `'./Gallery'` fonctionneront tous les deux avec React, bien que le premier soit plus proche de la façon dont fonctionnent les [modules natifs ES](https://developer.mozilla.org/fr/docs/Web/JavaScript/Guide/Modules). +`'./Gallery.js'` ou `'./Gallery'` fonctionneront tous les deux avec React, bien que la première syntaxe soit plus proche du fonctionnement des [modules ES natifs](https://developer.mozilla.org/fr/docs/Web/JavaScript/Guide/Modules). -#### Les Exports par défaut versus les exports nommés {/*default-vs-named-exports*/} +#### Exports par défaut vs. exports nommés {/*default-vs-named-exports*/} Il existe deux façons principales d’exporter des valeurs avec JavaScript : les exports par défaut et les exports nommés. Jusqu’à présent, nos exemples n’ont utilisé que des exports par défaut. Mais vous pouvez utiliser l’un ou l’autre, ou les deux, dans le même fichier. **Un fichier ne peut avoir qu’un seul export *par défaut*, mais il peut avoir autant d’exports *nommés* que vous le souhaitez.** ![Exports par défaut et nommés](/images/docs/illustrations/i_import-export.svg) -La manière dont vous exportez votre composant dicte la manière dont vous devez l’importer. Vous obtiendrez une erreur si vous essayez d’importer un export par défaut de la même manière que vous le feriez avec un export nommé ! Ce tableau peut vous aider à vous y retrouver : +La manière dont vous exportez votre composant dicte la manière dont vous devez l’importer. Vous obtiendrez une erreur si vous essayez d’importer un export par défaut de la même manière que vous le feriez pour un export nommé ! Ce tableau peut vous aider à vous y retrouver : -| Syntaxe | Déclaration d’exportation | Déclaration d’importation | +| Syntaxe | Déclaration d’export | Déclaration d’import | | ----------- | ----------- | ----------- | | Par défaut | `export default function Button() {}` | `import Button from './Button.js';` | | Nommé | `export function Button() {}` | `import { Button } from './Button.js';` | -Lorsque vous utilisez un *import par défaut*, vous pouvez mettre n’importe quel nom après `import`. Par exemple, vous pourriez écrire `import Banana from './Button.js'` et cela vous fournirait toujours la même exportation par défaut. En revanche, avec les imports nommés, le nom doit correspondre des deux côtés. C'est pour ça qu'on les appelent les imports *nommés*. +Lorsque vous utilisez un *import par défaut*, vous pouvez mettre n’importe quel nom après `import`. Par exemple, vous pourriez écrire `import Banana from './Button.js'` et ça vous fournirait toujours le même export par défaut. En revanche, avec les imports nommés, le nom doit correspondre des deux côtés. C'est pour ça qu'on parle d'imports *nommés*. -**On utilise souvent les exports par défaut si le fichier n’exporte qu’un seul composant, et les exports nommés si l'on souhaite exporter plusieurs composants et valeurs.** Quel que soit le style de développement que vous préférez, donnez toujours des noms significatifs à vos fonctions composants et aux fichiers qui les contiennent. Les composants sans noms, comme `export default () => {}`, sont découragés car ils rendent le débogage plus difficile. +**On utilise souvent les exports par défaut si le fichier n’exporte qu’un seul composant, et les exports nommés si l'on souhaite exporter plusieurs composants et valeurs.** Quel que soit le style de développement que vous préférez, donnez toujours des noms descriptifs à vos fonctions composants et aux fichiers qui les contiennent. Les composants anonymes, du genre `export default () => {}`, sont à proscrire car ils rendent le débogage plus difficile. @@ -164,13 +164,13 @@ export function Profile() { } ``` -Puis, **importez** `Profile` depuis `Gallery.js` vers `App.js` en utilisant un import nommé (avec les accolades) : +Puis, **importez** `Profile` depuis `Gallery.js` dans `App.js` en utilisant un import nommé (avec les accolades) : ```js import { Profile } from './Gallery.js'; ``` -Enfin, **Affichez** `` depuis le composant `App` : +Enfin, **affichez** `` depuis le composant `App` : ```js export default function App() { @@ -178,7 +178,7 @@ export default function App() { } ``` -Désormais, `Gallery.js` contient deux exports : un export par défaut : `Gallery`, et un export nommé : `Profile`. `App.js` les importe maintenant les 2 composants. Essayez d’éditer `` en `` et inversement dans cet exemple : +Désormais, `Gallery.js` contient deux exports : un export par défaut `Gallery`, et un export nommé `Profile`. `App.js` importe à présent les deux. Essayez de passer de `` à `` et inversement dans cet exemple : @@ -221,23 +221,23 @@ img { margin: 0 10px 10px 0; height: 90px; } -Dorénavant, vous utilisez un mélange d’exports par défaut et nommés : +Vous utilisez à présent un mélange d’exports par défaut et nommés : * `Gallery.js`: - * Exporte le composant `Profile` en tant qu’**export nommé appelé `Profile`.** - * Exporte le composant `Gallery` en tant qu’**export par défaut.** + * Exporte le composant `Profile` en tant qu’**export nommé appelé `Profile`**. + * Exporte le composant `Gallery` en tant qu’**export par défaut**. * `App.js`: * Importe `Profile` en tant qu’**import nommé appelé `Profile`** depuis `Gallery.js`. * Importe `Gallery` en tant qu’**import par défaut** depuis `Gallery.js`. - * Exporte le composant racine `App` en tant qu’**export par défaut.** + * Exporte le composant racine `App` en tant qu’**export par défaut**. Dans cette page, vous avez appris : -* Qu’est-ce qu’un fichier de composant racine +* Ce qu'est un fichier de composant racine * Comment importer et exporter un composant -* Comment et quand utiliser les imports/exports par défaut et nommés +* Quand et comment utiliser les imports/exports par défaut et nommés * Comment importer plusieurs composants depuis le même fichier @@ -246,22 +246,22 @@ Dans cette page, vous avez appris : -#### Séparer les composants davantage {/*split-the-components-further*/} +#### Découper davantage les composants {/*split-the-components-further*/} -Actuellement, `Gallery.js` exporte à la fois `Profile` et `Gallery`, ce qui est un peu confus. +Pour le moment, `Gallery.js` exporte à la fois `Profile` et `Gallery`, ce qui est un peu déroutant. Déplacez le composant `Profile` vers son propre fichier `Profile.js`, puis modifiez le composant `App` pour qu’il affiche à la fois `` et `` l'un après l’autre. -Vous devrier utiliser soit un export par défaut, soit un export nommé pour le composant `Profile`, mais assurez-vous d’utiliser la syntaxe d’importation correspondante dans `App.js` et `Gallery.js` ! N'hésitez pas à vous référer au tableau de la partie "En détail" ci-dessus : +Vous pouvez utiliser soit un export par défaut, soit un export nommé pour le composant `Profile`, mais assurez-vous d’utiliser la syntaxe d’importation correspondante dans `App.js` et `Gallery.js` ! N'hésitez pas à vous référer au tableau de la partie « En détail » vue plus tôt : -| Syntaxe | Déclaration d’exportation | Déclaration d’importation | +| Syntaxe | Déclaration d’export | Déclaration d’import | | ----------- | ----------- | ----------- | | Par défaut | `export default function Button() {}` | `import Button from './Button.js';` | | Nommé | `export function Button() {}` | `import { Button } from './Button.js';` | -N’oublier pas d’importer vos composants là où ils sont appelés. `Gallery` n’utilise-t-il pas aussi `Profile` ? +N’oubliez pas d’importer vos composants là où ils sont appelés. `Gallery` n’utilise-t-il pas lui aussi `Profile` ? From dd337c03348c85ac567ac305f8f8a44434a66957 Mon Sep 17 00:00:00 2001 From: Christophe Porteneuve Date: Mon, 19 Jun 2023 11:56:26 +0200 Subject: [PATCH 3/3] copy(imports): final review pass --- .../importing-and-exporting-components.md | 42 +++++++++---------- 1 file changed, 21 insertions(+), 21 deletions(-) diff --git a/src/content/learn/importing-and-exporting-components.md b/src/content/learn/importing-and-exporting-components.md index 4f2f61ec8..fc428fe26 100644 --- a/src/content/learn/importing-and-exporting-components.md +++ b/src/content/learn/importing-and-exporting-components.md @@ -4,7 +4,7 @@ title: Importer et exporter des composants -La magie des composants réside dans leur réutilisabilité : vous pouvez créer des composants qui sont composés d’autres composants. Mais plus vous imbriquez de composants, plus il devient judicieux de les répartir en différents fichiers. Ça vous permet de garder vos fichiers faciles à analyser et de réutiliser les composants à davantage d’endroits. +La magie des composants réside dans leur réutilisabilité : vous pouvez créer des composants qui sont composés d’autres composants. Mais plus vous imbriquez de composants, plus il devient judicieux de les répartir en différents fichiers. Ça vous permet de garder vos fichiers faciles à analyser et de réutiliser les composants à davantage d’endroits. @@ -20,7 +20,7 @@ La magie des composants réside dans leur réutilisabilité : vous pouvez créer ## Le fichier de composant racine {/*the-root-component-file*/} -Dans [Votre premier composant](/learn/your-first-component), vous avez créé un composant `Profile` et un composant `Gallery` qui l'affiche : +Dans [Votre premier composant](/learn/your-first-component), vous avez créé un composant `Profile`, ainsi qu'un second composant `Gallery` qui l'affiche : @@ -52,7 +52,7 @@ img { margin: 0 10px 10px 0; height: 90px; } -Ces composants sont actuellement déclarés dans un **fichier de composant racine**, nommé `App.js` dans cet exemple. Si vous utilisez [Create React App](https://create-react-app.dev/), votre appli se trouve dans `src/App.js`. Selon votre configuration, votre composant racine pourrait toutefois être dans un autre fichier. Si vous utilisez un framework avec un système de routage basé sur les fichiers, comme Next.js, votre composant racine sera différent pour chaque page. +Ces composants sont actuellement déclarés dans un **fichier de composant racine**, nommé `App.js` dans cet exemple. Si vous utilisez [Create React App](https://create-react-app.dev/), votre appli se trouve dans `src/App.js`. Selon votre configuration, votre composant racine pourrait toutefois être dans un autre fichier. Si vous utilisez un framework avec un système de routage basé sur les fichiers, comme par exemple Next.js, votre composant racine sera différent pour chaque page. ## Exporter et importer un composant {/*exporting-and-importing-a-component*/} @@ -62,7 +62,7 @@ Et si vous souhaitiez changer l’écran d’accueil à l’avenir et y mettre u 2. **Exportez** votre fonction composant à partir de ce fichier (en utilisant soit les exports [par défaut](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Statements/export#utilisation_dexports_par_d%C3%A9faut) soit les exports [nommés](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Statements/export#utilisation_dexports_nomm%C3%A9s)). 3. **Importez-la** dans le fichier qui utilisera le composant (en utilisant la technique correspondante pour importer les exports [par défaut](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Statements/import#importation_des_d%C3%A9fauts) ou [nommés](https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Statements/import#importer_un_seul_export_depuis_un_module)). -À présent que les deux composants `Profile` et `Gallery` ont été déplacés du fichier `App.js` vers un nouveau fichier `Gallery.js`, Vous pouvez modifier `App.js` pour importer le composant `Gallery` depuis `Gallery.js` : +À présent que les deux composants `Profile` et `Gallery` ont été déplacés du fichier `App.js` vers un nouveau fichier `Gallery.js`, Vous pouvez modifier `App.js` pour importer le composant `Gallery` depuis `Gallery.js` : @@ -104,7 +104,7 @@ img { margin: 0 10px 10px 0; height: 90px; } -Voyez comme cet exemple est désormais découpé en deux fichiers de composants : +Voyez comme cet exemple est désormais découpé en deux fichiers de composants : 1. `Gallery.js`: * Définit le composant `Profile` qui n’est utilisé qu'au sein de ce même fichier et n’est pas exporté. @@ -115,7 +115,7 @@ Voyez comme cet exemple est désormais découpé en deux fichiers de composants -Il se peut que vous rencontriez des fichiers qui omettent l’extension `.js` comme ceci : +Il se peut que vous rencontriez des fichiers qui omettent l’extension `.js` comme ceci : ```js import Gallery from './Gallery'; @@ -129,11 +129,11 @@ import Gallery from './Gallery'; #### Exports par défaut vs. exports nommés {/*default-vs-named-exports*/} -Il existe deux façons principales d’exporter des valeurs avec JavaScript : les exports par défaut et les exports nommés. Jusqu’à présent, nos exemples n’ont utilisé que des exports par défaut. Mais vous pouvez utiliser l’un ou l’autre, ou les deux, dans le même fichier. **Un fichier ne peut avoir qu’un seul export *par défaut*, mais il peut avoir autant d’exports *nommés* que vous le souhaitez.** +Il existe deux façons principales d’exporter des valeurs avec JavaScript : les exports par défaut et les exports nommés. Jusqu’à présent, nos exemples n’ont utilisé que des exports par défaut. Mais vous pouvez utiliser l’un ou l’autre, ou les deux, dans le même fichier. **Un fichier ne peut avoir qu’un seul export *par défaut*, mais il peut avoir autant d’exports *nommés* que vous le souhaitez.** ![Exports par défaut et nommés](/images/docs/illustrations/i_import-export.svg) -La manière dont vous exportez votre composant dicte la manière dont vous devez l’importer. Vous obtiendrez une erreur si vous essayez d’importer un export par défaut de la même manière que vous le feriez pour un export nommé ! Ce tableau peut vous aider à vous y retrouver : +La manière dont vous exportez votre composant dicte la manière dont vous devez l’importer. Vous obtiendrez une erreur si vous essayez d’importer un export par défaut de la même manière que vous le feriez pour un export nommé ! Ce tableau peut vous aider à vous y retrouver : | Syntaxe | Déclaration d’export | Déclaration d’import | | ----------- | ----------- | ----------- | @@ -148,15 +148,15 @@ Lorsque vous utilisez un *import par défaut*, vous pouvez mettre n’importe qu ## Exporter et importer plusieurs composants depuis le même fichier {/*exporting-and-importing-multiple-components-from-the-same-file*/} -Et si vous vouliez afficher un seul `Profile` au lieu d’une galerie ? Vous pouvez également exporter le composant `Profile`. Mais `Gallery.js` a déjà un export *par défaut*, et vous ne pouvez pas en avoir *deux* dans un même fichier. Dans ce cas, vous pouvez créer un nouveau fichier avec un export par défaut, ou ajouter un export *nommé* pour le composant `Profile`. **Un fichier ne peut avoir qu’un seul export par défaut, mais il peut avoir de nombreux exports nommés !** +Et si vous vouliez afficher un seul `Profile` au lieu d’une galerie ? Vous pouvez également exporter le composant `Profile`. Mais `Gallery.js` a déjà un export *par défaut*, et vous ne pouvez pas en avoir *deux* dans un même fichier. Dans ce cas, vous pouvez créer un nouveau fichier avec un export par défaut, ou ajouter un export *nommé* pour le composant `Profile`. **Un fichier ne peut avoir qu’un seul export par défaut, mais il peut avoir de nombreux exports nommés !** -Pour réduire la confusion potentielle entre les exports par défaut et nommés, certaines équipes choisissent de ne s’en tenir qu’à un seul style (par défaut ou nommé), ou évitent simplement de les mélanger dans un seul fichier. Faites ce qui vous convient le mieux ! +Pour réduire la confusion potentielle entre les exports par défaut et nommés, certaines équipes choisissent de ne s’en tenir qu’à un seul style (par défaut ou nommé), ou évitent simplement de les mélanger dans un seul fichier. Faites ce qui vous convient le mieux ! -Tout d’abord, **exportez** `Profile` depuis `Gallery.js` en utilisant un export nommé (sans le mot-clé `default`) : +Tout d’abord, **exportez** `Profile` depuis `Gallery.js` en utilisant un export nommé (sans le mot-clé `default`) : ```js export function Profile() { @@ -164,13 +164,13 @@ export function Profile() { } ``` -Puis, **importez** `Profile` depuis `Gallery.js` dans `App.js` en utilisant un import nommé (avec les accolades) : +Puis, **importez** `Profile` depuis `Gallery.js` dans `App.js` en utilisant un import nommé (avec les accolades) : ```js import { Profile } from './Gallery.js'; ``` -Enfin, **affichez** `` depuis le composant `App` : +Enfin, **affichez** `` depuis le composant `App` : ```js export default function App() { @@ -178,7 +178,7 @@ export default function App() { } ``` -Désormais, `Gallery.js` contient deux exports : un export par défaut `Gallery`, et un export nommé `Profile`. `App.js` importe à présent les deux. Essayez de passer de `` à `` et inversement dans cet exemple : +Désormais, `Gallery.js` contient deux exports : un export par défaut `Gallery`, et un export nommé `Profile`. `App.js` importe à présent les deux. Essayez de passer de `` à `` et inversement dans cet exemple : @@ -221,7 +221,7 @@ img { margin: 0 10px 10px 0; height: 90px; } -Vous utilisez à présent un mélange d’exports par défaut et nommés : +Vous utilisez à présent un mélange d’exports par défaut et nommés : * `Gallery.js`: * Exporte le composant `Profile` en tant qu’**export nommé appelé `Profile`**. @@ -233,7 +233,7 @@ Vous utilisez à présent un mélange d’exports par défaut et nommés : -Dans cette page, vous avez appris : +Dans cette page, vous avez appris : * Ce qu'est un fichier de composant racine * Comment importer et exporter un composant @@ -252,7 +252,7 @@ Pour le moment, `Gallery.js` exporte à la fois `Profile` et `Gallery`, ce qui e Déplacez le composant `Profile` vers son propre fichier `Profile.js`, puis modifiez le composant `App` pour qu’il affiche à la fois `` et `` l'un après l’autre. -Vous pouvez utiliser soit un export par défaut, soit un export nommé pour le composant `Profile`, mais assurez-vous d’utiliser la syntaxe d’importation correspondante dans `App.js` et `Gallery.js` ! N'hésitez pas à vous référer au tableau de la partie « En détail » vue plus tôt : +Vous pouvez utiliser soit un export par défaut, soit un export nommé pour le composant `Profile`, mais assurez-vous d’utiliser la syntaxe d’importation correspondante dans `App.js` et `Gallery.js` ! N'hésitez pas à vous référer au tableau de la partie « En détail » vue plus tôt : | Syntaxe | Déclaration d’export | Déclaration d’import | | ----------- | ----------- | ----------- | @@ -261,7 +261,7 @@ Vous pouvez utiliser soit un export par défaut, soit un export nommé pour le c -N’oubliez pas d’importer vos composants là où ils sont appelés. `Gallery` n’utilise-t-il pas lui aussi `Profile` ? +N’oubliez pas d’importer vos composants là où ils sont appelés. `Gallery` n’utilise-t-il pas lui aussi `Profile` ? @@ -281,7 +281,7 @@ export default function App() { ``` ```js Gallery.js active -// Déplace-moi vers Profile.js ! +// Déplace-moi vers Profile.js ! export function Profile() { return ( -Voici la solution avec les exports nommés : +Voici la solution avec les exports nommés : @@ -366,7 +366,7 @@ img { margin: 0 10px 10px 0; height: 90px; } -Voici la solution avec les exports par défaut : +Voici la solution avec les exports par défaut :