Skip to content

Commit fdd4c8f

Browse files
committed
copy(script): translate <script> page
1 parent 225d057 commit fdd4c8f

File tree

1 file changed

+44
-42
lines changed
  • src/content/reference/react-dom/components

1 file changed

+44
-42
lines changed

src/content/reference/react-dom/components/script.md

Lines changed: 44 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -5,16 +5,16 @@ canary: true
55

66
<Canary>
77

8-
React's extensions to `<script>` are currently only available in React's canary and experimental channels. In stable releases of React `<script>` works only as a [built-in browser HTML component](https://react.dev/reference/react-dom/components#all-html-components). Learn more about [React's release channels here](/community/versioning-policy#all-release-channels).
8+
Les extensions de React à `<script>` ne sont actuellement disponibles que sur les canaux de livraison Canary et Expérimental de React. Dans les versions stables de React, `<script>` fonctionne comme [le composant HTML natif du navigateur](/reference/react-dom/components#all-html-components). Apprenez-en davantage sur [les canaux de livraison React](/community/versioning-policy#all-release-channels).
99

1010
</Canary>
1111

1212
<Intro>
1313

14-
The [built-in browser `<script>` component](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script) lets you add a script to your document.
14+
Le [composant natif `<script>` du navigateur](https://developer.mozilla.org/fr/docs/Web/HTML/Element/script) vous permet d'ajouter un script à votre document.
1515

1616
```js
17-
<script> alert("hi!") </script>
17+
<script> alert("salut !") </script>
1818
```
1919

2020
</Intro>
@@ -23,71 +23,71 @@ The [built-in browser `<script>` component](https://developer.mozilla.org/en-US/
2323

2424
---
2525

26-
## Reference {/*reference*/}
26+
## Référence {/*reference*/}
2727

2828
### `<script>` {/*script*/}
2929

30-
To add inline or external scripts to your document, render the [built-in browser `<script>` component](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script). You can render `<script>` from any component and React will [in certain cases](#special-rendering-behavior) place the corresponding DOM element in the document head and de-duplicate identical scripts.
30+
Pour ajouter un script défini à la volée ou extérieur à votre document, utilisez le [composant natif `<script>` du navigateur](https://developer.mozilla.org/fr/docs/Web/HTML/Element/script). Vous pouvez utiliser `<script>` depuis n'importe quel composant et React placera [dans certains cas](#special-rendering-behavior) l'élément DOM correspondant dans l'en-tête (`head`) du document et dédoublonnera les scripts identiques.
3131

3232
```js
33-
<script> alert("hi!") </script>
33+
<script> alert("salut !") </script>
3434
<script src="script.js" />
3535
```
3636

37-
[See more examples below.](#usage)
37+
[Voir d'autres exemples plus bas](#usage).
3838

3939
#### Props {/*props*/}
4040

41-
`<script>` supports all [common element props.](/reference/react-dom/components/common#props)
41+
`<script>` prend en charge toutes les [props communes aux éléments](/reference/react-dom/components/common#props).
4242

43-
It should have *either* `children` or a `src` prop.
43+
Il est censé utiliser *l'une ou l'autre* des props `chilren` ou `src`.
4444

45-
* `children`: a string. The source code of an inline script.
46-
* `src`: a string. The URL of an external script.
45+
* `children` : une chaîne de caractères. Le code source du script défini à la volée.
46+
* `src` : une chaîne de caractères. L'URL d'un script extérieur.
4747

48-
Other supported props:
48+
L'élément prend en charge d'autres props :
4949

50-
* `async`: a boolean. Allows the browser to defer execution of the script until the rest of the document has been processed — the preferred behavior for performance.
51-
* `crossOrigin`: a string. The [CORS policy](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/crossorigin) to use. Its possible values are `anonymous` and `use-credentials`.
52-
* `fetchPriority`: a string. Lets the browser rank scripts in priority when fetching multiple scripts at the same time. Can be `"high"`, `"low"`, or `"auto"` (the default).
53-
* `integrity`: a string. A cryptographic hash of the script, to [verify its authenticity](https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity).
54-
* `noModule`: a boolean. Disables the script in browsers that support ES modules — allowing for a fallback script for browsers that do not.
55-
* `nonce`: a string. A cryptographic [nonce to allow the resource](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/nonce) when using a strict Content Security Policy.
56-
* `referrer`: a string. Says [what Referer header to send](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#referrerpolicy) when fetching the script and any resources that the script fetches in turn.
57-
* `type`: a string. Says whether the script is a [classic script, ES module, or import map](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script/type).
50+
* `async` : un booléen. Permet au navigateur de différer l'exécution du script jusqu'à ce que le reste du document ait été traité — c'est le comportement à favoriser pour des raisons de performances.
51+
* `crossOrigin` : une chaîne de caractères. La [politique CORS](https://developer.mozilla.org/docs/Web/HTML/Attributes/crossorigin) à utiliser. Les valeurs possibles sont `anonymous` et `use-credentials`.
52+
* `fetchPriority` : une chaîne de caractères. Suggère une priorité relative pour le chargement lorsque plusieurs scripts sont chargés en parallèle. Les valeurs possibles sont `auto` (par défaut), `high` ou `low`.
53+
* `integrity` : une chaîne de caractères. Une empreinte cryptographique du script afin de [vérifier son authenticité](https://developer.mozilla.org/fr/docs/Web/Security/Subresource_Integrity).
54+
* `noModule` : un booléen. Désactive le script dans les navigateurs qui ne prennent pas en charge les modules ES (ESM), ce qui permet de charger un script de secours pour ces navigateurs.
55+
* `nonce` : une chaîne de caractères. Un [nonce cryptographique autorisant la ressource](https://developer.mozilla.org/fr/docs/Web/HTML/Global_attributes/nonce) dans le cadre d'une Politique de Sécurité de Contenu (CSP) stricte.
56+
* `referrer` : une chaîne de caractères. Indique [l'en-tête Referer à envoyer](https://developer.mozilla.org/docs/Web/HTML/Element/script#referrerpolicy) lors du chargement du script et de toutes ressources que le script chargerait à son tour.
57+
* `type` : une chaîne de caractères. Indique si le script est un [script classique, un module ES ou une *import map*](https://developer.mozilla.org/fr/docs/Web/HTML/Element/script/type).
5858

59-
Props that disable React's [special treatment of scripts](#special-rendering-behavior):
59+
Ces props désactivement le [traitement spécial des scripts](#special-rendering-behavior) de React :
6060

61-
* `onError`: a function. Called when the script fails to load.
62-
* `onLoad`: a function. Called when the script finishes being loaded.
61+
* `onError` : une fonction. Appelée lorsque le chargement du script échoue.
62+
* `onLoad` : une fonction. Appelée lorsque le chargement du script est terminé.
6363

64-
Props that are **not recommended** for use with React:
64+
Ces props sont **déconseillées** pour une utilisation avec React :
6565

66-
* `blocking`: a string. If set to `"render"`, instructs the browser not to render the page until the scriptsheet is loaded. React provides more fine-grained control using Suspense.
67-
* `defer`: a string. Prevents the browser from executing the script until the document is done loading. Not compatible with streaming server-rendered components. Use the `async` prop instead.
66+
* `blocking` : une chaîne de caractères. Si elle vaut `"render"`, le navigateur attendra pour afficher la page que le script ait fini son chargement. React permet un contrôle plus granulaire grâce à Suspense.
67+
* `defer` : une chaîne de caractères. Empêche le navigateur d'exécuter le script tant que le chargement du document n'est pas terminé. Ce fonctionnement est incompatible avec le streaming de Composants Serveur : préférez la prop `async`.
6868

69-
#### Special rendering behavior {/*special-rendering-behavior*/}
69+
#### Comportement spécifique de rendu {/*special-rendering-behavior*/}
7070

71-
React can move `<script>` components to the document's `<head>`, de-duplicate identical scripts, and [suspend](/reference/react/Suspense) while the script is loading.
71+
React peut déplacer les composants `<script>` dans le `<head>` du document, dédoublonner les scripts identiques et [suspendre](/reference/react/Suspense) pendant le chargement d'un script.
7272

73-
To opt into this behavior, provide the `src` and `async={true}` props. React will de-duplicate scripts if they have the same `src`. The `async` prop must be true to allow scripts to be safely moved.
73+
Pour activer ces comportements, fournissez les props `src` et `async={true}`. React dédoublonnera les scripts qui ont le même `src`. La prop `async` doit être active pour permettre aux scripts d'être déplacés sans risque.
7474

75-
If you supply any of the `onLoad` or `onError` props, there is no special behavior, because these props indicate that you are managing the loading of the script manually within your component.
75+
Si vous fournissez au moins une des props `onLoad` ou `onError`, aucun comportement spécifique n'est mis en place puisque vous gérez manuellement le chargement du script au sein de votre composant React.
7676

77-
This special treatment comes with two caveats:
77+
Pour finir, ce comportement a deux limitations :
7878

79-
* React will ignore changes to props after the script has been rendered. (React will issue a warning in development if this happens.)
80-
* React may leave the script in the DOM even after the component that rendered it has been unmounted. (This has no effect as scripts just execute once when they are inserted into the DOM.)
79+
* React ignorera les changements à ces props après le rendu du script. (React produira un avertissement en développement si ce cas survient.)
80+
* React est susceptible de laisser le script dans le DOM même après le démontage du composant qui l'a produit. (Ça n'a toutefois aucun impact dans la mesure où les scripts ne sont exécutés qu'une fois : au moment de leur insertion dans le DOM.)
8181

8282
---
8383

84-
## Usage {/*usage*/}
84+
## Utilisation {/*usage*/}
8585

86-
### Rendering an external script {/*rendering-an-external-script*/}
86+
### Exécuter un script extérieur {/*rendering-an-external-script*/}
8787

88-
If a component depends on certain scripts in order to be displayed correctly, you can render a `<script>` within the component.
88+
Si un composant dépend de certains scripts pour pouvoir fonctionner correctement, vous pouvez utiliser `<script>` au sein de ce composant.
8989

90-
If you supply an `src` and `async` prop, your component will suspend while the script is loading. React will de-duplicate scripts that have the same `src`, inserting only one of them into the DOM even if multiple components render it.
90+
Si vous fournissez les props `src` et `async`, votre composant suspendra le temps du chargement du script. React dédoublonnera les scripts ayant le même `src`, et n'insèrera que l'un d'entre eux dans le DOM même si plusieurs composants utilisent ce script.
9191

9292
<SandpackWithHTMLOutput>
9393

@@ -115,12 +115,14 @@ export default function Page() {
115115
</SandpackWithHTMLOutput>
116116

117117
<Note>
118-
When you want to use a script, it can be beneficial to call the [preinit](/reference/react-dom/preinit) function. Calling this function may allow the browser to start fetching the script earlier than if you just render a `<script>` component, for example by sending an [HTTP Early Hints response](https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/103).
118+
119+
Lorsque vous souhaitez utiliser un script, il peut être avantageux d'appeler la fonction [`preinit`](/reference/react-dom/preinit). Un tel appel suggère au navigateur de commencer à charger le script plus tôt que lorsque vous vous contentez d'utiliser le composant `<script>`, par exemple en utilisant une [réponse HTTP Early Hints](https://developer.mozilla.org/docs/Web/HTTP/Status/103).
120+
119121
</Note>
120122

121-
### Rendering an inline script {/*rendering-an-inline-script*/}
123+
### Exécuter un script défini à la volée {/*rendering-an-inline-script*/}
122124

123-
To include an inline script, render the `<script>` component with the script source code as its children. Inline scripts are not de-duplicated or moved to the document `<head>`, and since they don't load any external resources, they will not cause your component to suspend.
125+
Pour exécuter un script défini à la volée, utilisez le composant `<script>` avec le code source à l'intérieur. Les scripts définis à la volée ne sont pas dédoublonnés ou déplacés dans le `<head>` du document, et puisqu'ils ne chargent pas de ressources tierces, ils ne suspendront pas votre composant.
124126

125127
<SandpackWithHTMLOutput>
126128

@@ -138,9 +140,9 @@ function Tracking() {
138140
export default function Page() {
139141
return (
140142
<ShowRenderedHTML>
141-
<h1>My Website</h1>
143+
<h1>Mon site web</h1>
142144
<Tracking />
143-
<p>Welcome</p>
145+
<p>Bienvenue</p>
144146
</ShowRenderedHTML>
145147
);
146148
}

0 commit comments

Comments
 (0)