From c69034ae2242ad41c99b7d7b389477833c029067 Mon Sep 17 00:00:00 2001 From: Christophe Porteneuve Date: Sun, 16 Jul 2023 17:17:32 +0200 Subject: [PATCH] copy(render): final review pass --- src/content/reference/react-dom/hydrate.md | 2 +- src/content/reference/react-dom/render.md | 78 +++++++++++----------- 2 files changed, 40 insertions(+), 40 deletions(-) diff --git a/src/content/reference/react-dom/hydrate.md b/src/content/reference/react-dom/hydrate.md index 2b9ca56d9..897b8e0c1 100644 --- a/src/content/reference/react-dom/hydrate.md +++ b/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*/} diff --git a/src/content/reference/react-dom/render.md b/src/content/reference/react-dom/render.md index a0f751278..542bcfe64 100644 --- a/src/content/reference/react-dom/render.md +++ b/src/content/reference/react-dom/render.md @@ -4,15 +4,15 @@ title: render -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). -`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(, domNode); ``` -React will display `` in the `domNode`, and take over managing the DOM inside it. +React affichera `` 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 ``, 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 ``, 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 React component inside a browser DOM node. +Appelez `render` pour afficher un composant React au sein d'un nœud DOM du navigateur. ```js [[1, 4, ""], [2, 4, "document.getElementById('root')"]] import { render } from 'react-dom'; @@ -79,9 +79,9 @@ import App from './App.js'; render(, 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 ». @@ -95,26 +95,26 @@ render(, document.getElementById('root')); ```js App.js export default function App() { - return

Hello, world!

; + return

Salut tout le monde !

; } ``` -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. ```html public/index.html
-

This paragraph is not rendered by React (open index.html to verify).

+

Ce paragraphe n’est pas produit par React (regardez index.html pour vérifier).

``` @@ -139,8 +139,8 @@ render( export function Navigation() { return (
    - Home - About + Accueil + À propos
); } @@ -156,9 +156,9 @@ function NavLink({ href, children }) { export function Comments() { return ( <> -

Comments

- - +

Commentaires

+ + ); } @@ -177,13 +177,13 @@ nav ul li { display: inline-block; margin-right: 20px; } -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 : @@ -206,8 +206,8 @@ setInterval(() => { export default function App({counter}) { return ( <> -

Hello, world! {counter}

- +

Salut tout le monde ! {counter}

+ ); } @@ -215,4 +215,4 @@ export default function App({counter}) { -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.