diff --git a/src/content/learn/managing-state.md b/src/content/learn/managing-state.md index c88ae3796..8c17c2c48 100644 --- a/src/content/learn/managing-state.md +++ b/src/content/learn/managing-state.md @@ -1,30 +1,31 @@ --- -title: Managing State +title: Gérer l’état --- -As your application grows, it helps to be more intentional about how your state is organized and how the data flows between your components. Redundant or duplicate state is a common source of bugs. In this chapter, you'll learn how to structure your state well, how to keep your state update logic maintainable, and how to share state between distant components. +Au fur et à mesure que votre application se développe, il est utile de réfléchir à la façon dont vous organisez votre état et à la façon dont les données circulent entre vos composants. Les états redondants ou dupliqués sont une source fréquente de bugs. +Dans ce chapitre, vous apprendrez à bien structurer votre état, à garder une logique de mise à jour de l'état maintenable, et à partager l'état entre des composants distants. -* [How to think about UI changes as state changes](/learn/reacting-to-input-with-state) -* [How to structure state well](/learn/choosing-the-state-structure) -* [How to "lift state up" to share it between components](/learn/sharing-state-between-components) -* [How to control whether the state gets preserved or reset](/learn/preserving-and-resetting-state) -* [How to consolidate complex state logic in a function](/learn/extracting-state-logic-into-a-reducer) -* [How to pass information without "prop drilling"](/learn/passing-data-deeply-with-context) -* [How to scale state management as your app grows](/learn/scaling-up-with-reducer-and-context) +* [Comment modéliser les changements d’interface en tant que changements d'état](/learn/reacting-to-input-with-state) +* [Comment bien structurer l’état](/learn/choosing-the-state-structure) +* [Comment « faire remonter l'état » pour le partager entre les composants](/learn/sharing-state-between-components) +* [Comment contrôler si l'état est préservé ou réinitialisé](/learn/preserving-and-resetting-state) +* [Comment consolider une logique d'état complexe dans une fonction](/learn/extracting-state-logic-into-a-reducer) +* [Comment transmettre l’information sans « faire percoler les props »](/learn/passing-data-deeply-with-context) +* [Comment adapter la gestion d’état à la croissance de votre application](/learn/scaling-up-with-reducer-and-context) -## Reacting to input with state {/*reacting-to-input-with-state*/} +## Réagir à la saisie avec un état {/*reacting-to-input-with-state*/} -With React, you won't modify the UI from code directly. For example, you won't write commands like "disable the button", "enable the button", "show the success message", etc. Instead, you will describe the UI you want to see for the different visual states of your component ("initial state", "typing state", "success state"), and then trigger the state changes in response to user input. This is similar to how designers think about UI. +Avec React, vous ne modifierez pas l’interface utilisateur directement à partir du code. Par exemple, vous n'écrirez pas de commandes telles que « désactive le bouton », « active le bouton », « affiche le message de réussite », etc. Au lieu de ça, vous décrirez l’interface utilisateur que vous souhaitez voir apparaître pour les différents états visuels de votre composant (« état initial », « état de saisie », « état de réussite »), puis vous déclencherez les changements d'état en réponse aux interactions de l’utilisateur. Ça ressemble à la façon dont les designers réfléchissent à l’interface utilisateur. -Here is a quiz form built using React. Note how it uses the `status` state variable to determine whether to enable or disable the submit button, and whether to show the success message instead. +Voici un formulaire de quiz construit avec React. Voyez comment il utilise la variable d'état `status` pour déterminer s'il faut activer ou désactiver le bouton d’envoi, et s'il faut plutôt afficher le message de réussite. @@ -37,7 +38,7 @@ export default function Form() { const [status, setStatus] = useState('typing'); if (status === 'success') { - return

That's right!

+ return

C’est exact !

} async function handleSubmit(e) { @@ -58,9 +59,9 @@ export default function Form() { return ( <> -

City quiz

+

Quiz sur les villes

- In which city is there a billboard that turns air into drinkable water? + Dans quelle ville trouve-t-on un panneau d’affichage qui transforme l’air en eau potable ?