doc(adding_interactivity): translate in french

Author: pfongkye

src/content/learn/adding-interactivity.md

@@ -1,39 +1,39 @@
 ---
-title: Adding Interactivity
+title: Ajout d'interactivité
 ---
 
 <Intro>
 
-Some things on the screen update in response to user input. For example, clicking an image gallery switches the active image. In React, data that changes over time is called *state.* You can add state to any component, and update it as needed. In this chapter, you'll learn how to write components that handle interactions, update their state, and display different output over time.
+Certaines choses à l'écran se mettent à jour en réponse aux entrées de l'utilisateur. Par exemple, en cliquant sur une galerie d'images, l'image active change. En React, les données qui changent au fil du temps sont appelées *états.* Vous pouvez ajouter un état à n'importe quel composant et le mettre à jour au besoin. Dans ce chapitre, vous apprendrez à écrire des composants qui gèrent les interactions, mettent à jour leur état et affichent un visuel différent au fil du temps.
 
 </Intro>
 
 <YouWillLearn isChapter={true}>
 
-* [How to handle user-initiated events](/learn/responding-to-events)
-* [How to make components "remember" information with state](/learn/state-a-components-memory)
-* [How React updates the UI in two phases](/learn/render-and-commit)
-* [Why state doesn't update right after you change it](/learn/state-as-a-snapshot)
-* [How to queue multiple state updates](/learn/queueing-a-series-of-state-updates)
-* [How to update an object in state](/learn/updating-objects-in-state)
-* [How to update an array in state](/learn/updating-arrays-in-state)
+* [Comment gérer les événements initiés par l'utilisateur](/learn/responding-to-events)
+* [Comment faire en sorte que les composants "se souviennent" des informations en utilisant des états](/learn/state-a-components-memory)
+* [Comment React met à jour l'interface utilisateur en deux phases](/learn/render-and-commit)
+* [Pourquoi l'état ne se met pas à jour immédiatement après sa modification](/learn/state-as-a-snapshot)
+* [Comment mettre en file d'attente plusieurs mises à jour de l'état](/learn/queueing-a-series-of-state-updates)
+* [Comment mettre à jour un objet dans l'état](/learn/updating-objects-in-state)
+* [Comment mettre à jour un tableau dans l'état](/learn/updating-arrays-in-state)
 
 </YouWillLearn>
 
-## Responding to events {/*responding-to-events*/}
+## Répondre aux événements {/*responding-to-events*/}
 
-React lets you add *event handlers* to your JSX. Event handlers are your own functions that will be triggered in response to user interactions like clicking, hovering, focusing on form inputs, and so on.
+React vous permet d'ajouter des *gestionnaires d'événements* à votre JSX. Les gestionnaires d'événements sont vos propres fonctions qui seront déclenchées en réponse aux interactions de l'utilisateur telles que le clic, le survol, la mise au point sur les champs de saisie de formulaire, etc.
 
-Built-in components like `<button>` only support built-in browser events like `onClick`. However, you can also create your own components, and give their event handler props any application-specific names that you like.
+Les composants intégrés tels que `<button>` ne prennent en charge que les événements intégrés du navigateur tels que `onClick`. Cependant, vous pouvez également créer vos propres composants et donner à leurs props de gestionnaire d'événements des noms spécifiques à l'application que vous souhaitez.
 
 <Sandpack>
 
 ```js
 export default function App() {
   return (
     <Toolbar
-      onPlayMovie={() => alert('Playing!')}
-      onUploadImage={() => alert('Uploading!')}
+      onPlayMovie={() => alert('Lecture en cours !')}
+      onUploadImage={() => alert('Téléchargement en cours !')}
     />
   );
 }
@@ -42,10 +42,10 @@ function Toolbar({ onPlayMovie, onUploadImage }) {
   return (
     <div>
       <Button onClick={onPlayMovie}>
-        Play Movie
+        Jouer film
       </Button>
       <Button onClick={onUploadImage}>
-        Upload Image
+        Télécharger image
       </Button>
     </div>
   );
@@ -68,22 +68,22 @@ button { margin-right: 10px; }
 
 <LearnMore path="/learn/responding-to-events">
 
-Read **[Responding to Events](/learn/responding-to-events)** to learn how to add event handlers.
+Lisez **[Répondre aux événements](/learn/responding-to-events)** pour apprendre comment ajouter des gestionnaires d'événements.
 
 </LearnMore>
 
-## State: a component's memory {/*state-a-components-memory*/}
+## État : la mémoire d'un composant {/*state-a-components-memory*/}
 
-Components often need to change what's on the screen as a result of an interaction. Typing into the form should update the input field, clicking "next" on an image carousel should change which image is displayed, clicking "buy" puts a product in the shopping cart. Components need to "remember" things: the current input value, the current image, the shopping cart. In React, this kind of component-specific memory is called *state.*
+Les composants ont souvent besoin de modifier ce qui est affiché à l'écran en réponse à une interaction. Par exemple, saisir du texte dans un formulaire devrait mettre à jour le champ de saisie, cliquer sur "suivant" dans un carrousel d'images devrait changer l'image affichée, cliquer sur "acheter" ajoute un produit au panier d'achat. Les composants ont besoin de "se souvenir" de certaines choses : la valeur d'entrée actuelle, l'image actuelle, le panier d'achat. En React, ce type de mémoire spécifique au composant est appelé *état*.
 
-You can add state to a component with a [`useState`](/reference/react/useState) Hook. *Hooks* are special functions that let your components use React features (state is one of those features). The `useState` Hook lets you declare a state variable. It takes the initial state and returns a pair of values: the current state, and a state setter function that lets you update it.
+Vous pouvez ajouter un état à un composant avec un Hook [`useState`](/reference/react/useState). Les *Hooks* sont des fonctions spéciales qui permettent à vos composants d'utiliser des fonctionnalités de React (l'état en est une). Le Hook `useState` vous permet de déclarer une variable d'état. Il prend l'état initial en argument et renvoie une paire de valeurs : l'état actuel et une fonction de mise à jour de l'état qui vous permet de le modifier.
 
 ```js
 const [index, setIndex] = useState(0);
 const [showMore, setShowMore] = useState(false);
 ```
 
-Here is how an image gallery uses and updates state on click:
+Voici comment une galerie d'images utilise et met à jour l'état lors d'un clic :
 
 <Sandpack>
 
@@ -112,17 +112,17 @@ export default function Gallery() {
   return (
     <>
       <button onClick={handleNextClick}>
-        Next
+        Suivant
       </button>
       <h2>
         <i>{sculpture.name} </i>
-        by {sculpture.artist}
+        par {sculpture.artist}
       </h2>
       <h3>
-        ({index + 1} of {sculptureList.length})
+        ({index + 1} de {sculptureList.length})
       </h3>
       <button onClick={handleMoreClick}>
-        {showMore ? 'Hide' : 'Show'} details
+        {showMore ? 'Cacher' : 'Afficher'} détails
       </button>
       {showMore && <p>{sculpture.description}</p>}
       <img
@@ -138,45 +138,45 @@ export default function Gallery() {
 export const sculptureList = [{
   name: 'Homenaje a la Neurocirugía',
   artist: 'Marta Colvin Andrade',
-  description: 'Although Colvin is predominantly known for abstract themes that allude to pre-Hispanic symbols, this gigantic sculpture, an homage to neurosurgery, is one of her most recognizable public art pieces.',
+  description: 'Bien que Colvin soit principalement connue pour ses thèmes abstraits qui font allusion à des symboles préhispaniques, cette sculpture gigantesque, un hommage à la neurochirurgie, est l\'une de ses pièces d\'art public les plus reconnaissables.',
   url: 'https://i.imgur.com/Mx7dA2Y.jpg',
-  alt: 'A bronze statue of two crossed hands delicately holding a human brain in their fingertips.'
+  alt: 'Une statue en bronze de deux mains croisées tenant délicatement un cerveau humain du bout des doigts.'
 }, {
   name: 'Floralis Genérica',
   artist: 'Eduardo Catalano',
-  description: 'This enormous (75 ft. or 23m) silver flower is located in Buenos Aires. It is designed to move, closing its petals in the evening or when strong winds blow and opening them in the morning.',
+  description: 'Cette immense fleur argentée (de 23 mètres de haut ou 75 pieds) est située à Buenos Aires. Elle est conçue pour bouger, en fermant ses pétales le soir ou lors de vents forts, et en les ouvrant le matin.',
   url: 'https://i.imgur.com/ZF6s192m.jpg',
-  alt: 'A gigantic metallic flower sculpture with reflective mirror-like petals and strong stamens.'
+  alt: 'Une sculpture de fleur métallique gigantesque avec des pétales réfléchissants, semblables à des miroirs, et des étamines solides.'
 }, {
   name: 'Eternal Presence',
   artist: 'John Woodrow Wilson',
-  description: 'Wilson was known for his preoccupation with equality, social justice, as well as the essential and spiritual qualities of humankind. This massive (7ft. or 2,13m) bronze represents what he described as "a symbolic Black presence infused with a sense of universal humanity."',
+  description: 'Wilson était connu pour sa préoccupation pour l\'égalité, la justice sociale, ainsi que les qualités essentielles et spirituelles de l\'humanité. Ce bronze massif (de 2,13 mètres de hauteur ou 7 pieds) représente ce qu\'il a décrit comme "une présence noire symbolique imprégnée d\'un sens d\'humanité universelle"."',
   url: 'https://i.imgur.com/aTtVpES.jpg',
-  alt: 'The sculpture depicting a human head seems ever-present and solemn. It radiates calm and serenity.'
+  alt: 'La sculpture représentant une tête humaine semble être toujours présente et solennelle. Elle rayonne de calme et de sérénité.'
 }, {
   name: 'Moai',
   artist: 'Unknown Artist',
-  description: 'Located on the Easter Island, there are 1,000 moai, or extant monumental statues, created by the early Rapa Nui people, which some believe represented deified ancestors.',
+  description: 'Sur l\'île de Pâques, il y a 1 000 moaïs, ou statues monumentales encore existantes, créées par les premiers habitants Rapa Nui, que certains croient représenter des ancêtres divinisés.',
   url: 'https://i.imgur.com/RCwLEoQm.jpg',
-  alt: 'Three monumental stone busts with the heads that are disproportionately large with somber faces.'
+  alt: 'Trois bustes de pierre monumentaux avec des têtes démesurément grandes et des visages sombres.'
 }, {
   name: 'Blue Nana',
   artist: 'Niki de Saint Phalle',
-  description: 'The Nanas are triumphant creatures, symbols of femininity and maternity. Initially, Saint Phalle used fabric and found objects for the Nanas, and later on introduced polyester to achieve a more vibrant effect.',
+  description: 'Les Nanas sont des créatures triomphantes, symboles de féminité et de maternité. Initialement, Saint Phalle utilisait des tissus et des objets trouvés pour les Nanas, et plus tard, elle a introduit du polyester pour obtenir un effet plus vibrant.',
   url: 'https://i.imgur.com/Sd1AgUOm.jpg',
-  alt: 'A large mosaic sculpture of a whimsical dancing female figure in a colorful costume emanating joy.'
+  alt: 'Une grande sculpture en mosaïque d\'une figure féminine fantaisiste dansant dans un costume coloré rayonnant de joie.'
 }, {
   name: 'Ultimate Form',
   artist: 'Barbara Hepworth',
-  description: 'This abstract bronze sculpture is a part of The Family of Man series located at Yorkshire Sculpture Park. Hepworth chose not to create literal representations of the world but developed abstract forms inspired by people and landscapes.',
+  description: 'Cette sculpture abstraite en bronze fait partie de la série "La Famille de l\'Homme" située au parc de sculptures de Yorkshire. Hepworth a choisi de ne pas créer des représentations littérales du monde, mais a développé des formes abstraites inspirées des personnes et des paysages.',
   url: 'https://i.imgur.com/2heNQDcm.jpg',
-  alt: 'A tall sculpture made of three elements stacked on each other reminding of a human figure.'
+  alt: 'Une sculpture haute composée de trois éléments empilés rappelant une figure humaine.'
 }, {
   name: 'Cavaliere',
   artist: 'Lamidi Olonade Fakeye',
-  description: "Descended from four generations of woodcarvers, Fakeye's work blended traditional and contemporary Yoruba themes.",
+  description: "Descendant de quatre générations de sculpteurs sur bois, le travail de Fakeye mélangeait des thèmes traditionnels et contemporains yorubas.",
   url: 'https://i.imgur.com/wIdGuZwm.png',
-  alt: 'An intricate wood sculpture of a warrior with a focused face on a horse adorned with patterns.'
+  alt: 'Une sculpture en bois complexe représentant un guerrier au visage concentré sur un cheval orné de motifs.'
 }, {
   name: 'Big Bellies',
   artist: 'Alina Szapocznikow',