Merge pull request #575 from reactjs/copy/warnings

Translations of the warning pages

src/content/warnings/invalid-aria-prop.md

@@ -1,11 +1,11 @@
 ---
-title: Invalid ARIA Prop Warning
+title: Avertissement de prop ARIA invalide
 ---
 
-This warning will fire if you attempt to render a DOM element with an `aria-*` prop that does not exist in the Web Accessibility Initiative (WAI) Accessible Rich Internet Application (ARIA) [specification](https://www.w3.org/TR/wai-aria-1.1/#states_and_properties).
+Cet avertissement est déclenché lorsque vous tentez d'afficher un élément DOM avec une prop `aria-*` qui n'existe pas dans la [spécification](https://www.w3.org/TR/wai-aria-1.1/#states_and_properties) *Web Accessibility Initiative* (WAI) *Accessible Rich Internet Application* (ARIA).
 
-1. If you feel that you are using a valid prop, check the spelling carefully. `aria-labelledby` and `aria-activedescendant` are often misspelled.
+1. Si vous pensez utiliser une prop valide, vérifiez attentivement l'orthographe. `aria-labelledby` et `aria-activedescendant` sont souvent mal orthographiées.
 
-2. If you wrote `aria-role`, you may have meant `role`.
+2. Si vous avez écrit `aria-role`, vous pensiez probablement à `role`.
 
-3. Otherwise, if you're on the latest version of React DOM and verified that you're using a valid property name listed in the ARIA specification, please [report a bug](https://github.com/facebook/react/issues/new/choose).
+3. Pour les autres cas, si vous êtes sur la dernière version de React DOM et avez vérifié que vous utilisiez bien un nom de propriété valide listé dans la spécification ARIA, merci de nous [signaler le bug](https://github.com/facebook/react/issues/new/choose).

src/content/warnings/invalid-hook-call-warning.md

@@ -1,68 +1,70 @@
 ---
-title: Rules of Hooks
+title: Les Règles des Hooks
 ---
 
-You are probably here because you got the following error message:
+Vous êtes probablement ici parce que vous avez reçu ce message d'erreur :
 
 <ConsoleBlock level="error">
 
 Hooks can only be called inside the body of a function component.
 
 </ConsoleBlock>
 
-There are three common reasons you might be seeing it:
+*(« Les Hooks ne peuvent être appelés que depuis le corps immédiat d'une fonction composant », NdT)*
 
-1. You might be **breaking the Rules of Hooks**.
-2. You might have **mismatching versions** of React and React DOM.
-3. You might have **more than one copy of React** in the same app.
+Il y a trois raisons habituelles derrière  cette erreur :
 
-Let's look at each of these cases.
+1. Vous avez peut-être **enfreint les Règles des Hooks**.
+2. Vous avez peut-être des **versions disparates** de React et React DOM.
+3. Vous avez peut-être **plus d'un exemplaire de React** dans la même appli.
 
-## Breaking Rules of Hooks {/*breaking-rules-of-hooks*/}
+Passons-les en revue.
 
-Functions whose names start with `use` are called [*Hooks*](/reference/react) in React.
+## Enfreindre les Règles des Hooks {/*breaking-rules-of-hooks*/}
 
-**Don’t call Hooks inside loops, conditions, or nested functions.** Instead, always use Hooks at the top level of your React function, before any early returns. You can only call Hooks while React is rendering a function component:
+Les fonctions dont les noms commencent par `use` sont appelées [*Hooks*](/reference/react) en React.
 
-* ✅ Call them at the top level in the body of a [function component](/learn/your-first-component).
-* ✅ Call them at the top level in the body of a [custom Hook](/learn/reusing-logic-with-custom-hooks).
+**N'appelez pas des Hooks au sein de boucles, de conditions ou de fonctions imbriquées.**  Utilisez toujours les Hooks au niveau racine de vos fonctions React, avant tout `return` anticipé.  Vous ne pouvez appelez des Hooks que pendant que React fait le rendu d'une fonction composant :
+
+* ✅ Appelez-les au niveau racine du corps d'une [fonction composant](/learn/your-first-component).
+* ✅ Appelez-les au niveau racine du corps d'un [Hook personnalisé](/learn/reusing-logic-with-custom-hooks).
 
 ```js{2-3,8-9}
 function Counter() {
-  // ✅ Good: top-level in a function component
+  // ✅ Correct : niveau racine d’une fonction composant
   const [count, setCount] = useState(0);
   // ...
 }
 
 function useWindowWidth() {
-  // ✅ Good: top-level in a custom Hook
+  // ✅ Correct : niveau racine d’un Hook personnalisé
   const [width, setWidth] = useState(window.innerWidth);
   // ...
 }
 ```
 
-It’s **not** supported to call Hooks (functions starting with `use`) in any other cases, for example:
+Vous **ne pouvez pas** appeler des Hooks (des fonctions démarrant par `use`) dans quelque autre cas que ce soit, par exemple :
 
-* 🔴 Do not call Hooks inside conditions or loops.
-* 🔴 Do not call Hooks after a conditional `return` statement.
-* 🔴 Do not call Hooks in event handlers.
-* 🔴 Do not call Hooks in class components.
-* 🔴 Do not call Hooks inside functions passed to `useMemo`, `useReducer`, or `useEffect`.
+* 🔴 N'appelez pas de Hooks dans des conditions ou boucles.
+* 🔴 N'appelez pas de Hooks après une instruction `return` conditionnelle.
+* 🔴 N'appelez pas de Hooks dans des gestionnaires d'événements.
+* 🔴 N'appelez pas de Hooks dans des composants à base de classes.
+* 🔴 N'appelez pas de Hooks dans des fonctions passées à `useMemo`, `useReducer` ou `useEffect`.
 
-If you break these rules, you might see this error.
+Si vous enfreignez ces règles, vous verrez sans doute cette erreur.
 
 ```js{3-4,11-12,20-21}
 function Bad({ cond }) {
   if (cond) {
-    // 🔴 Bad: inside a condition (to fix, move it outside!)
+    // 🔴 Erroné : dans une condition (sortez-en l’appel !)
     const theme = useContext(ThemeContext);
   }
   // ...
 }
 
 function Bad() {
   for (let i = 0; i < 10; i++) {
-    // 🔴 Bad: inside a loop (to fix, move it outside!)
+    // 🔴 Erroné : dans une boucle (sortez-en l’appel !)
     const theme = useContext(ThemeContext);
   }
   // ...
@@ -72,22 +74,22 @@ function Bad({ cond }) {
   if (cond) {
     return;
   }
-  // 🔴 Bad: after a conditional return (to fix, move it before the return!)
+  // 🔴 Erroné : après un `return` conditionnel (déplacez l’appel avant !)
   const theme = useContext(ThemeContext);
   // ...
 }
 
 function Bad() {
   function handleClick() {
-    // 🔴 Bad: inside an event handler (to fix, move it outside!)
+    // 🔴 Erroné : dans un gestionnaire d’événement (sortez-en l’appel !)
     const theme = useContext(ThemeContext);
   }
   // ...
 }
 
 function Bad() {
   const style = useMemo(() => {
-    // 🔴 Bad: inside useMemo (to fix, move it outside!)
+    // 🔴 Erroné : dans `useMemo` (sortez-en l’appel !)
     const theme = useContext(ThemeContext);
     return createStyle(theme);
   });
@@ -96,63 +98,63 @@ function Bad() {
 
 class Bad extends React.Component {
   render() {
-    // 🔴 Bad: inside a class component (to fix, write a function component instead of a class!)
+    // 🔴 Erroné : dans un composant à base de classe (utilisez une fonction composant !)
     useEffect(() => {})
     // ...
   }
 }
 ```
 
-You can use the [`eslint-plugin-react-hooks` plugin](https://www.npmjs.com/package/eslint-plugin-react-hooks) to catch these mistakes.
+Vous pouvez utiliser le [plugin `eslint-plugin-react-hooks`](https://www.npmjs.com/package/eslint-plugin-react-hooks) pour détecter ces erreurs.
 
 <Note>
 
-[Custom Hooks](/learn/reusing-logic-with-custom-hooks) *may* call other Hooks (that's their whole purpose). This works because custom Hooks are also supposed to only be called while a function component is rendering.
+[Les Hooks personnalisés](/learn/reusing-logic-with-custom-hooks) *peuvent* appeler d'autres Hooks (c'est leur raison d'être).  Ça fonctionne parce que les Hooks personnalisés sont eux-mêmes supposés n'être appelés que pendant le rendu d'une fonction composant.
 
 </Note>
 
-## Mismatching Versions of React and React DOM {/*mismatching-versions-of-react-and-react-dom*/}
+## Versions disparates de React et React DOM {/*mismatching-versions-of-react-and-react-dom*/}
 
-You might be using a version of `react-dom` (< 16.8.0) or `react-native` (< 0.59) that doesn't yet support Hooks. You can run `npm ls react-dom` or `npm ls react-native` in your application folder to check which version you're using. If you find more than one of them, this might also create problems (more on that below).
+Vous utilisez peut-être une version de `react-dom` (< 16.8.0) ou de `react-native` (< 0.59) qui ne prend pas encore en charge les Hooks. Vous pouvez exécuter `npm ls react-dom` ou `npm ls react-native` dans le dossier de votre application pour vérifier la version que vous utilisez.  Si vous en trouvez plus d'une, ça peut aussi créer des problèmes (on en reparle juste en-dessous).
 
-## Duplicate React {/*duplicate-react*/}
+## Multiples copies de React {/*duplicate-react*/}
 
-In order for Hooks to work, the `react` import from your application code needs to resolve to the same module as the `react` import from inside the `react-dom` package.
+Pour que les Hooks fonctionnent, l'import de `react` dans votre code applicatif doit amener au même module que l'import de `react` depuis le module `react-dom`.
 
-If these `react` imports resolve to two different exports objects, you will see this warning. This may happen if you **accidentally end up with two copies** of the `react` package.
+Si ces imports de `react` amènent à des objets d'export distincts, vous verrez cet avertissement.  Ça peut arriver quand vous **vous retrouvez par inadvertance avec deux copies** du module `react`.
 
-If you use Node for package management, you can run this check in your project folder:
+Si vous utilisez Node pour gérer vos modules, vous pouvez lancer la vérification suivante depuis le dossier de votre projet :
 
 <TerminalBlock>
 
 npm ls react
 
 </TerminalBlock>
 
-If you see more than one React, you'll need to figure out why this happens and fix your dependency tree. For example, maybe a library you're using incorrectly specifies `react` as a dependency (rather than a peer dependency). Until that library is fixed, [Yarn resolutions](https://yarnpkg.com/lang/en/docs/selective-version-resolutions/) is one possible workaround.
+Si vous voyez plus d'un React, vous devrez déterminer d'où ça vient et corriger votre arbre de dépendances.  Peut-être par exemple qu'une bibliothèque que vous utilisez spécifie à tort `react` comme dépendance (plutôt que comme dépendance sur module pair *(peer dependency, NdT)*).  Tant que cette bibliothèque ne sera pas corrigée, un contournement possible consiste à utiliser les [résolutions Yarn](https://yarnpkg.com/configuration/manifest#resolutions).
 
-You can also try to debug this problem by adding some logs and restarting your development server:
+Vous pouvez aussi tenter de déboguer le problème en ajoutant des logs à des endroits stratégiques et en redémarrant votre serveur de développement :
 
 ```js
-// Add this in node_modules/react-dom/index.js
+// Ajoutez ça dans node_modules/react-dom/index.js
 window.React1 = require('react');
 
-// Add this in your component file
+// Ajoutez ça dans votre code applicatif
 require('react-dom');
 window.React2 = require('react');
 console.log(window.React1 === window.React2);
 ```
 
-If it prints `false` then you might have two Reacts and need to figure out why that happened. [This issue](https://github.com/facebook/react/issues/13991) includes some common reasons encountered by the community.
+Si ça affiche `false` alors vous avez probablement deux Reacts et devez en déterminer la cause. [Ce ticket](https://github.com/facebook/react/issues/13991) détaille quelques raisons rencontrées par la communauté.
 
-This problem can also come up when you use `npm link` or an equivalent. In that case, your bundler might "see" two Reacts — one in application folder and one in your library folder. Assuming `myapp` and `mylib` are sibling folders, one possible fix is to run `npm link ../myapp/node_modules/react` from `mylib`. This should make the library use the application's React copy.
+Ce problème peut aussi survenir lorsque vous utilisez `npm link` ou un équivalent. Dans un tel cas, votre *bundler* pourrait « voir » deux Reacts — un dans votre dossier applicatif et un dans votre dossier de bibliothèque.  En supposant que `myapp` et `mylib` sont des dossiers de même niveau, un correctif possible consiste à exécuter `npm link ../myapp/node_modules/react` depuis `mylib`. Ça devrait faire en sorte que la bibliothèque utilise bien la copie de React du dossier applicatif.
 
 <Note>
 
-In general, React supports using multiple independent copies on one page (for example, if an app and a third-party widget both use it). It only breaks if `require('react')` resolves differently between the component and the `react-dom` copy it was rendered with.
+En général, React prend en charge plusieurs copies indépendantes sur une même page (si par exemple une appli et un widget tiers s'en servent tous les deux).  Ça ne pose problème que si `require('react')` ou `import from 'react'` résolvent différemment entre un composant et la copie de `react-dom` qui assure son rendu.
 
 </Note>
 
-## Other Causes {/*other-causes*/}
+## Autres causes {/*other-causes*/}
 
-If none of this worked, please comment in [this issue](https://github.com/facebook/react/issues/13991) and we'll try to help. Try to create a small reproducing example — you might discover the problem as you're doing it.
+Si rien de tout ça n'a résolu le souci, merci d'ajouter un commentaire à [ce ticket](https://github.com/facebook/react/issues/13991), nous essaierons de vous aider. Essayez de créer un cas minimal reproductible pour appuyer votre demande — vous pourriez d'ailleurs trouver l'origine du problème à cette occasion.

src/content/warnings/special-props.md

@@ -1,7 +1,7 @@
 ---
-title: Special Props Warning
+title: Avertissement de props à traitement spécial
 ---
 
-Most props on a JSX element are passed on to the component, however, there are two special props (`ref` and `key`) which are used by React, and are thus not forwarded to the component.
+La plupart des props d'un élément JSX sont passées au composant ; ceci dit, deux props ont un traitement spécial par React (`key` et `ref`), et ne sont donc pas passées au composant.
 
-For instance, you can't read `props.key` from a component. If you need to access the same value within the child component, you should pass it as a different prop (ex: `<ListItemWrapper key={result.id} id={result.id} />` and read `props.id`). While this may seem redundant, it's important to separate app logic from hints to React.
+Vous ne pouvez pas par exemple lire `props.key` depuis un composant.  Si vous avez besoni d'accéder à la même valeur au sein d'un composant enfant, vous devriez la passer via une prop distincte (par exemple `<ListItemWrapper key={result.id} id={result.id} />` puis lire `props.id`). Ça peut sembler redondant, mais c'est nécessaire pour séparer la logique applicative des informations à destination du moteur de React.

src/content/warnings/unknown-prop.md

@@ -1,38 +1,38 @@
 ---
-title: Unknown Prop Warning
+title: Avertissement de prop inconnue
 ---
 
-The unknown-prop warning will fire if you attempt to render a DOM element with a prop that is not recognized by React as a legal DOM attribute/property. You should ensure that your DOM elements do not have spurious props floating around.
+L'avertissement de prop inconnue est déclenché lorsque vous tentez d'afficher un élément DOM avec une prop que React ne reconnaît pas comme étant une propriété / un attribut DOM légal.  Assurez-vous que vos éléments DOM n'ont pas des propriétés louches qui traînent.
 
-There are a couple of likely reasons this warning could be appearing:
+Il y a quelques raisons courantes pour cet avertissement :
 
-1. Are you using `{...props}` or `cloneElement(element, props)`? When copying props to a child component, you should ensure that you are not accidentally forwarding props that were intended only for the parent component. See common fixes for this problem below.
+1. Utilisez-vous `{...props}` ou `cloneElement(element, props)` ? Quand vous copiez des props vers un composant enfant, assurez-vous que vous ne transmettez pas accidentellement des props qui ne visaient que le composant parent.  Vous trouverez des solutions usuelles plus bas.
 
-2. You are using a non-standard DOM attribute on a native DOM node, perhaps to represent custom data. If you are trying to attach custom data to a standard DOM element, consider using a custom data attribute as described [on MDN](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes).
+2. Vous utilisez un attribut DOM non standard sur un nœud DOM natif, peut-être pour représenter des données personnalisées.  Si vous tentez d'attacher des données personnalisées à un élément DOM standard, envisagez plutôt d'utiliser des attributs `data-*` comme le décrit le [MDN](https://developer.mozilla.org/fr/docs/Learn/HTML/Howto/Use_data_attributes).
 
-3. React does not yet recognize the attribute you specified. This will likely be fixed in a future version of React. React will allow you to pass it without a warning if you write the attribute name lowercase.
+3. React ne reconnaît pas encore l'attribut que vous avez spécifié.  Ça sera probablement corrigé dans une future version de React.  React vous autorisera à passer cet attribut sans avertissement si son nom est entièrement en minuscules.
 
-4. You are using a React component without an upper case, for example `<myButton />`. React interprets it as a DOM tag because React JSX transform uses the upper vs. lower case convention to distinguish between user-defined components and DOM tags. For your own React components, use PascalCase. For example, write `<MyButton />` instead of `<myButton />`.
+4. Vous utilisez un composant React sans initiale majuscule, par exemple `<myButton />`. React comprend ça comme une balise DOM native parce que JSX distingue entre les initiales majuscule et minuscule des balises pour choisir entre des composants à vous et des éléments DOM natifs.  Pour vos propres composants React, utilisez la *PascalCase*. Écrivez par exemple `<MyButton />` plutôt que `<myButton />`.
 
 ---
 
-If you get this warning because you pass props like `{...props}`, your parent component needs to "consume" any prop that is intended for the parent component and not intended for the child component. Example:
+Si vous recevez cet avertissement parce que vous transmettez des props avec par exemple `{...props}`, votre composant parent doit d'abord « consommer » toute prop qui ne vise que lui, et non ses composants enfants.  Voici un exemple :
 
-**Bad:** Unexpected `layout` prop is forwarded to the `div` tag.
+**Erroné :** une prop `layout` inattendue est transmise à la balise `div`.
 
 ```js
 function MyDiv(props) {
   if (props.layout === 'horizontal') {
-    // BAD! Because you know for sure "layout" is not a prop that <div> understands.
+    // PROBLÉMATIQUE ! Car on sait bien que <div> n’a pas de propriété "layout".
     return <div {...props} style={getHorizontalStyle()} />
   } else {
-    // BAD! Because you know for sure "layout" is not a prop that <div> understands.
+    // PROBLÉMATIQUE ! Car on sait bien que <div> n’a pas de propriété "layout".
     return <div {...props} style={getVerticalStyle()} />
   }
 }
 ```
 
-**Good:** The spread syntax can be used to pull variables off props, and put the remaining props into a variable.
+**Correct :** vous pouvez utiliser la syntaxe de *rest nominatif* pour retirer certaines données des props à transférer, en plaçant les autres dans une variable.
 
 ```js
 function MyDiv(props) {
@@ -45,7 +45,7 @@ function MyDiv(props) {
 }
 ```
 
-**Good:** You can also assign the props to a new object and delete the keys that you're using from the new object. Be sure not to delete the props from the original `this.props` object, since that object should be considered immutable.
+**Correct :** vous pouvez aussi affecter les props à un nouvel objet et en retirer les clés que vous n'utilisez pas.  Assurez-vous de ne pas retirer ces clés des props d'origine, car celles-ci sont considérées immuables.
 
 ```js
 function MyDiv(props) {

src/sidebarHome.json

@@ -1,5 +1,5 @@
 {
-  "title": "React Docs",
+  "title": "Docs React",
   "path": "/",
   "routes": [
     {