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,30 +62,30 @@ 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>