copy(l10n): first part of React rules

Author: tdd

src/content/reference/rules/components-and-hooks-must-be-pure.md

@@ -1,5 +1,5 @@
 ---
-title: Les composants et les Hooks doivent être purs
+title: Les composants et les Hooks doivent être des fonctions pures
 ---
 
 {/* FIXME:L10N */}

src/content/reference/rules/index.md

@@ -2,53 +2,55 @@
 title: Les règles de React
 ---
 
-{/* FIXME:L10N */}
-
 <Intro>
-Just as different programming languages have their own ways of expressing concepts, React has its own idioms — or rules — for how to express patterns in a way that is easy to understand and yields high-quality applications.
+
+Tout comme des langages de programmation distincts ont leurs propres manières d'exprimer des concepts, React a ses propres idiômes — ou règles — pour exprimer certaines approches de façon facile à comprendre, afin de produire des applications de grande qualité.
+
 </Intro>
 
 <InlineToc />
 
 ---
 
 <Note>
-To learn more about expressing UIs with React, we recommend reading [Thinking in React](/learn/thinking-in-react).
+
+Pour apprendre comment décrire des UI avec React, nous vous recommandons de lire [Penser en React](/learn/thinking-in-react).
+
 </Note>
 
-This section describes the rules you need to follow to write idiomatic React code. Writing idiomatic React code can help you write well organized, safe, and composable applications. These properties make your app more resilient to changes and makes it easier to work with other developers, libraries, and tools.
+Cette section décrit les règles que vous devez suivre pour écrire du code React idiomatique.  Écrire du code React idiomatique vous aidera à construire des applications bien organisées, fiables et composables.  Ces propriétés améliorent la résilience aux chaangements de votre appli, et facilitent son sa maintenance par d'autres développeur·ses et son intégration avec des bibliothèques et outils tiers.
 
-These rules are known as the **Rules of React**. They are rules – and not just guidelines – in the sense that if they are broken, your app likely has bugs. Your code also becomes unidiomatic and harder to understand and reason about.
+Ces règles sont connues sous le termes **Règles de React**. Ce sont bien des règles — et pas juste des recommandations — dans le sens où, si vous les enfreignez, votre appli aura sans doute des bugs.  Votre code deviendra non-idiomatique et plus difficile à comprendre et à modéliser mentalement.
 
-We strongly recommend using [Strict Mode](/reference/react/StrictMode) alongside React's [ESLint plugin](https://www.npmjs.com/package/eslint-plugin-react-hooks) to help your codebase follow the Rules of React. By following the Rules of React, you'll be able to find and address these bugs and keep your application maintainable.
+Nous vous encourageons fortement à utiliser le [mode strict](/reference/react/StrictMode) ainsi que le [plugin ESLint](https://www.npmjs.com/package/eslint-plugin-react-hooks) de React pour vous aider à produire une base de code qui suive les Règles de React.  En suivant les Règles de React, vous détecterez et corrigerez ces bugs et obtiendrez une application plus maintenable.
 
 ---
 
-## Components and Hooks must be pure {/*components-and-hooks-must-be-pure*/}
+## Les composants et les Hooks doivent être des fonctions pures {/*components-and-hooks-must-be-pure*/}
 
-[Purity in Components and Hooks](/reference/rules/components-and-hooks-must-be-pure) is a key rule of React that makes your app predictable, easy to debug, and allows React to automatically optimize your code.
+[La pureté des Composants et des Hooks](/reference/rules/components-and-hooks-must-be-pure) est une règle clé de React qui rend votre appli prévisible, facile à déboguer, et permet à React d'optimiser votre code.
 
-* [Components must be idempotent](/reference/rules/components-and-hooks-must-be-pure#components-and-hooks-must-be-idempotent) – React components are assumed to always return the same output with respect to their inputs – props, state, and context.
-* [Side effects must run outside of render](/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render) – Side effects should not run in render, as React can render components multiple times to create the best possible user experience.
-* [Props and state are immutable](/reference/rules/components-and-hooks-must-be-pure#props-and-state-are-immutable) – A component’s props and state are immutable snapshots with respect to a single render. Never mutate them directly.
-* [Return values and arguments to Hooks are immutable](/reference/rules/components-and-hooks-must-be-pure#return-values-and-arguments-to-hooks-are-immutable) – Once values are passed to a Hook, you should not modify them. Like props in JSX, values become immutable when passed to a Hook.
-* [Values are immutable after being passed to JSX](/reference/rules/components-and-hooks-must-be-pure#values-are-immutable-after-being-passed-to-jsx) – Don’t mutate values after they’ve been used in JSX. Move the mutation before the JSX is created.
+* [Les composants doivent être idempotents](/reference/rules/components-and-hooks-must-be-pure#components-and-hooks-must-be-idempotent) – Les composants React sont supposés toujours renvoyer le même résultat pour les mêmes entrées – props, états locaux et contextes.
+* [Les effets de bord doivent être exécutés hors du rendu](/reference/rules/components-and-hooks-must-be-pure#side-effects-must-run-outside-of-render) – Les effets de bord ne doivent pas être exécutés lors du rendu, afin que React puisse effectuer plusieurs fois le rendu de composants afin de créer la meilleure expérience utilisateur.
+* [Les props et l'état sont immuables](/reference/rules/components-and-hooks-must-be-pure#props-and-state-are-immutable) – Les props et les états locaux d'un composant sont considérés comme des instantanés immuables au sein d'un même rendu.  Ne les modifiez jamais directement.
+* [Les valeurs renvoyées par les Hooks et leurs arguments sont immuables](/reference/rules/components-and-hooks-must-be-pure#return-values-and-arguments-to-hooks-are-immutable) – Une fois que des valeurs sont passées à un Hook, vous ne devriez jamais les modifier.  Tout comme les props en JSX, ces valeurs deviennent immuables une fois passées à un Hook.
+* [Les valeurs sont immuables une fois passées à JSX](/reference/rules/components-and-hooks-must-be-pure#values-are-immutable-after-being-passed-to-jsx) – Ne modifiez pas des valeurs une fois que vous les avez utilisées dans du JSX.  Déplacez la mutation en amont, avant que le JSX soit créé.
 
 ---
 
-## React calls Components and Hooks {/*react-calls-components-and-hooks*/}
+## React appelle les composants et les Hooks {/*react-calls-components-and-hooks*/}
 
-[React is responsible for rendering components and hooks when necessary to optimize the user experience.](/reference/rules/react-calls-components-and-hooks) It is declarative: you tell React what to render in your component’s logic, and React will figure out how best to display it to your user.
+[React s'occupe de réaliser le rendu des composants et des Hooks lorsque c'est nécessaire, afin d'optimiser l'expérience utilisateur](/reference/rules/react-calls-components-and-hooks). C'est une approche déclarative : vous dites à React quel rendu effectuer dans la logique de votre composant, et React déterminera comment réaliser au mieux l'affichage pour l'utilisateur.
 
-* [Never call component functions directly](/reference/rules/react-calls-components-and-hooks#never-call-component-functions-directly) – Components should only be used in JSX. Don’t call them as regular functions.
-* [Never pass around hooks as regular values](/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values) – Hooks should only be called inside of components. Never pass it around as a regular value.
+* [N'appelez jamais les fonctions composants directement](/reference/rules/react-calls-components-and-hooks#never-call-component-functions-directly) – Les composants ne devraient être utilisés que dans du JSX. Ne les appelez pas en tant que fonctions classiques.
+* [Ne passez jamais des Hooks comme des valeurs classiques](/reference/rules/react-calls-components-and-hooks#never-pass-around-hooks-as-regular-values) – Les Hooks ne devraient être appelés qu'au sein de composants. Ne les passez pas comme des valeurs classiques.
 
 ---
 
-## Rules of Hooks {/*rules-of-hooks*/}
+## Les règles des Hooks {/*rules-of-hooks*/}
 
-Hooks are defined using JavaScript functions, but they represent a special type of reusable UI logic with restrictions on where they can be called. You need to follow the [Rules of Hooks](/reference/rules/rules-of-hooks) when using them.
+Les Hooks sont définis au moyen de fonctions JavaScript, mais représentent un type spécifique de logique d'UI réutilisable, avec des restrictions sur leurs emplacements d'appel. Vous devez suivre les [Règles des Hooks](/reference/rules/rules-of-hooks) lorsque vous les employez.
 
-* [Only call Hooks at the top level](/reference/rules/rules-of-hooks#only-call-hooks-at-the-top-level) – 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.
-* [Only call Hooks from React functions](/reference/rules/rules-of-hooks#only-call-hooks-from-react-functions) – Don’t call Hooks from regular JavaScript functions.
+* [N'appelez des Hooks qu'au niveau racine](/reference/rules/rules-of-hooks#only-call-hooks-at-the-top-level) – Ne les appelez pas dans des boucles, des conditions ou des fonctions imbriquées.  Utilisez plutôt toujours les Hooks au niveau racine de votre fonction React, avant d'éventuels retours anticipés.
+* [N'appelez les Hooks que depuis des fonctions React](/reference/rules/rules-of-hooks#only-call-hooks-from-react-functions) – N'appelez pas les Hooks depuis des fonctions JavaScript classiques.
 

src/sidebarReference.json

@@ -346,7 +346,7 @@
       "path": "/reference/rules",
       "routes": [
         {
-          "title": "Les composants et les Hooks doivent être purs",
+          "title": "Les composants et les Hooks doivent être des fonctions pures",
           "path": "/reference/rules/components-and-hooks-must-be-pure"
         },
         {