Merge pull request #537 from reactjs/copy/unmountComponentAtNode

tdd · web-flow · commit 118ee5fbbc79 · 2023-07-20T11:11:10.000+02:00
Translation of the `unmountComponentAtNode` page
diff --git a/src/content/reference/react-dom/unmountComponentAtNode.md b/src/content/reference/react-dom/unmountComponentAtNode.md
@@ -4,15 +4,15 @@ title: unmountComponentAtNode
 
 <Deprecated>
 
-This API will be removed in a future major version of React.
+Cette API sera retirée d'une future version majeure de React.
 
-In React 18, `unmountComponentAtNode` was replaced by [`root.unmount()`](/reference/react-dom/client/createRoot#root-unmount).
+React 18 a remplacé `unmountComponentAtNode` par [`root.unmount()`](/reference/react-dom/client/createRoot#root-unmount).
 
 </Deprecated>
 
 <Intro>
 
-`unmountComponentAtNode` removes a mounted React component from the DOM.
+`unmountComponentAtNode` retire un composant React monté du DOM.
 
 ```js
 unmountComponentAtNode(domNode)
@@ -24,11 +24,11 @@ unmountComponentAtNode(domNode)
 
 ---
 
-## Reference {/*reference*/}
+## Référence {/*reference*/}
 
 ### `unmountComponentAtNode(domNode)` {/*unmountcomponentatnode*/}
 
-Call `unmountComponentAtNode` to remove a mounted React component from the DOM and clean up its event handlers and state.
+Appelez `unmountComponentAtNode` pour retirer un composant React monté du DOM et nettoyer ses gestionnaires d'événements et son état.
 
 ```js
 import { unmountComponentAtNode } from 'react-dom';
@@ -39,21 +39,21 @@ render(<App />, domNode);
 unmountComponentAtNode(domNode);
 ```
 
-[See more examples below.](#usage)
+[Voir d'autres exemples ci-dessous](#usage).
 
-#### Parameters {/*parameters*/}
+#### Paramètres {/*parameters*/}
 
-* `domNode`: A [DOM element.](https://developer.mozilla.org/en-US/docs/Web/API/Element) React will remove a mounted React component from this element.
+* `domNode` : un [élément DOM](https://developer.mozilla.org/docs/Web/API/Element). React retirera le composant React monté à partir de cet élément.
 
-#### Returns {/*returns*/}
+#### Valeur renvoyée {/*returns*/}
 
-`unmountComponentAtNode` returns `true` if a component was unmounted and `false` otherwise.
+`unmountComponentAtNode` renvoie `true` si un composant a été démonté, ou `false` dans le cas contraire.
 
 ---
 
-## Usage {/*usage*/}
+## Utilisation {/*usage*/}
 
-Call `unmountComponentAtNode` to remove a <CodeStep step={1}>mounted React component</CodeStep> from a <CodeStep step={2}>browser DOM node</CodeStep> and clean up its event handlers and state.
+Appelez `unmountComponentAtNode` pour retirer un <CodeStep step={1}>composant React monté</CodeStep> à partir d'un <CodeStep step={2}>nœud DOM du navigateur</CodeStep> et nettoyer ses gestionnaires d'événements et son état.
 
 ```js [[1, 5, "<App />"], [2, 5, "rootNode"], [2, 8, "rootNode"]]
 import { render, unmountComponentAtNode } from 'react-dom';
@@ -67,22 +67,22 @@ unmountComponentAtNode(rootNode);
 ```
 
 
-### Removing a React app from a DOM element {/*removing-a-react-app-from-a-dom-element*/}
+### Retirer une appli React d'un élément DOM {/*removing-a-react-app-from-a-dom-element*/}
 
-Occasionally, you may want to "sprinkle" React on an existing page, or a page that is not fully written in React. In those cases, you may need to "stop" the React app, by removing all of the UI, state, and listeners from the DOM node it was rendered to.
+Vous souhaiterez occasionnellement « saupoudrer » du React dans une page existante, ou une page qui n'est pas intégralement écrite en React. Dans de tels cas, vous pourriez avoir besoin « d'arrêter » une appli React en retirant toute son interface utilisateur (UI), son état et ses gestionnaires d'événements du nœud DOM dans lequel elle avait été affichée.
 
-In this example, clicking "Render React App" will render a React app. Click "Unmount React App" to destroy it:
+Dans l'exemple ci-dessous, cliquez sur « Afficher l'appli React » pour… afficher l'appli React.  Cliquez sur « Démonter l'appli React » pour la détruire :
 
 <Sandpack>
 
 ```html index.html
 <!DOCTYPE html>
 <html>
-  <head><title>My app</title></head>
+  <head><title>Mon appli</title></head>
   <body>
-    <button id='render'>Render React App</button>
-    <button id='unmount'>Unmount React App</button>
-    <!-- This is the React App node -->
+    <button id='render'>Afficher l’appli React</button>
+    <button id='unmount'>Démonter l’appli React</button>
+    <!-- Voici le nœud de l'appli React -->
     <div id='root'></div>
   </body>
 </html>
@@ -106,7 +106,7 @@ document.getElementById('unmount').addEventListener('click', () => {
 
 ```js App.js
 export default function App() {
-  return <h1>Hello, world!</h1>;
+  return <h1>Salut tout le monde !</h1>;
 }
 ```
 
