From bb41d820046fdd18121f04220fe01ca74c714e93 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matte=CC=80o=20Gauthier?= Date: Wed, 5 Jul 2023 16:12:19 +0200 Subject: [PATCH 1/4] =?UTF-8?q?D=C3=A9but=20de=20la=20traduction=20de=20la?= =?UTF-8?q?=20page=20useDebugValue?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/content/reference/react/useDebugValue.md | 22 ++++++++++---------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/src/content/reference/react/useDebugValue.md b/src/content/reference/react/useDebugValue.md index 8826665e7..ba6074bac 100644 --- a/src/content/reference/react/useDebugValue.md +++ b/src/content/reference/react/useDebugValue.md @@ -4,7 +4,7 @@ title: useDebugValue -`useDebugValue` is a React Hook that lets you add a label to a custom Hook in [React DevTools.](/learn/react-developer-tools) +`useDebugValue` est un Hook React permettant d'ajouter une étiquette visible dans [React DevTools](/learn/react-developer-tools) à un Hook personnalisé. ```js useDebugValue(value, format?) @@ -16,34 +16,34 @@ useDebugValue(value, format?) --- -## Reference {/*reference*/} +## Référence {/*reference*/} ### `useDebugValue(value, format?)` {/*usedebugvalue*/} -Call `useDebugValue` at the top level of your [custom Hook](/learn/reusing-logic-with-custom-hooks) to display a readable debug value: +Appelez `useDebugValue` à la racine de votre [hook personnalisé](/learn/reusing-logic-with-custom-hooks) pour afficher une valeur de débogage visible : ```js import { useDebugValue } from 'react'; function useOnlineStatus() { // ... - useDebugValue(isOnline ? 'Online' : 'Offline'); + useDebugValue(isOnline ? 'En ligne' : 'Déconnecté'); // ... } ``` -[See more examples below.](#usage) +[Voir d’autres exemples ci-dessous.](#usage) -#### Parameters {/*parameters*/} +#### Paramètres {/*parameters*/} -* `value`: The value you want to display in React DevTools. It can have any type. -* **optional** `format`: A formatting function. When the component is inspected, React DevTools will call the formatting function with the `value` as the argument, and then display the returned formatted value (which may have any type). If you don't specify the formatting function, the original `value` itself will be displayed. +* `value`: La valeur que vous souhaitez afficher dans React DevTools. Elle peut être de n'importe quel type. +* **optional** `format` : Une fonction de formatage. Lorsque le composant est inspecté, React DevTools appellera la fonction de formatage avec la `valeur` comme argument, puis affichera la valeur formatée renvoyée (qui peut avoir n'importe quel type). Si vous ne spécifiez pas la fonction de formatage, la `value` originale sera affichée. -#### Returns {/*returns*/} +#### Valeur renvoyée {/*returns*/} -`useDebugValue` does not return anything. +`useDebugValue` ne renvoie aucune valeur. -## Usage {/*usage*/} +## Utilisation {/*usage*/} ### Adding a label to a custom Hook {/*adding-a-label-to-a-custom-hook*/} From 7ac700b20b939cfec6b379d99f970f8d277be3d0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matte=CC=80o=20Gauthier?= Date: Wed, 5 Jul 2023 16:31:29 +0200 Subject: [PATCH 2/4] Finition de la traduction de la page useDebugValue --- src/content/reference/react/useDebugValue.md | 28 ++++++++++---------- 1 file changed, 14 insertions(+), 14 deletions(-) diff --git a/src/content/reference/react/useDebugValue.md b/src/content/reference/react/useDebugValue.md index ba6074bac..286175048 100644 --- a/src/content/reference/react/useDebugValue.md +++ b/src/content/reference/react/useDebugValue.md @@ -20,7 +20,7 @@ useDebugValue(value, format?) ### `useDebugValue(value, format?)` {/*usedebugvalue*/} -Appelez `useDebugValue` à la racine de votre [hook personnalisé](/learn/reusing-logic-with-custom-hooks) pour afficher une valeur de débogage visible : +Appelez `useDebugValue` à la racine de votre [Hook personnalisé](/learn/reusing-logic-with-custom-hooks) pour afficher une valeur de débogage visible : ```js import { useDebugValue } from 'react'; @@ -37,7 +37,7 @@ function useOnlineStatus() { #### Paramètres {/*parameters*/} * `value`: La valeur que vous souhaitez afficher dans React DevTools. Elle peut être de n'importe quel type. -* **optional** `format` : Une fonction de formatage. Lorsque le composant est inspecté, React DevTools appellera la fonction de formatage avec la `valeur` comme argument, puis affichera la valeur formatée renvoyée (qui peut avoir n'importe quel type). Si vous ne spécifiez pas la fonction de formatage, la `value` originale sera affichée. +* **optionnel** `format` : Une fonction de formatage. Lorsque le composant est inspecté, React DevTools appellera la fonction de formatage avec la `valeur` comme argument, puis affichera la valeur formatée renvoyée (qui peut avoir n'importe quel type). Si vous ne spécifiez pas la fonction de formatage, la `value` originale sera affichée. #### Valeur renvoyée {/*returns*/} @@ -45,9 +45,9 @@ function useOnlineStatus() { ## Utilisation {/*usage*/} -### Adding a label to a custom Hook {/*adding-a-label-to-a-custom-hook*/} +### Ajouter un libellé à un Hook personnalisé {/*adding-a-label-to-a-custom-hook*/} -Call `useDebugValue` at the top level of your [custom Hook](/learn/reusing-logic-with-custom-hooks) to display a readable debug value for [React DevTools.](/learn/react-developer-tools) +Appelez `useDebugValue` à la racine de votre Hook personnalisé pour afficher une valeur de débogage dans [React DevTools.](/learn/react-developer-tools) ```js [[1, 5, "isOnline ? 'Online' : 'Offline'"]] import { useDebugValue } from 'react'; @@ -59,11 +59,11 @@ function useOnlineStatus() { } ``` -This gives components calling `useOnlineStatus` a label like `OnlineStatus: "Online"` when you inspect them: +Cela donne aux composants appelant `useOnlineStatus` une étiquette comme `OnlineStatus: "Online"` lorsque vous les inspectez : -![A screenshot of React DevTools showing the debug value](/images/docs/react-devtools-usedebugvalue.png) +![Une capture d'écran de React DevTools montrant la valeur de débogage](/images/docs/react-devtools-usedebugvalue.png) -Without the `useDebugValue` call, only the underlying data (in this example, `true`) would be displayed. +Sans l'appel de `useDebugValue`, seule la donnée sous-jacente (dans cet exemple, `true`) serait affichée. @@ -72,7 +72,7 @@ import { useOnlineStatus } from './useOnlineStatus.js'; function StatusBar() { const isOnline = useOnlineStatus(); - return

{isOnline ? '✅ Online' : '❌ Disconnected'}

; + return

{isOnline ? '✅ En ligne' : '❌ Déconnecté'}

; } export default function App() { @@ -85,7 +85,7 @@ import { useSyncExternalStore, useDebugValue } from 'react'; export function useOnlineStatus() { const isOnline = useSyncExternalStore(subscribe, () => navigator.onLine, () => true); - useDebugValue(isOnline ? 'Online' : 'Offline'); + useDebugValue(isOnline ? 'En ligne' : 'Déconnecté'); return isOnline; } @@ -103,20 +103,20 @@ function subscribe(callback) { -Don't add debug values to every custom Hook. It's most valuable for custom Hooks that are part of shared libraries and that have a complex internal data structure that's difficult to inspect. +N'ajoutez pas de valeurs de débogage à chaque Hook personnalisé. Cette méthode est surtout utile pour les Hooks personnalisés qui font partie de bibliothèques partagées et qui ont une structure de données interne complexe et difficile à inspecter. --- -### Deferring formatting of a debug value {/*deferring-formatting-of-a-debug-value*/} +### Différer le formatage d'une valeur de débogage {/*deferring-formatting-of-a-debug-value*/} -You can also pass a formatting function as the second argument to `useDebugValue`: +Vous pouvez également transmettre une fonction de formatage comme deuxième argument à `useDebugValue` : ```js [[1, 1, "date", 18], [2, 1, "date.toDateString()"]] useDebugValue(date, date => date.toDateString()); ``` -Your formatting function will receive the debug value as a parameter and should return a formatted display value. When your component is inspected, React DevTools will call this function and display its result. +Votre fonction de formatage recevra la valeur de débogage en paramètre et devra renvoyer une valeur d'affichage formatée. Lorsque votre composant est inspecté, React DevTools appellera cette fonction et affichera son résultat. -This lets you avoid running potentially expensive formatting logic unless the component is actually inspected. For example, if `date` is a Date value, this avoids calling `toDateString()` on it for every render. +Cela vous permet d'éviter d'exécuter une logique de formatage potentiellement coûteuse à moins que le composant ne soit réellement inspecté. Par exemple, si `date` est une valeur de type Date, cela évite d'appeler `toDateString()` à chaque rendu. From 877497ccd9b4bf963e4862f6728b816b24c653b0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Matt=C3=A8o=20Gauthier?= Date: Thu, 6 Jul 2023 14:21:05 +0200 Subject: [PATCH 3/4] Apply suggestions from code review Co-authored-by: Christophe Porteneuve --- src/content/reference/react/useDebugValue.md | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/src/content/reference/react/useDebugValue.md b/src/content/reference/react/useDebugValue.md index 286175048..9722e6f68 100644 --- a/src/content/reference/react/useDebugValue.md +++ b/src/content/reference/react/useDebugValue.md @@ -4,7 +4,7 @@ title: useDebugValue -`useDebugValue` est un Hook React permettant d'ajouter une étiquette visible dans [React DevTools](/learn/react-developer-tools) à un Hook personnalisé. +`useDebugValue` est un Hook React qui vous permet d'ajouter une étiquette visible dans [les outils de développement React](/learn/react-developer-tools) à un Hook personnalisé. ```js useDebugValue(value, format?) @@ -20,7 +20,7 @@ useDebugValue(value, format?) ### `useDebugValue(value, format?)` {/*usedebugvalue*/} -Appelez `useDebugValue` à la racine de votre [Hook personnalisé](/learn/reusing-logic-with-custom-hooks) pour afficher une valeur de débogage visible : +Appelez `useDebugValue` à la racine de votre [Hook personnalisé](/learn/reusing-logic-with-custom-hooks) pour afficher une valeur de débogage lisible : ```js import { useDebugValue } from 'react'; @@ -32,12 +32,12 @@ function useOnlineStatus() { } ``` -[Voir d’autres exemples ci-dessous.](#usage) +[Voir d’autres exemples ci-dessous](#usage). #### Paramètres {/*parameters*/} -* `value`: La valeur que vous souhaitez afficher dans React DevTools. Elle peut être de n'importe quel type. -* **optionnel** `format` : Une fonction de formatage. Lorsque le composant est inspecté, React DevTools appellera la fonction de formatage avec la `valeur` comme argument, puis affichera la valeur formatée renvoyée (qui peut avoir n'importe quel type). Si vous ne spécifiez pas la fonction de formatage, la `value` originale sera affichée. +* `value` : la valeur que vous souhaitez afficher dans les outils de développement React. Elle peut être de n'importe quel type. +* `format` **optionnel** : une fonction de formatage. Lorsque le composant est inspecté, les outils de développement React appelleront la fonction de formatage avec `value` comme argument, puis afficheront la valeur formatée renvoyée (qui peut avoir n'importe quel type). Si vous ne spécifiez pas la fonction de formatage, la `value` originale sera affichée. #### Valeur renvoyée {/*returns*/} @@ -47,7 +47,7 @@ function useOnlineStatus() { ### Ajouter un libellé à un Hook personnalisé {/*adding-a-label-to-a-custom-hook*/} -Appelez `useDebugValue` à la racine de votre Hook personnalisé pour afficher une valeur de débogage dans [React DevTools.](/learn/react-developer-tools) +Appelez `useDebugValue` à la racine de votre [Hook personnalisé](/learn/reusing-logic-with-custom-hooks) pour afficher une valeur de débogage dans [les outils de développement React](/learn/react-developer-tools). ```js [[1, 5, "isOnline ? 'Online' : 'Offline'"]] import { useDebugValue } from 'react'; @@ -59,9 +59,9 @@ function useOnlineStatus() { } ``` -Cela donne aux composants appelant `useOnlineStatus` une étiquette comme `OnlineStatus: "Online"` lorsque vous les inspectez : +Ça donne aux composants qui appellent `useOnlineStatus` une étiquette du genre `OnlineStatus: "En ligne"` lorsque vous les inspectez : -![Une capture d'écran de React DevTools montrant la valeur de débogage](/images/docs/react-devtools-usedebugvalue.png) +![Une capture d'écran des outils de développement React montrant la valeur de débogage](/images/docs/react-devtools-usedebugvalue.png) Sans l'appel de `useDebugValue`, seule la donnée sous-jacente (dans cet exemple, `true`) serait affichée. @@ -117,6 +117,6 @@ Vous pouvez également transmettre une fonction de formatage comme deuxième arg useDebugValue(date, date => date.toDateString()); ``` -Votre fonction de formatage recevra la valeur de débogage en paramètre et devra renvoyer une valeur d'affichage formatée. Lorsque votre composant est inspecté, React DevTools appellera cette fonction et affichera son résultat. +Votre fonction de formatage recevra la valeur de débogage comme argument et devra renvoyer une valeur formatée pour l'affichage. Lorsque votre composant sera inspecté, les outils de développement React appelleront cette fonction et afficheront son résultat. -Cela vous permet d'éviter d'exécuter une logique de formatage potentiellement coûteuse à moins que le composant ne soit réellement inspecté. Par exemple, si `date` est une valeur de type Date, cela évite d'appeler `toDateString()` à chaque rendu. +Ça vous permet d'éviter d'exécuter une logique de formatage potentiellement coûteuse tant que le composant n'est pas réellement inspecté. Par exemple, si `date` est une valeur de type Date, ça évite d'appeler `toDateString()` à chaque rendu. From b1dab254c72d677077d8625edd26395ac36a8f26 Mon Sep 17 00:00:00 2001 From: Christophe Porteneuve Date: Thu, 6 Jul 2023 16:36:53 +0200 Subject: [PATCH 4/4] copy(useDebugValue): final review pass --- TRANSLATORS.md | 1 + src/content/reference/react/index.md | 14 +++++++------- src/content/reference/react/useDebugValue.md | 4 ++-- 3 files changed, 10 insertions(+), 9 deletions(-) diff --git a/TRANSLATORS.md b/TRANSLATORS.md index f41a9035b..623eddc04 100644 --- a/TRANSLATORS.md +++ b/TRANSLATORS.md @@ -114,6 +114,7 @@ Voici la liste par ordre alphabétique (prénom, nom). **🙏🏻 Mille mercis @MatteoGauthier_ diff --git a/src/content/reference/react/index.md b/src/content/reference/react/index.md index c004e080a..4df0c8bfc 100644 --- a/src/content/reference/react/index.md +++ b/src/content/reference/react/index.md @@ -88,8 +88,8 @@ Une manière courante d’optimiser la performance de réaffichage consiste à s Pour éviter les calculs coûteux et les réaffichages inutiles, utilisez l’un de ces Hooks : -- [`useMemo`](/reference/react/useMemo) vous permet de mettre en cache le résultat d’un calcul coûteux. -- [`useCallback`](/reference/react/useCallback) vous permet de mettre en cache la définition d’une fonction avant de la passer à un composant optimisé. +* [`useMemo`](/reference/react/useMemo) vous permet de mettre en cache le résultat d’un calcul coûteux. +* [`useCallback`](/reference/react/useCallback) vous permet de mettre en cache la définition d’une fonction avant de la passer à un composant optimisé. ```js function TodoList({ todos, tab, theme }) { @@ -102,8 +102,8 @@ Parfois, vous ne pouvez pas éviter le réaffichage parce que la vue doit effect Pour établir des priorités de rendu, utilisez un de ces Hooks : -- [`useTransition`](/reference/react/useTransition) permet de marquer une transition d’état local comme non bloquante ce qui autorise d’autres mises à jour à l’interrompre. -- [`useDeferredValue`](/reference/react/useDeferredValue) vous permet de différer la mise à jour d’une partie non critique de l’UI et de laisser les autres parties se mettre à jour en premier. +* [`useTransition`](/reference/react/useTransition) permet de marquer une transition d’état local comme non bloquante ce qui autorise d’autres mises à jour à l’interrompre. +* [`useDeferredValue`](/reference/react/useDeferredValue) vous permet de différer la mise à jour d’une partie non critique de l’UI et de laisser les autres parties se mettre à jour en premier. --- @@ -111,9 +111,9 @@ Pour établir des priorités de rendu, utilisez un de ces Hooks : Ces Hooks sont majoritairement utiles aux auteur·e·s de bibliothèque et ne sont pas couramment utilisés dans du code applicatif. -- [`useDebugValue`](/reference/react/useDebugValue) vous permet de personnaliser le libellé que React Devtools affiche pour votre propre Hook. -- [`useId`](/reference/react/useId) permet à un composant de s’associer un ID unique. Généralement utilisé avec les API d’accessibilité. -- [`useSyncExternalStore`](/reference/react/useSyncExternalStore) permet à un composant de s’abonner à une source de données extérieure. +* [`useDebugValue`](/reference/react/useDebugValue) vous permet de personnaliser le libellé que les outils de développement React affichent pour votre propre Hook. +* [`useId`](/reference/react/useId) permet à un composant de s’associer un ID unique. Généralement utilisé avec les API d’accessibilité. +* [`useSyncExternalStore`](/reference/react/useSyncExternalStore) permet à un composant de s’abonner à une source de données extérieure. --- diff --git a/src/content/reference/react/useDebugValue.md b/src/content/reference/react/useDebugValue.md index 9722e6f68..11ca6c5d1 100644 --- a/src/content/reference/react/useDebugValue.md +++ b/src/content/reference/react/useDebugValue.md @@ -20,7 +20,7 @@ useDebugValue(value, format?) ### `useDebugValue(value, format?)` {/*usedebugvalue*/} -Appelez `useDebugValue` à la racine de votre [Hook personnalisé](/learn/reusing-logic-with-custom-hooks) pour afficher une valeur de débogage lisible : +Appelez `useDebugValue` à la racine de votre [Hook personnalisé](/learn/reusing-logic-with-custom-hooks) pour afficher une valeur de débogage lisible : ```js import { useDebugValue } from 'react'; @@ -111,7 +111,7 @@ N'ajoutez pas de valeurs de débogage à chaque Hook personnalisé. Cette métho ### Différer le formatage d'une valeur de débogage {/*deferring-formatting-of-a-debug-value*/} -Vous pouvez également transmettre une fonction de formatage comme deuxième argument à `useDebugValue` : +Vous pouvez transmettre une fonction de formatage comme deuxième argument à `useDebugValue` : ```js [[1, 1, "date", 18], [2, 1, "date.toDateString()"]] useDebugValue(date, date => date.toDateString());