Merge pull request #532 from reactjs/copy/render

Translation of the `render` page

src/content/reference/react-dom/hydrate.md

@@ -46,7 +46,7 @@ React s'attachera au HTML existant au sein de `domNode`, et prendra en main la g
 
 * `domNode` : un [élément DOM](https://developer.mozilla.org/docs/Web/API/Element) que le serveur a utilisé comme élément racine dans son rendu.
 
-* `callback` **optionnel** : une fonction. Si elle est passée, React l'appellera immédiatement après que le composant a été hydraté.
+* `callback` **optionnel** : une fonction. Si elle est passée, React l'appellera immédiatement après que le composant aura été hydraté.
 
 #### Valeur renvoyée {/*returns*/}
 

src/content/reference/react-dom/render.md

@@ -4,15 +4,15 @@ title: render
 
 <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, `render` was replaced by [`createRoot`.](/reference/react-dom/client/createRoot) Using `render` in React 18 will warn that your app will behave as if it’s running React 17. Learn more [here.](/blog/2022/03/08/react-18-upgrade-guide#updates-to-client-rendering-apis)
+React 18 a remplacé `render` par [`createRoot`](/reference/react-dom/client/createRoot).  Utiliser `render` avec React 18 vous avertira que votre appli se comportera comme dans React 17. [Apprenez-en davantage ici](/blog/2022/03/08/react-18-upgrade-guide#updates-to-client-rendering-apis).
 
 </Deprecated>
 
 <Intro>
 
-`render` renders a piece of [JSX](/learn/writing-markup-with-jsx) ("React node") into a browser DOM node.
+`render` fait le rendu d'un bout de [JSX](/learn/writing-markup-with-jsx) (un « nœud React ») dans un nœud DOM du navigateur.
 
 ```js
 render(reactNode, domNode, callback?)
@@ -24,11 +24,11 @@ render(reactNode, domNode, callback?)
 
 ---
 
-## Reference {/*reference*/}
+## Référence {/*reference*/}
 
 ### `render(reactNode, domNode, callback?)` {/*render*/}
 
-Call `render` to display a React component inside a browser DOM element.
+Appelez `render` pour afficher un composant React dans un élément DOM du navigateur.
 
 ```js
 import { render } from 'react-dom';
@@ -37,40 +37,40 @@ const domNode = document.getElementById('root');
 render(<App />, domNode);
 ```
 
-React will display `<App />` in the `domNode`, and take over managing the DOM inside it.
+React affichera `<App />` dans le `domNode`, et prendra la main sur la gestion du DOM qu'il contient.
 
-An app fully built with React will usually only have one `render` call with its root component.  A page that uses "sprinkles" of React for parts of the page may have as many `render` calls as needed.
+Une appli entièrement construite avec React n'aura généralement besoin que d'un appel à `render`, pour son composant racine.  Une page qui « saupoudre » du React pour des parties de la page pourrait avoir autant d'appels à `render` que nécessaire.
 
-[See more examples below.](#usage)
+[Voir d'autres exemples ci-dessous](#usage).
 
-#### Parameters {/*parameters*/}
+#### Paramètres {/*parameters*/}
 
-* `reactNode`: A *React node* that you want to display. This will usually be a piece of JSX like `<App />`, but you can also pass a React element constructed with [`createElement()`](/reference/react/createElement), a string, a number, `null`, or `undefined`. 
+* `reactNode` : un *nœud React* que vous souhaitez afficher.  Ce sera généralement un bout de JSX du genre `<App />`, mais vous pouvez aussi lui passer un élément React construit avec [`createElement()`](/reference/react/createElement), une chaîne de caractères, un nombre, `null` ou encore `undefined`.
 
-* `domNode`: A [DOM element.](https://developer.mozilla.org/en-US/docs/Web/API/Element) React will display the `reactNode` you pass inside this DOM element. From this moment, React will manage the DOM inside the `domNode` and update it when your React tree changes.
+* `domNode` : un [élément DOM](https://developer.mozilla.org/docs/Web/API/Element).  React affichera le `reactNode` que vous lui passez dans cet élément DOM. À partir de là, React gèrera le DOM à l'intérieur de `domNode` et le mettra à jour lorsque l'arbre React changera.
 
-* **optional** `callback`: A function. If passed, React will call it after your component is placed into the DOM.
+* `callback` **optionnel** : une fonction. Si elle est passée, React l'appellera immédiatement après que le composant aura été injecté dans le DOM.
 
 
-#### Returns {/*returns*/}
+#### Valeur renvoyée {/*returns*/}
 
-`render` usually returns `null`. However, if the `reactNode` you pass is a *class component*, then it will return an instance of that component.
+`render` renvoie habituellement `null`. Toutefois, si le `reactNode` que vous avez passé est un *composant à base de classe*, alors il renverra une instance de ce composant.
 
-#### Caveats {/*caveats*/}
+#### Limitations {/*caveats*/}
 
-* In React 18, `render` was replaced by [`createRoot`.](/reference/react-dom/client/createRoot) Please use `createRoot` for React 18 and beyond.
+* Dans React 18, `render` a été remplacé par [`createRoot`](/reference/react-dom/client/createRoot).  Veuillez utiliser `createRoot` à partir de React 18.
 
-* The first time you call `render`, React will clear all the existing HTML content inside the `domNode` before rendering the React component into it. If your `domNode` contains HTML generated by React on the server or during the build, use [`hydrate()`](/reference/react-dom/hydrate) instead, which attaches the event handlers to the existing HTML.
+* La première fois que vous appelez `render`, React videra tout le HTML existant au sein de `domNode` avant de faire le rendu du composant React à l'intérieur. Si votre `domNode` contient du HTML généré par React côté serveur ou lors du *build*, utilisez plutôt [`hydrate()`](/reference/react-dom/hydrate), qui se contentera d'attacher les gestionnaires d'événements au HTML existant.
 
-* If you call `render` on the same `domNode` more than once, React will update the DOM as necessary to reflect the latest JSX you passed. React will decide which parts of the DOM can be reused and which need to be recreated by ["matching it up"](/learn/preserving-and-resetting-state) with the previously rendered tree. Calling `render` on the same `domNode` again is similar to calling the [`set` function](/reference/react/useState#setstate) on the root component: React avoids unnecessary DOM updates.
+* Si vous appelez `render` sur le même `domNode` plusieurs fois, React mettra à jour le DOM si nécessaire pour refléter le dernier JSX que vous lui avez passé.  React décidera quelles parties du DOM réutiliser et lesquelles nécessitent une création à froid en [« examinant la correspondance »](/learn/preserving-and-resetting-state) entre l'arbre React et celui du précédent rendu.  Appeler `render` à nouveau sur le même `domNode` est similaire à un appel de [fonction `set`](/reference/react/useState#setstate) sur le composant racine : React évite les mises à jour DOM superflues.
 
-* If your app is fully built with React, you'll likely have only one `render` call in your app. (If you use a framework, it might do this call for you.) When you want to render a piece of JSX in a different part of the DOM tree that isn't a child of your component (for example, a modal or a tooltip), use [`createPortal`](/reference/react-dom/createPortal) instead of `render`.
+* Si votre appli est intégralement construite avec React, vous n'aurez sans doute besoin que d'un appel à `render` dans votre appli. (Si vous utilisez un framework, il le fait peut-être pour vous.)  Lorsque vous souhaitez afficher un bout de JSX dans une autre partie du DOM, une partie qui n'est pas un enfant de votre composant (par exemple pour une boîte de dialogue modale ou une infobulle), utilisez [`createPortal`](/reference/react-dom/createPortal) plutôt que `render`.
 
 ---
 
-## Usage {/*usage*/}
+## Utilisation {/*usage*/}
 
-Call `render` to display a <CodeStep step={1}>React component</CodeStep> inside a <CodeStep step={2}>browser DOM node</CodeStep>.
+Appelez `render` pour afficher un <CodeStep step={1}>composant React</CodeStep> au sein d'un <CodeStep step={2}>nœud DOM du navigateur</CodeStep>.
 
 ```js [[1, 4, "<App />"], [2, 4, "document.getElementById('root')"]]
 import { render } from 'react-dom';
@@ -79,9 +79,9 @@ import App from './App.js';
 render(<App />, document.getElementById('root'));
 ```
 
-### Rendering the root component {/*rendering-the-root-component*/}
+### Afficher le composant racine {/*rendering-the-root-component*/}
 
-In apps fully built with React, **you will usually only do this once at startup**--to render the "root" component.
+Dans les applis entièrement construites avec React, **vous voudrez généralement ne faire ça qu'une fois au démarrage**, pour afficher le composant « racine ».
 
 <Sandpack>
 
@@ -95,26 +95,26 @@ render(<App />, document.getElementById('root'));
 
 ```js App.js
 export default function App() {
-  return <h1>Hello, world!</h1>;
+  return <h1>Salut tout le monde !</h1>;
 }
 ```
 
 </Sandpack>
 
-Usually you shouldn't need to call `render` again or to call it in more places. From this point on, React will be managing the DOM of your application. To update the UI, your components will [use state.](/reference/react/useState)
+En temps normal, vous ne devriez pas avoir besoin de rappeler `render` ou de l'appeler à plusieurs endroits.  À partir de ce moment-là, c'est React qui gèrera le DOM de votre application. Pour mettre à jour l'UI, vos composants utiliseront [l'état local](/reference/react/useState).
 
 ---
 
-### Rendering multiple roots {/*rendering-multiple-roots*/}
+### Afficher plusieurs racines {/*rendering-multiple-roots*/}
 
-If your page [isn't fully built with React](/learn/add-react-to-an-existing-project#using-react-for-a-part-of-your-existing-page), call `render` for each top-level piece of UI managed by React.
+Si votre page [n'est pas entièrement constuite avec React](/learn/add-react-to-an-existing-project#using-react-for-a-part-of-your-existing-page), appelez `render` pour chaque élément racine de votre UI qui est géré par React.
 
 <Sandpack>
 
 ```html public/index.html
 <nav id="navigation"></nav>
 <main>
-  <p>This paragraph is not rendered by React (open index.html to verify).</p>
+  <p>Ce paragraphe n’est pas produit par React (regardez index.html pour vérifier).</p>
   <section id="comments"></section>
 </main>
 ```
@@ -139,8 +139,8 @@ render(
 export function Navigation() {
   return (
     <ul>
-      <NavLink href="/">Home</NavLink>
-      <NavLink href="/about">About</NavLink>
+      <NavLink href="/">Accueil</NavLink>
+      <NavLink href="/about">À propos</NavLink>
     </ul>
   );
 }
@@ -156,9 +156,9 @@ function NavLink({ href, children }) {
 export function Comments() {
   return (
     <>
-      <h2>Comments</h2>
-      <Comment text="Hello!" author="Sophie" />
-      <Comment text="How are you?" author="Sunil" />
+      <h2>Commentaires</h2>
+      <Comment text="Salut !" author="Sophie" />
+      <Comment text="Ça va ?" author="Sunil" />
     </>
   );
 }
@@ -177,13 +177,13 @@ nav ul li { display: inline-block; margin-right: 20px; }
 
 </Sandpack>
 
-You can destroy the rendered trees with [`unmountComponentAtNode()`.](/reference/react-dom/unmountComponentAtNode)
+Vous pouvez détruire les arborescences ainsi produites avec [`unmountComponentAtNode()`](/reference/react-dom/unmountComponentAtNode).
 
 ---
 
-### Updating the rendered tree {/*updating-the-rendered-tree*/}
+### Mettre à jour l'arbre obtenu {/*updating-the-rendered-tree*/}
 
-You can call `render` more than once on the same DOM node. As long as the component tree structure matches up with what was previously rendered, React will [preserve the state.](/learn/preserving-and-resetting-state) Notice how you can type in the input, which means that the updates from repeated `render` calls every second are not destructive:
+Vous pouvez appeler `render` plusieurs fois sur le même nœud DOM.  Tant que la structure de l'arbre de composants correspond avec celle du rendu précédent, React [préservera l'état](/learn/preserving-and-resetting-state).  Remarquez que vous pouvez taper dans le champ, ce qui signifie que les mises à jour résultant d'appels répétés à `render` chaque seconde ne sont pas destructrices :
 
 <Sandpack>
 
@@ -206,13 +206,13 @@ setInterval(() => {
 export default function App({counter}) {
   return (
     <>
-      <h1>Hello, world! {counter}</h1>
-      <input placeholder="Type something here" />
+      <h1>Salut tout le monde ! {counter}</h1>
+      <input placeholder="Tapez un truc ici" />
     </>
   );
 }
 ```
 
 </Sandpack>
 
-It is uncommon to call `render` multiple times. Usually, you'll [update state](/reference/react/useState) inside your components instead.
+Il est toutefois rare d'appeler `render` ainsi plusieurs fois.  En temps normal, vous [mettrez plutôt à jour l'état local](/reference/react/useState) de vos composants.