From c24630ca7d8a3318d9ce0169bff55a7c7b7bd850 Mon Sep 17 00:00:00 2001 From: Pascal Fong Kye Date: Sat, 6 May 2023 10:36:09 +0000 Subject: [PATCH 1/3] doc(adding_interactivity): translate in french the index --- src/content/learn/adding-interactivity.md | 210 +++++++++++----------- src/sidebarHome.json | 2 +- src/sidebarLearn.json | 14 +- 3 files changed, 113 insertions(+), 113 deletions(-) diff --git a/src/content/learn/adding-interactivity.md b/src/content/learn/adding-interactivity.md index 501c9f620..31bbb822d 100644 --- a/src/content/learn/adding-interactivity.md +++ b/src/content/learn/adding-interactivity.md @@ -1,30 +1,30 @@ --- -title: Adding Interactivity +title: Ajout d'interactivité --- -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. -* [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) -## 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 ` ); @@ -68,22 +68,22 @@ button { margin-right: 10px; } -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. -## 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 : @@ -112,17 +112,17 @@ export default function Gallery() { return ( <>

{sculpture.name} - by {sculpture.artist} + par {sculpture.artist}

- ({index + 1} of {sculptureList.length}) + ({index + 1} de {sculptureList.length})

{showMore &&

{sculpture.description}

} -Read **[State: A Component's Memory](/learn/state-a-components-memory)** to learn how to remember a value and update it on interaction. +Lisez **[État : la mémoire d'un composant](/learn/state-a-components-memory)** pour apprendre comment mémoriser une valeur et la mettre à jour lors d'une interaction. -## Render and commit {/*render-and-commit*/} +## Le rendu et la mise à jour {/*render-and-commit*/} -Before your components are displayed on the screen, they must be rendered by React. Understanding the steps in this process will help you think about how your code executes and explain its behavior. +Avant que vos composants ne soient affichés à l'écran, ils doivent être rendus par React. Comprendre les étapes de ce processus vous aidera à réfléchir à la manière dont votre code s'exécute et à expliquer son comportement. -Imagine that your components are cooks in the kitchen, assembling tasty dishes from ingredients. In this scenario, React is the waiter who puts in requests from customers and brings them their orders. This process of requesting and serving UI has three steps: +Imaginez que vos composants soient des cuisiniers dans un restaurant, assemblant des plats savoureux à partir d'ingrédients. Dans ce scénario, React est le serveur qui prend les commandes des clients et leur apporte leurs plats. Ce processus de demander et de servir de l'interface utilisateur comporte trois étapes : -1. **Triggering** a render (delivering the diner's order to the kitchen) -2. **Rendering** the component (preparing the order in the kitchen) -3. **Committing** to the DOM (placing the order on the table) +1. **Déclencher** un rendu (livrer la commande du client à la cuisine) +2. **Faire le rendu** du composant (préparer la commande en cuisine) +3. **Mettre à jour** le DOM (placer la commande sur la table du client) - - - + + + -Read **[Render and Commit](/learn/render-and-commit)** to learn the lifecycle of a UI update. +Lisez **[Le rendu et la mise à jour](/learn/render-and-commit)** pour apprendre sur le cycle de vie de la mise à jour d'une interface utilisateur. -## State as a snapshot {/*state-as-a-snapshot*/} +## L'état comme une capture {/*state-as-a-snapshot*/} -Unlike regular JavaScript variables, React state behaves more like a snapshot. Setting it does not change the state variable you already have, but instead triggers a re-render. This can be surprising at first! +Contrairement aux variables JavaScript classiques, une variable d'état de React se comporte plus comme une capture à un instant T. Lui affecter une nouvelle valeur ne change pas la variable d'état que vous avez déjà, mais déclenche plutôt un nouveau rendu. Cela peut être surprenant au début ! ```js console.log(count); // 0 -setCount(count + 1); // Request a re-render with 1 -console.log(count); // Still 0! +setCount(count + 1); // Déclenche un nouveau rendu avec la valeur 1 +console.log(count); // Toujours 0! ``` -This behavior help you avoid subtle bugs. Here is a little chat app. Try to guess what happens if you press "Send" first and *then* change the recipient to Bob. Whose name will appear in the `alert` five seconds later? +Ce comportement vous aide à éviter des bugs subtils. Voici une petite application de chat. Essayez de deviner ce qui se passe si vous appuyez sur "Envoyer" d'abord, *puis* changez le destinataire en Bob. Quel nom apparaîtra dans `alert` cinq secondes plus tard ? @@ -279,14 +279,14 @@ export default function Form() { function handleSubmit(e) { e.preventDefault(); setTimeout(() => { - alert(`You said ${message} to ${to}`); + alert(`Vouz avez dit ${message} à ${to}`); }, 5000); } return (