From b198a6506d06c96cca472e358c271b9c26816f4c Mon Sep 17 00:00:00 2001 From: emmadal Date: Sat, 15 Jul 2023 16:25:28 +0000 Subject: [PATCH 1/3] translate lazy page --- src/content/reference/react/lazy.md | 68 ++++++++++++++--------------- 1 file changed, 34 insertions(+), 34 deletions(-) diff --git a/src/content/reference/react/lazy.md b/src/content/reference/react/lazy.md index ba82d4fe2..9e82cf67f 100644 --- a/src/content/reference/react/lazy.md +++ b/src/content/reference/react/lazy.md @@ -4,7 +4,7 @@ title: lazy -`lazy` lets you defer loading component's code until it is rendered for the first time. +`lazy` vous permet de différer le chargement du composant jusqu'à son affichage pour la première fois. ```js const SomeComponent = lazy(load) @@ -16,11 +16,11 @@ const SomeComponent = lazy(load) --- -## Reference {/*reference*/} +## Référence {/*reference*/} ### `lazy(load)` {/*lazy*/} -Call `lazy` outside your components to declare a lazy-loaded React component: +Appelez `lazy` en dehors de vos composants pour déclarer un composant React lazy-loaded: ```js import { lazy } from 'react'; @@ -28,41 +28,41 @@ import { lazy } from 'react'; const MarkdownPreview = lazy(() => import('./MarkdownPreview.js')); ``` -[See more examples below.](#usage) +[Voir les exemples ci-dessous.](#usage) -#### Parameters {/*parameters*/} +#### Paramètres {/*parameters*/} -* `load`: A function that returns a [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) or another *thenable* (a Promise-like object with a `then` method). React will not call `load` until the first time you attempt to render the returned component. After React first calls `load`, it will wait for it to resolve, and then render the resolved value as a React component. Both the returned Promise and the Promise's resolved value will be cached, so React will not call `load` more than once. If the Promise rejects, React will `throw` the rejection reason for the nearest Error Boundary to handle. +* `load`: Une fonction qui renvoie une [Promesse](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) ou d'autres *thenable* (un objet de promesse résolue avec la méthode `then`). React n'appelera pas `load` avant la première fois que vous tentez d'afficher le composant renvoyé. Après que React ait appelé `load` pour la première fois, il patientera pour qu'il soit résolu, et ensuite affichera la valeur résolue comme un composant React. La promesse renvoyée et la promesse résolue seront toutes deux mises en cache, et React n'appelera pas `load` plus d'une fois. Si la promesse est rejetée, React `levera` la raison du rejet pour la limite d'erreur la plus proche à gérer. -#### Returns {/*returns*/} +#### Renvois {/*returns*/} -`lazy` returns a React component you can render in your tree. While the code for the lazy component is still loading, attempting to render it will *suspend.* Use [``](/reference/react/Suspense) to display a loading indicator while it's loading. +`lazy` renvoi un composant React que vous pouvez faire le rendu dans votre arborescence. Pendant que le code du composant lazy est en cours de chargement, la tentative de l'afficher sera *suspendue*. Utilisez [``](/reference/react/Suspense) pour afficher un indicateur de chargement pendant le chargement. --- -### `load` function {/*load*/} +### La fonction `load` {/*load*/} -#### Parameters {/*load-parameters*/} +#### Paramètres {/*load-parameters*/} -`load` receives no parameters. +`load` ne reçoit pas de paramètres. -#### Returns {/*load-returns*/} +#### Renvois {/*load-returns*/} -You need to return a [Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) or some other *thenable* (a Promise-like object with a `then` method). It needs to eventually resolve to a valid React component type, such as a function, [`memo`](/reference/react/memo), or a [`forwardRef`](/reference/react/forwardRef) component. +Vous aurez besoin de renvoyer une [Promesse](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise) ou d'autres *thenable* (un objet de promesse résolue avec la méthode `then`). il doit finalement se comporter comme un composant React valide, tel une qu'une fonction, [`memo`](/reference/react/memo), ou un composant [`forwardRef`](/reference/react/forwardRef). --- -## Usage {/*usage*/} +## Mode d’utilisation {/*usage*/} -### Lazy-loading components with Suspense {/*suspense-for-code-splitting*/} +### Composants Lazy-loading avec Suspense {/*suspense-for-code-splitting*/} -Usually, you import components with the static [`import`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) declaration: +En général, vous importez vos composants avec la déclaration statique [`import`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) : ```js import MarkdownPreview from './MarkdownPreview.js'; ``` -To defer loading this component's code until it's rendered for the first time, replace this import with: +Pour différer le chargement du code de ce composant jusqu'à ce qu'il affiche pour la première fois, remplacez cette importation avec : ```js import { lazy } from 'react'; @@ -70,18 +70,18 @@ import { lazy } from 'react'; const MarkdownPreview = lazy(() => import('./MarkdownPreview.js')); ``` -This code relies on [dynamic `import()`,](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import) which might require support from your bundler or framework. +Ce code s'appuie sur [l'importation dynamique `import()`,](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import) ce qui peut nécessiter l'aide de votre bundler ou framework. -Now that your component's code loads on demand, you also need to specify what should be displayed while it is loading. You can do this by wrapping the lazy component or any of its parents into a [``](/reference/react/Suspense) boundary: +Maintenant que le code de votre composant se charge à la demande, vous aurez besoin de spécifier ce qui devra afficher pendant son chargement. Vous pouvez faire cela en enrobant le composant lazy ou l'un de ses parents dans une limitte [``](/reference/react/Suspense) : ```js {1,4} }> -

Preview

+

Aperçu

 ``` -In this example, the code for `MarkdownPreview` won't be loaded until you attempt to render it. If `MarkdownPreview` hasn't loaded yet, `Loading` will be shown in its place. Try ticking the checkbox: +Dans cet exemple, le code de `MarkdownPreview` ne sera pas chargé jusqu'à ce que vous essayez de l'afficher. Si `MarkdownPreview` n'est pas encore chargé, `Loading` sera affiché à sa place. Essayez de cocher la case : @@ -93,18 +93,18 @@ const MarkdownPreview = lazy(() => delayForDemo(import('./MarkdownPreview.js'))) export default function MarkdownEditor() { const [showPreview, setShowPreview] = useState(false); - const [markdown, setMarkdown] = useState('Hello, **world**!'); + const [markdown, setMarkdown] = useState('Bonjour, **monde**!'); return ( <>