From a97a34a49ed9c6634f541d9ab58a11d284d3f7f3 Mon Sep 17 00:00:00 2001 From: LECLERS Simon Date: Thu, 27 Apr 2023 22:06:47 +0200 Subject: [PATCH 1/6] 4 first steps --- .../learn/reacting-to-input-with-state.md | 168 +++++++++--------- 1 file changed, 87 insertions(+), 81 deletions(-) diff --git a/src/content/learn/reacting-to-input-with-state.md b/src/content/learn/reacting-to-input-with-state.md index 522aa63a1..0ef0b5591 100644 --- a/src/content/learn/reacting-to-input-with-state.md +++ b/src/content/learn/reacting-to-input-with-state.md @@ -1,37 +1,37 @@ --- -title: Reacting to Input with State +title: Réagir à la saisie avec un état --- -React provides a declarative way to manipulate the UI. Instead of manipulating individual pieces of the UI directly, you describe the different states that your component can be in, and switch between them in response to the user input. This is similar to how designers think about the UI. +React offre un moyen déclaratif de manipuler l’interface utilisateur. Au lieu de manipuler directement des éléments individuels de l’interface, vous décrivez les différents états dans lesquels votre composant peut se trouver, et vous passez de l’un à l’autre en réponse à la saisie de l’utilisateur. Ça ressemble à la façon dont les designers réfléchissent à l’interface utilisateur. -* How declarative UI programming differs from imperative UI programming -* How to enumerate the different visual states your component can be in -* How to trigger the changes between the different visual states from code +* En quoi la programmation déclarative de l’interface utilisateur diffère-t-elle de la programmation impérative de celle-ci +* Comment répertorier les différents états visuels dans lesquels votre composant peut se trouver +* Comment déclencher les changements entre les différents états visuels à partir du code ? -## How declarative UI compares to imperative {/*how-declarative-ui-compares-to-imperative*/} +## En quoi l’interface utilisateur déclarative diffère-t-elle de l’impérative {/*how-declarative-ui-compares-to-imperative*/} -When you design UI interactions, you probably think about how the UI *changes* in response to user actions. Consider a form that lets the user submit an answer: +Lorsque vous concevez des interactions avec l’interface utilisateur, vous pensez probablement à la manière dont l'interface change en réponse aux actions de l’utilisateur. Prenons l’exemple d’un questionnaire qui permet à l’utilisateur de soumettre une réponse : -* When you type something into the form, the "Submit" button **becomes enabled.** -* When you press "Submit", both the form and the button **become disabled,** and a spinner **appears.** -* If the network request succeeds, the form **gets hidden,** and the "Thank you" message **appears.** -* If the network request fails, an error message **appears,** and the form **becomes enabled** again. +* Quand vous écrivez quelque chose dans le questionnaire, le bouton « Submit » **devient activé**. +* Quand vous appuyez sur « Submit », le questionnaire et le bouton **deviennent désactivés**, et un *spinner* **apparait** +* Si la requête réseau réussit, le questionnaire **devient caché**, et le message « Merci » **apparait**. +* Si la requête réseau échoue, un message d'erreur **apparait** et le questionnaire **devient activé** de nouveau. -In **imperative programming,** the above corresponds directly to how you implement interaction. You have to write the exact instructions to manipulate the UI depending on what just happened. Here's another way to think about this: imagine riding next to someone in a car and telling them turn by turn where to go. +En **programmation impérative**, ce qui précède correspond directement à la manière dont vous mettez en œuvre l’interaction. Vous devez écrire les instructions exactes pour manipuler l’interface utilisateur en fonction de ce qui vient de se passer. Voici une autre façon de voir les choses : imaginez que vous êtes à côté de quelqu’un dans une voiture et que vous lui dites tour à tour où aller. - + -They don't know where you want to go, they just follow your commands. (And if you get the directions wrong, you end up in the wrong place!) It's called *imperative* because you have to "command" each element, from the spinner to the button, telling the computer *how* to update the UI. +Ils ne savent pas où vous voulez aller, ils se contentent de suivre vos ordres. (Et si vous vous trompez de direction, vous vous retrouvez au mauvais endroit !) On l'appelle *impératif* parce que vous devez « commander » chaque élément, d *spinner* au bouton, en indiquant à l’ordinateur *comment* mettre à jour l’interface utilisateur. -In this example of imperative UI programming, the form is built *without* React. It only uses the browser [DOM](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model): +Dans cet exemple de programmation impérative de l'interface utilisateur, le formulaire est construit *sans* React. Il utilise uniquement le navigateur [DOM](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model): @@ -81,13 +81,13 @@ function disable(el) { } function submitForm(answer) { - // Pretend it's hitting the network. + // Imaginez que ça fait une requête réseau return new Promise((resolve, reject) => { setTimeout(() => { if (answer.toLowerCase() == 'istanbul') { resolve(); } else { - reject(new Error('Good guess but a wrong answer. Try again!')); + reject(new Error('Bonne idée, mais mauvaise réponse. Réessayez !')); } }, 1500); }); @@ -113,15 +113,15 @@ textarea.oninput = handleTextareaChange;

City quiz

- What city is located on two continents? + Quelle ville est située sur deux continents ?


- - + +
-

That's right!

+

C’est exact !