You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/content/reference/react-dom/components/script.md
+44-42Lines changed: 44 additions & 42 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -5,16 +5,16 @@ canary: true
5
5
6
6
<Canary>
7
7
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).
9
9
10
10
</Canary>
11
11
12
12
<Intro>
13
13
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.
15
15
16
16
```js
17
-
<script>alert("hi!") </script>
17
+
<script>alert("salut !") </script>
18
18
```
19
19
20
20
</Intro>
@@ -23,71 +23,71 @@ The [built-in browser `<script>` component](https://developer.mozilla.org/en-US/
23
23
24
24
---
25
25
26
-
## Reference {/*reference*/}
26
+
## Référence {/*reference*/}
27
27
28
28
### `<script>` {/*script*/}
29
29
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.
31
31
32
32
```js
33
-
<script>alert("hi!") </script>
33
+
<script>alert("salut !") </script>
34
34
<script src="script.js"/>
35
35
```
36
36
37
-
[See more examples below.](#usage)
37
+
[Voir d'autres exemples plus bas](#usage).
38
38
39
39
#### Props {/*props*/}
40
40
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).
42
42
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`.
44
44
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.
47
47
48
-
Other supported props:
48
+
L'élément prend en charge d'autres props:
49
49
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).
58
58
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 :
60
60
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é.
63
63
64
-
Props that are**not recommended**for use with React:
64
+
Ces props sont**déconseillées**pour une utilisation avec React:
65
65
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`.
68
68
69
-
#### Special rendering behavior {/*special-rendering-behavior*/}
69
+
#### Comportement spécifique de rendu {/*special-rendering-behavior*/}
70
70
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.
72
72
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.
74
74
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.
76
76
77
-
This special treatment comes with two caveats:
77
+
Pour finir, ce comportement a deux limitations :
78
78
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.)
81
81
82
82
---
83
83
84
-
## Usage {/*usage*/}
84
+
## Utilisation {/*usage*/}
85
85
86
-
### Rendering an external script {/*rendering-an-external-script*/}
86
+
### Exécuter un script extérieur {/*rendering-an-external-script*/}
87
87
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.
89
89
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.
91
91
92
92
<SandpackWithHTMLOutput>
93
93
@@ -115,12 +115,14 @@ export default function Page() {
115
115
</SandpackWithHTMLOutput>
116
116
117
117
<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
+
119
121
</Note>
120
122
121
-
### Rendering an inline script {/*rendering-an-inline-script*/}
123
+
### Exécuter un script défini à la volée {/*rendering-an-inline-script*/}
122
124
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.
0 commit comments