chore(sync): address merge conflicts + early translation

Author: tdd

src/content/learn/describing-the-ui.md

@@ -10,7 +10,6 @@ React est une bibliothèque JavaScript pour afficher des interfaces utilisateurs
 
 <YouWillLearn isChapter={true}>
 
-<<<<<<< HEAD
 * [Comment écrire votre premier composant React](/learn/your-first-component)
 * [Quand et comment créer des fichiers multi-composants](/learn/importing-and-exporting-components)
 * [Comment ajouter du balisage au JavaScript grâce à JSX](/learn/writing-markup-with-jsx)
@@ -19,17 +18,7 @@ React est une bibliothèque JavaScript pour afficher des interfaces utilisateurs
 * [Comment afficher des composants conditionnellement](/learn/conditional-rendering)
 * [Comment afficher plusieurs composants à la fois](/learn/rendering-lists)
 * [Comment éviter des bugs déroutants en gardant vos composants purs](/learn/keeping-components-pure)
-=======
-* [How to write your first React component](/learn/your-first-component)
-* [When and how to create multi-component files](/learn/importing-and-exporting-components)
-* [How to add markup to JavaScript with JSX](/learn/writing-markup-with-jsx)
-* [How to use curly braces with JSX to access JavaScript functionality from your components](/learn/javascript-in-jsx-with-curly-braces)
-* [How to configure components with props](/learn/passing-props-to-a-component)
-* [How to conditionally render components](/learn/conditional-rendering)
-* [How to render multiple components at a time](/learn/rendering-lists)
-* [How to avoid confusing bugs by keeping components pure](/learn/keeping-components-pure)
-* [Why understanding your UI as trees is useful](/learn/understanding-your-ui-as-a-tree)
->>>>>>> a0cacd7d3a89375e5689ccfba0461e293bfe9eeb
+* [L'utilité d'une conception arborescente de votre UI](/learn/understanding-your-ui-as-a-tree)
 
 </YouWillLearn>
 
@@ -534,34 +523,29 @@ Lisez **[Garder les composants purs](/learn/keeping-components-pure)** pour appr
 
 </LearnMore>
 
-<<<<<<< HEAD
-## Et maintenant ? {/*whats-next*/}
-=======
-## Your UI as a tree {/*your-ui-as-a-tree*/}
+## Votre UI vue comme un arbre {/*your-ui-as-a-tree*/}
 
-React uses trees to model the relationships between components and modules. 
+React utilise des arbres pour modéliser les relations entre les composants ou les modules.
 
-A React render tree is a representation of the parent and child relationship between components. 
+Un arbre de rendu React représente les relations parent-enfants entre les composants.
 
-<Diagram name="generic_render_tree" height={250} width={500} alt="A tree graph with five nodes, with each node representing a component. The root node is located at the top the tree graph and is labelled 'Root Component'. It has two arrows extending down to two nodes labelled 'Component A' and 'Component C'. Each of the arrows is labelled with 'renders'. 'Component A' has a single 'renders' arrow to a node labelled 'Component B'. 'Component C' has a single 'renders' arrow to a node labelled 'Component D'.">An example React render tree.</Diagram>
+<Diagram name="generic_render_tree" height={250} width={500} alt="Un graphe arborescent avec cinq nœuds, où chaque nœud représente un composant.  Le nœud racine est situé tout en haut du graphe et porte le libellé « Composant Racine ».  Deux flèches en partent pour atteindre plus bas deux nœuds libellés « Composant A » et « Composant C ». Chaque flèche porte le descripteur de relation « fait le rendu de ». Une flèche de rendu unique part du « Composant A » vers un nœud libellé « Composant B ». Une flèche de rendu unique part du « Composant C » vers un nœud libellé « Composant D ».">Un exemple d’arbre de rendu React.</Diagram>
 
-Components near the top of the tree, near the root component, are considered top-level components. Components with no child components are leaf components. This categorization of components is useful for understanding data flow and rendering performance.
+Les composants proches du haut de l'arbre, près du composant racine, sont considérés comme des composants de haut niveau. Les composants qui n'ont pas de composants enfants sont qualifiés de composants feuilles. La catégorisation des composants aide à comprendre le flux de données et les performances de rendu.
 
-Modelling the relationship between JavaScript modules is another useful way to understand your app. We refer to it as a module dependency tree. 
+Une autre manière utile de percevoir votre application consiste à modéliser les relations entre les modules JavaScript. Nous parlons alors d'arbre de dépendances de modules.
 
-<Diagram name="generic_dependency_tree" height={250} width={500} alt="A tree graph with five nodes. Each node represents a JavaScript module. The top-most node is labelled 'RootModule.js'. It has three arrows extending to the nodes: 'ModuleA.js', 'ModuleB.js', and 'ModuleC.js'. Each arrow is labelled as 'imports'. 'ModuleC.js' node has a single 'imports' arrow that points to a node labelled 'ModuleD.js'.">An example module dependency tree.</Diagram>
+<Diagram name="generic_dependency_tree" height={250} width={500} alt="Un graphe arborescent avec cinq nœuds. Chaque nœud représente un module JavaScript. Le nœud tout en haut est libellé « RootModule.js ». Trois flèches en partent vers d’autres nœuds : « ModuleA.js », « ModuleB.js » et « ModuleC.js ». Chaque flèche porte le descripteur de relation « importe ». Un flèche d’import unique part de « ModuleC.js » vers un nœud libellé « ModuleD.js ».">Un exemple d’arbre de dépendances de modules.</Diagram>
 
-A dependency tree is often used by build tools to bundle all the relevant JavaScript code for the client to download and render. A large bundle size regresses user experience for React apps. Understanding the module dependency tree is helpful to debug such issues. 
+On utilise souvent un arbre de dépendances dans les outils de *build* pour *bundler* tout le code JavaScript que le client devra télécharger pour assurer le rendu. Un *bundle* massif nuira à l'expérience utilisateur des applis React. Comprendre l'arborescence des dépendances de modules aide à déboguer ces problèmes.
 
 <LearnMore path="/learn/understanding-your-ui-as-a-tree">
 
-Read **[Your UI as a Tree](/learn/understanding-your-ui-as-a-tree)** to learn how to create a render and module dependency trees for a React app and how they're useful mental models for improving user experience and performance.
+Lisez **[Votre UI vue comme un arbre](/learn/understanding-your-ui-as-a-tree)** pour apprendre comment créer des arbres de rendu ou de dépendances de modules pour une appli React, et voir en quoi ils constituent un modèle mental utile pour améliorer l'expérience utilisateur et les performances.
 
 </LearnMore>
 
-
-## What's next? {/*whats-next*/}
->>>>>>> a0cacd7d3a89375e5689ccfba0461e293bfe9eeb
+## Et maintenant ? {/*whats-next*/}
 
 Allez sur [Votre premier composant](/learn/your-first-component) pour commencer à lire ce chapitre page par page !
 

src/content/learn/preserving-and-resetting-state.md

@@ -10,50 +10,19 @@ L'état est isolé entre les composants. React garde en mémoire quel état appa
 
 <YouWillLearn>
 
-<<<<<<< HEAD
-* Comment React « voit » les structures des composants
 * Quand React choisit de préserver ou de réinitialiser l'état
 * Comment forcer React à réinitialiser l'état d'un composant
 * Comment les clés et les types déterminent si l'état est préservé ou non
 
 </YouWillLearn>
 
-## L'arbre de l'UI {/*the-ui-tree*/}
-
-Les navigateurs utilisent différentes structures arborescentes pour modéliser l'UI. Le [DOM](https://developer.mozilla.org/fr/docs/Web/API/Document_Object_Model/Introduction) représente les éléments HTML, le [CSSOM](https://developer.mozilla.org/fr/docs/Web/API/CSS_Object_Model) fait la même chose pour le CSS. Il existe même un [arbre d'accessibilité](https://developer.mozilla.org/fr/docs/Glossary/Accessibility_tree) !
-
-React utilise également des structures arborescentes pour gérer et modéliser l'UI que vous réalisez. React crée des **arbres d'UI** à partir de votre JSX. Ensuite, React DOM met à jour les éléments DOM du navigateur pour qu'ils correspondent à cet arbre de l'UI (React Native retranscrit ces arbres en composants spécifiques aux plateformes mobiles).
-
-<DiagramGroup>
-
-<Diagram name="preserving_state_dom_tree" height={193} width={864} alt="Diagramme avec trois sections réparties horizontalement. Dans la première section, il y a trois rectangles empilés verticalement, appelés « Composant A », « Composant B » et « Composant C ». La transition vers le volet suivant est faite par une flèche avec le logo React au-dessus et appelée « React ». La section du milieu contient un arbre de composants dont la racine est appelée « A », avec deux enfants « B » et « C ». La section suivante est à nouveau atteinte en utilisant une flèche avec le logo « React » au-dessus. La troisième et dernière section est une représentation schématisée d'un navigateur contenant un arbre de 8 nœuds, dont seul un sous-ensemble est surligné (indiquant le sous-arbre de la section du milieu).">
-
-À partir des composants, React crée un arbre d'UI utilisé par React DOM pour le rendu du DOM.
-
-</Diagram>
-
-</DiagramGroup>
-
 ## L'état est lié à une position dans l'arbre {/*state-is-tied-to-a-position-in-the-tree*/}
 
-Lorsque vous donnez un état à un composant, vous pouvez penser que l'état « vit » à l'intérieur du composant. En réalité, l'état est conservé à l'intérieur de React. React associe chaque élément d'état qu'il conserve au composant correspondant en fonction de la place que celui-ci occupe dans l'arbre de l'UI.
+React construit un [arbre de rendu](/learn/understanding-your-ui-as-a-tree#the-render-tree) pour représenter la structure des composants de votre UI.
 
-Ci-dessous, il n'y a qu'une seule balise `<Counter />`, pourtant elle est affichée à deux positions différentes :
-=======
-* When React chooses to preserve or reset the state
-* How to force React to reset component's state
-* How keys and types affect whether the state is preserved
-
-</YouWillLearn>
+Lorsque vous donnez un état à un composant, vous pouvez penser que l'état « vit » à l'intérieur du composant. En réalité, l'état est conservé à l'intérieur de React. React associe chaque élément d'état qu'il conserve au composant correspondant en fonction de la place que celui-ci occupe dans l'arbre de rendu.
 
-## State is tied to a position in the render tree {/*state-is-tied-to-a-position-in-the-tree*/}
-
-React builds [render trees](learn/understanding-your-ui-as-a-tree#the-render-tree) for the component structure in your UI.
-
-When you give a component state, you might think the state "lives" inside the component. But the state is actually held inside React. React associates each piece of state it's holding with the correct component by where that component sits in the render tree.
-
-Here, there is only one `<Counter />` JSX tag, but it's rendered at two different positions:
->>>>>>> a0cacd7d3a89375e5689ccfba0461e293bfe9eeb
+Ci-dessous, il n'y a qu'une seule balise `<Counter />`, pourtant elle est affichée à deux positions différentes :
 
 <Sandpack>
 
@@ -205,11 +174,7 @@ Mise à jour de l’état
 </DiagramGroup>
 
 
-<<<<<<< HEAD
-React conservera l'état tant que vous afficherez le même composant à la même position. Pour vous en rendre compte, incrémentez les deux compteurs, puis supprimez le deuxième composant en décochant « Afficher le deuxième compteur », et enfin remettez-le en cochant à nouveau la case :
-=======
-React will keep the state around for as long as you render the same component at the same position in the tree. To see this, increment both counters, then remove the second component by unchecking "Render the second counter" checkbox, and then add it back by ticking it again:
->>>>>>> a0cacd7d3a89375e5689ccfba0461e293bfe9eeb
+React conservera l'état tant que vous afficherez le même composant à la même position dans l'arbre. Pour vous en rendre compte, incrémentez les deux compteurs, puis supprimez le deuxième composant en décochant « Afficher le deuxième compteur », et enfin remettez-le en cochant à nouveau la case :
 
 <Sandpack>
 

src/content/reference/react/cache.md

@@ -259,11 +259,7 @@ function Page({id}) {
 
 Lorsque `Page` fait son rendu, le composant appelle <CodeStep step={1}>`getUser`</CodeStep>, mais remarquez qu'il n'utilise pas les données renvoyées.  Cet appel anticipé à <CodeStep step={1}>`getUser`</CodeStep> déclenche la requête asynchrone à la base de données, qui s'exécute pendant que `Page` fait d'autres calculs puis déclenche le rendu de ses enfants.
 
-<<<<<<< HEAD
 Lorsque `Profile` fait son rendu, nous appelons à nouveau <CodeStep step={2}>`getUser`</CodeStep>. Si l'appel initial à <CodeStep step={1}>`getUser`</CodeStep> a fini son chargement et mis en cache les données utilisateur, lorsque `Profile` <CodeStep step={2}>demande ces données puis attend</CodeStep>, il n'a plus qu'à les lire du cache, sans relancer un appel réseau. Si la <CodeStep step={1}>requête de données initiale</CodeStep> n'est pas encore terminée, cette approche de préchargement réduit tout de même le délai d'obtention des données.
-=======
-When rendering `Profile`, we call <CodeStep step={2}>`getUser`</CodeStep> again. If the initial <CodeStep step={1}>`getUser`</CodeStep> call has already returned and cached the user data, when `Profile` <CodeStep step={2}>asks and waits for this data</CodeStep>, it can simply read from the cache without requiring another remote procedure call. If the <CodeStep step={1}> initial data request</CodeStep> hasn't been completed, preloading data in this pattern reduces delay in data-fetching.
->>>>>>> a0cacd7d3a89375e5689ccfba0461e293bfe9eeb
 
 <DeepDive>
 

src/sidebarLearn.json

@@ -88,7 +88,7 @@
           "path": "/learn/keeping-components-pure"
         },
         {
-          "title": "Your UI as a Tree",
+          "title": "Votre UI vue comme un arbre",
           "path": "/learn/understanding-your-ui-as-a-tree"
         }
       ]

src/sidebarReference.json

@@ -162,9 +162,6 @@
       "sectionHeader": "react-dom@18.2.0"
     },
     {
-<<<<<<< HEAD
-      "title": "Composants",
-=======
       "title": "Hooks",
       "path": "/reference/react-dom/hooks",
       "routes": [
@@ -176,8 +173,7 @@
       ]
     },
     {
-      "title": "Components",
->>>>>>> a0cacd7d3a89375e5689ccfba0461e293bfe9eeb
+      "title": "Composants",
       "path": "/reference/react-dom/components",
       "routes": [
         {