doc(responding_to_events): translate in french

Author: pfongkye

src/content/learn/responding-to-events.md

@@ -1,56 +1,56 @@
 ---
-title: Responding to Events
+title: Réagir aux événements
 ---
 
 <Intro>
 
-React lets you add *event handlers* to your JSX. Event handlers are your own functions that will be triggered in response to interactions like clicking, hovering, focusing 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 des clics, survols, activations de champs de saisie de formulaires, etc.
 
 </Intro>
 
 <YouWillLearn>
 
-* Different ways to write an event handler
-* How to pass event handling logic from a parent component
-* How events propagate and how to stop them
+* Différentes façons d’écrire un gestionnaire d’événements
+* Comment passer la logique de gestion d’événements depuis un composant parent
+* Comment les événements se propagent et comment les arrêter
 
 </YouWillLearn>
 
-## Adding event handlers {/*adding-event-handlers*/}
+## Ajouter des gestionnaires d’événements {/*adding-event-handlers*/}
 
-To add an event handler, you will first define a function and then [pass it as a prop](/learn/passing-props-to-a-component) to the appropriate JSX tag. For example, here is a button that doesn't do anything yet:
+Pour ajouter un gestionnaire d’événements, vous devrez d’abord définir une fonction et [la passer en tant que prop](/learn/passing-props-to-a-component) à la balise JSX appropriée. Par exemple, voici un bouton qui ne fait rien pour le moment :
 
 <Sandpack>
 
 ```js
 export default function Button() {
   return (
     <button>
-      I don't do anything
+      Je ne fais rien
     </button>
   );
 }
 ```
 
 </Sandpack>
 
-You can make it show a message when a user clicks by following these three steps:
+Vous pouvez faire afficher un message après un clic sur le bouton en suivant ces trois étapes :
 
-1. Declare a function called `handleClick` *inside* your `Button` component.
-2. Implement the logic inside that function (use `alert` to show the message).
-3. Add `onClick={handleClick}` to the `<button>` JSX.
+1. Déclarez une fonction appelée `handleClick` *dans* votre composant `Button`.
+2. Implémentez la logique de cette fonction (utilisez `alert` pour afficher le message).
+3. Ajoutez `onClick={handleClick}` au `<button>` en JSX.
 
 <Sandpack>
 
 ```js
 export default function Button() {
   function handleClick() {
-    alert('You clicked me!');
+    alert('Vous m’avez cliqué !');
   }
 
   return (
     <button onClick={handleClick}>
-      Click me
+      Cliquez-moi
     </button>
   );
 }
@@ -62,77 +62,77 @@ button { margin-right: 10px; }
 
 </Sandpack>
 
-You defined the `handleClick` function and then [passed it as a prop](/learn/passing-props-to-a-component) to `<button>`.  `handleClick` is an **event handler.** Event handler functions:
+Vous avez défini la fonction `handleClick` puis l'avez [passée en tant que prop](/learn/passing-props-to-a-component) à `<button>`. `handleClick` est un **gestionnaire d'événements**. Les gestionnaires d'événements sont des fonctions qui :
 
-* Are usually defined *inside* your components.
-* Have names that start with `handle`, followed by the name of the event.
+* Sont généralement définies à l'intérieur de vos composants.
+* Ont des noms qui commencent par `handle`, suivi du nom de l'événement.
 
-By convention, it is common to name event handlers as `handle` followed by the event name. You'll often see `onClick={handleClick}`, `onMouseEnter={handleMouseEnter}`, and so on.
+Par convention, il est courant de nommer les gestionnaires d'événements en utilisant `handle` suivi du nom de l'événement. Vous verrez souvent `onClick={handleClick}`, `onMouseEnter={handleMouseEnter}`, et ainsi de suite.
 
-Alternatively, you can define an event handler inline in the JSX:
+Vous pouvez aussi définir un gestionnaire d'événements en ligne dans le JSX :
 
 ```jsx
 <button onClick={function handleClick() {
-  alert('You clicked me!');
+  alert('Vous m’avez cliqué !');
 }}>
 ```
 
-Or, more concisely, using an arrow function:
+Ou vous pouvez être plus concis en utilisant une fonction fléchée :
 
 ```jsx
 <button onClick={() => {
-  alert('You clicked me!');
+  alert('Vous m’avez cliqué !');
 }}>
 ```
 
-All of these styles are equivalent. Inline event handlers are convenient for short functions.
+Tous ces styles sont équivalents. Les gestionnaires d'événements en ligne sont pratiques pour les fonctions courtes.
 
 <Pitfall>
 
-Functions passed to event handlers must be passed, not called. For example:
+Vous devez passer une fonction comme gestionnaire d'événements plutôt que de l'appeler. Par exemple :
 
-| passing a function (correct)     | calling a function (incorrect)     |
+| Passer une fonction (correct)     | Appeler une fonction (incorrect)     |
 | -------------------------------- | ---------------------------------- |
 | `<button onClick={handleClick}>` | `<button onClick={handleClick()}>` |
 
-The difference is subtle. In the first example, the `handleClick` function is passed as an `onClick` event handler. This tells React to remember it and only call your function when the user clicks the button.
+La différence est subtile. Dans le premier exemple, on passe la fonction `handleClick` comme gestionnaire d'événements à `onClick`. Ça indique à React de la mémoriser et d'appeler votre fonction uniquement lorsque l'utilisateur clique sur le bouton.
 
-In the second example, the `()` at the end of `handleClick()` fires the function *immediately* during [rendering](/learn/render-and-commit), without any clicks. This is because JavaScript inside the [JSX `{` and `}`](/learn/javascript-in-jsx-with-curly-braces) executes right away.
+Dans le deuxième exemple, on appelle la fonction `handleClick()` avec `()` à la fin, ce qui déclenche la fonction immédiatement pendant [le rendu](/learn/render-and-commit), sans aucun clic. C'est dû au fait que le code JavaScript à l'intérieur des [balises `{` et `}` du JSX](/learn/javascript-in-jsx-with-curly-braces) s'exécute immédiatement.
 
-When you write code inline, the same pitfall presents itself in a different way:
+Quand vous écrivez du code en ligne, le même écueil se présente de manière différente :
 
-| passing a function (correct)            | calling a function (incorrect)    |
+| Passer une fonction (correct)            | Appeler une fonction (incorrect)    |
 | --------------------------------------- | --------------------------------- |
 | `<button onClick={() => alert('...')}>` | `<button onClick={alert('...')}>` |
 
 
-Passing inline code like this won't fire on click—it fires every time the component renders:
+Le code suivant passé en ligne à `onClick` ne se déclenchera pas lors du clic, mais à chaque fois que le composant se rendra : 
 
 ```jsx
-// This alert fires when the component renders, not when clicked!
-<button onClick={alert('You clicked me!')}>
+// La méthode alert se déclenchera à chaque rendu, mais pas au clic du bouton !
+<button onClick={alert('Vous m’avez cliqué !')}>
 ```
 
-If you want to define your event handler inline, wrap it in an anonymous function like so:
+Si vous souhaitez définir votre gestionnaire d'événements en ligne, enrobez-le dans une fonction anonyme de la manière suivante :
 
 ```jsx
-<button onClick={() => alert('You clicked me!')}>
+<button onClick={() => alert('Vous m’avez cliqué !')}>
 ```
 
-Rather than executing the code inside with every render, this creates a function to be called later.
+Au lieu d'exécuter le code à chaque rendu, ça crée une fonction à appeler ultérieurement.
 
-In both cases, what you want to pass is a function:
+Dans les deux cas, ce que vous souhaitez passer est une fonction :
 
-* `<button onClick={handleClick}>` passes the `handleClick` function.
-* `<button onClick={() => alert('...')}>` passes the `() => alert('...')` function.
+* La fonction `handleClick` est passée à `<button onClick={handleClick}>`.
+* La fonction `() => alert('...')` est passée à `<button onClick={() => alert('...')}>`.
 
-[Read more about arrow functions.](https://javascript.info/arrow-functions-basics)
+Lisez [Les fonctions fléchées](https://javascript.info/arrow-functions-basics) pour en apprendre davantage.
 
 </Pitfall>
 
-### Reading props in event handlers {/*reading-props-in-event-handlers*/}
+### Lire les props dans les gestionnaires d'événements {/*reading-props-in-event-handlers*/}
 
-Because event handlers are declared inside of a component, they have access to the component's props. Here is a button that, when clicked, shows an alert with its `message` prop:
+Puisque les gestionnaires d'événements sont déclarés à l'intérieur d'un composant, ils ont accès aux props du composant. Voici un bouton qui, en cliquant dessus, affiche une alerte avec sa prop `message` :
 
 <Sandpack>
 
@@ -148,11 +148,11 @@ function AlertButton({ message, children }) {
 export default function Toolbar() {
   return (
     <div>
-      <AlertButton message="Playing!">
-        Play Movie
+      <AlertButton message="Lecture en cours !">
+        Voir le film
       </AlertButton>
-      <AlertButton message="Uploading!">
-        Upload Image
+      <AlertButton message="Téléversement en cours !">
+        Téléverser une image
       </AlertButton>
     </div>
   );
@@ -165,13 +165,13 @@ button { margin-right: 10px; }
 
 </Sandpack>
 
-This lets these two buttons show different messages. Try changing the messages passed to them.
+Ça permet à ces deux boutons d'afficher des messages différents. Essayez de modifier les messages qui leur sont passés.
 
-### Passing event handlers as props {/*passing-event-handlers-as-props*/}
+### Passer les gestionnaires d'événements en tant que props {/*passing-event-handlers-as-props*/}
 
-Often you'll want the parent component to specify a child's event handler. Consider buttons: depending on where you're using a `Button` component, you might want to execute a different function—perhaps one plays a movie and another uploads an image. 
+Souvent, vous souhaiterez que le composant parent spécifie le gestionnaire d'événements d'un composant enfant. Prenons l'exemple des boutons : en fonction de l'endroit où vous utilisez un composant `Button`, vous voudrez peut-être exécuter une fonction différente, par exemple lancer un film ou téléverser une image.
 
-To do this, pass a prop the component receives from its parent as the event handler like so:
+Pour ça, vous devez passer la prop reçue du composant parent en tant que gestionnaire d'événements du composant enfant :
 
 <Sandpack>
 
@@ -186,28 +186,28 @@ function Button({ onClick, children }) {
 
 function PlayButton({ movieName }) {
   function handlePlayClick() {
-    alert(`Playing ${movieName}!`);
+    alert(`${movieName} en cous de lecture !`);
   }
 
   return (
     <Button onClick={handlePlayClick}>
-      Play "{movieName}"
+      Voir "{movieName}"
     </Button>
   );
 }
 
 function UploadButton() {
   return (
-    <Button onClick={() => alert('Uploading!')}>
-      Upload Image
+    <Button onClick={() => alert('Téléversement en cours !')}>
+      Téléverser une image
     </Button>
   );
 }
 
 export default function Toolbar() {
   return (
     <div>
-      <PlayButton movieName="Kiki's Delivery Service" />
+      <PlayButton movieName="Kiki la petite sorcière" />
       <UploadButton />
     </div>
   );