npx create-next-app@latest
@@ -64,23 +83,6 @@ Si Expo est nouveau pour vous, consultez le [tutoriel dâExpo](https://docs.exp
Expo est maintenu par [Expo (la société)](https://expo.dev/about). Construire des applis avec Expo est gratuit, et vous pouvez les publier sur les plateformes Google Play et Apple Store sans restrictions. Expo propose des services cloud optionnels payants.
-
-
-#### Puis-je utiliser React sans framework ? {/*can-i-use-react-without-a-framework*/}
-
-Vous pouvez tout Ă fait utiliser React sans framework ; câest d'ailleurs ainsi qu'on [utilise React pour une partie de votre page](/learn/add-react-to-an-existing-project#using-react-for-a-part-of-your-existing-page). **Cependant, si vous crĂ©ez une nouvelle appli ou un site entiĂšrement avec React, nous recommandons lâutilisation dâun framework.**
-
-En voici les raisons.
-
-MĂȘme si, au dĂ©part, vous nâavez pas besoin dâun gestionnaire de routes ou de charger des donnĂ©es, vous finirez sans doute par ajouter des bibliothĂšques pour ça. Au fur et Ă mesure que votre bundle JavaScript grandit avec chaque nouvelle fonctionnalitĂ©, vous devrez peut-ĂȘtre trouver un moyen de dĂ©couper le code pour chaque route individuellement. Lorsque vos besoins en matiĂšre de chargement de donnĂ©es se complexifieront, vous risquez de rencontrer des cascades de chargements rĂ©seau client-serveur qui ralentiront considĂ©rablement votre appli. Lorsque votre public comprendra davantage dâutilisateurs avec de faibles bandes passantes et des appareils bas de gamme, vous aurez probablement besoin de gĂ©nĂ©rer du HTML Ă partir de vos composants pour afficher le contenu plus tĂŽt (soit sur le serveur, soit en amont lors du *build*). Modifier votre configuration pour exĂ©cuter une partie de votre code sur le serveur ou au *build peut s'avĂ©rer trĂšs dĂ©licat.
-
-**Ces problĂšmes ne sont pas spĂ©cifiques Ă React. Câest pourquoi Svelte a SvelteKit, Vue a Nuxt, etc**. Pour rĂ©soudre ces problĂšmes par vous-mĂȘme, il vous faudrait intĂ©grer votre *bundler* Ă votre gestionnaire de routes et Ă votre bibliothĂšque de chargement de donnĂ©es. Il nâest pas difficile d'obtenir un premier jet, mais la crĂ©ation dâune appli qui se charge rapidement mĂȘme lorsqu'elle grandit fortement au fil du temps, c'est une affaire pleine de subtilitĂ©s. Vous voudrez envoyer le minimum de code applicatif, mais en un seul aller-retour client-serveur, en parallĂšle avec toutes les donnĂ©es requises pour la page. Vous souhaiterez probablement que la page soit interactive avant mĂȘme que votre code JavaScript ne soit exĂ©cutĂ©, afin de prendre en charge lâamĂ©lioration progressive. Vous souhaiterez peut-ĂȘtre gĂ©nĂ©rer un dossier de fichiers HTML entiĂšrement statiques pour vos pages de marketing, qui pourront ĂȘtre hĂ©bergĂ©s nâimporte oĂč et fonctionneront mĂȘme avec JavaScript dĂ©sactivĂ©. La mise en place de ces possibilitĂ©s demande Ă©normĂ©ment de travail.
-
-**Les frameworks React prĂ©sentĂ©s sur cette page rĂ©solvent les problĂšmes de ce type par dĂ©faut, sans travail supplĂ©mentaire de votre part.** Ils vous permettent de commencer de maniĂšre trĂšs lĂ©gĂšre et de faire Ă©voluer votre appli en fonction de vos besoins. Chaque framework React dispose dâune communautĂ©, ce qui facilite la recherche de rĂ©ponses aux questions et la mise Ă jour des outils. Les frameworks donnent Ă©galement une structure Ă votre code, ce qui vous aide, vous et les autres, Ă conserver le contexte et vos compĂ©tences d'un projet Ă l'autre. Inversement, avec votre propre systĂšme, il est plus facile de rester bloquĂ©s sur des dĂ©pendances obsolĂštes, et vous finirez essentiellement par crĂ©er votre propre framework--mais un framework sans communautĂ© ni processus de mise Ă niveau (et sâil ressemble Ă ceux que nous avons construits par le passĂ©, il est conçu de maniĂšre plus alĂ©atoire).
-
-Si vous nâĂȘtes toujours pas convaincu·e, ou si votre appli a des contraintes inhabituelles qui ne sont pas bien traitĂ©es par ces frameworks et que vous souhaitez mettre en place votre propre configuration personnalisĂ©e, nous ne pouvons pas vous arrĂȘter : allez-y ! Prenez `react` et `react-dom` sur npm, mettez en place votre processus de *build* sur-mesure avec un bundler comme [Vite](https://vitejs.dev/) ou [Parcel](https://parceljs.org/), et ajoutez dâautres outils lorsque vous en aurez besoin pour la gestion des routes, lâexportation statique ou le rendu cĂŽtĂ© serveur, et plus encore.
-
-
## Frameworks React expérimentaux {/*bleeding-edge-react-frameworks*/}
Alors que nous cherchions comment continuer Ă amĂ©liorer React, nous avons rĂ©alisĂ© que lâintĂ©gration plus Ă©troite de React avec les frameworks (en particulier avec la gestion de routes, le *bundling* et les traitements cĂŽtĂ© serveur) constitue notre plus grande opportunitĂ© dâaider les utilisateurs de React Ă construire de meilleures applis. LâĂ©quipe Next.js a acceptĂ© de collaborer avec nous sur la recherche, le dĂ©veloppement, lâintĂ©gration et les tests de fonctionnalitĂ©s React de pointe, indĂ©pendantes toutefois d'un framework spĂ©cifique, comme les [Composants Serveur React](/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-server-components).
diff --git a/src/content/learn/tutorial-tic-tac-toe.md b/src/content/learn/tutorial-tic-tac-toe.md
index a78e2a2bf..183a649a4 100644
--- a/src/content/learn/tutorial-tic-tac-toe.md
+++ b/src/content/learn/tutorial-tic-tac-toe.md
@@ -266,7 +266,7 @@ body {
Vous pouvez aussi suivre ce tutoriel dans votre environnement de développement local. Pour cela, suivez ces étapes :
1. Installez [Node.js](https://nodejs.org/fr/)
-2. Dans l'onglet CodeSandbox ouvert plus tĂŽt, appuyez sur le bouton en haut Ă gauche pour ouvrir le menu, puis choisissez **File âș Export to ZIP** dans ce menu pour tĂ©lĂ©charger localement une archive des fichiers du projet
+2. Dans l'onglet CodeSandbox ouvert plus tÎt, appuyez sur le bouton en haut à gauche pour ouvrir le menu, puis choisissez **Télécharger la sandbox** dans ce menu pour télécharger localement une archive des fichiers du projet
3. Décompressez le fichier d'archive puis ouvrez un terminal et faites un `cd` dans le dossier que vous venez de décompresser
4. Installez les dépendances avec `npm install`
5. Lancer `npm start` pour démarrer un serveur local et suivez les invites affichées pour voir le code s'exécuter dans le navigateur.
diff --git a/src/content/reference/react-dom/components/index.md b/src/content/reference/react-dom/components/index.md
index 3d379ec7a..dd0a767a8 100644
--- a/src/content/reference/react-dom/components/index.md
+++ b/src/content/reference/react-dom/components/index.md
@@ -32,6 +32,20 @@ React leur réserve un traitement particulier parce que leur passer la prop `val
---
+## Composants de ressources et métadonnées {/*resource-and-metadata-components*/}
+
+Ces composants natifs du navigateur vous permettent de charger des ressources externes ou d'annoter le document avec des métadonnées :
+
+* [`
+ My Website
+ Welcome
+
+ );
+}
+```
+
+
\ No newline at end of file
diff --git a/src/content/reference/react-dom/components/style.md b/src/content/reference/react-dom/components/style.md
new file mode 100644
index 000000000..f5cf231a6
--- /dev/null
+++ b/src/content/reference/react-dom/components/style.md
@@ -0,0 +1,106 @@
+---
+style: "
+```
+
+
+
+
+ âŠ
+
+
+ );
+}
+
+export default function App() {
+ return (
+
+
+ );
+}
+```
+
+
diff --git a/src/content/reference/react-dom/components/title.md b/src/content/reference/react-dom/components/title.md
new file mode 100644
index 000000000..9d6ed18cc
--- /dev/null
+++ b/src/content/reference/react-dom/components/title.md
@@ -0,0 +1,98 @@
+---
+title: ""
+canary: true
+---
+
+<Canary>
+
+React's extensions to `<title>` are currently only available in React's canary and experimental channels. In stable releases of React `<title>` 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).
+
+</Canary>
+
+
+<Intro>
+
+The [built-in browser `<title>` component](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/title) lets you specify the title of the document.
+
+```js
+<title>My Blog
+```
+
+
+
+` {/*title*/}
+
+To specify the title of the document, render the [built-in browser `<title>` component](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/title). You can render `<title>` from any component and React will always place the corresponding DOM element in the document head.
+
+```js
+<title>My Blog
+```
+
+[See more examples below.](#usage)
+
+#### Props {/*props*/}
+
+`` supports all [common element props.](/reference/react-dom/components/common#props)
+
+* `children`: `<title>` accepts only text as a child. This text will become the title of the document. You can also pass your own components as long as they only render text.
+
+#### Special rendering behavior {/*special-rendering-behavior*/}
+
+React will always place the DOM element corresponding to the `<title>` component within the documentâs `<head>`, regardless of where in the React tree it is rendered. The `<head>` is the only valid place for `<title>` to exist within the DOM, yet itâs convenient and keeps things composable if a component representing a specific page can render its `<title>` itself.
+
+There are two exception to this:
+* If `<title>` is within an `<svg>` component, then there is no special behavior, because in this context it doesnât represent the documentâs title but rather is an [accessibility annotation for that SVG graphic](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/title).
+* If the `<title>` has an [`itemProp`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/itemprop) prop, there is no special behavior, because in this case it doesnât represent the documentâs title but rather metadata about a specific part of the page.
+
+<Pitfall>
+
+Only render a single `<title>` at a time. If more than one component renders a `<title>` tag at the same time, React will place all of those titles in the document head. When this happens, the behavior of browsers and search engines is undefined.
+
+</Pitfall>
+
+---
+
+## Usage {/*usage*/}
+
+### Set the document title {/*set-the-document-title*/}
+
+Render the `<title>` component from any component with text as its children. React will put a `<title>` DOM node in the document `<head>`.
+
+<SandpackWithHTMLOutput>
+
+```js App.js active
+import ShowRenderedHTML from './ShowRenderedHTML.js';
+
+export default function ContactUsPage() {
+ return (
+ <ShowRenderedHTML>
+ <title>My Site: Contact Us
+ Contact Us
+ Email us at support@example.com
+
+ );
+}
+```
+
+
+
+### Use variables in the title {/*use-variables-in-the-title*/}
+
+The children of the `` component must be a single string of text. (Or a single number or a single object with a `toString` method.) It might not be obvious, but using JSX curly braces like this:
+
+```js
+<title>Results page {pageNumber} // đŽ Problem: This is not a single string
+```
+
+... actually causes the `` component to get a two-element array as its children (the string `"Results page"` and the value of `pageNumber`). This will cause an error. Instead, use string interpolation to pass `<title>` a single string:
+
+```js
+<title>{`Results page ${pageNumber}`}
+```
+
diff --git a/src/content/reference/react-dom/index.md b/src/content/reference/react-dom/index.md
index f39cc24af..85b91339c 100644
--- a/src/content/reference/react-dom/index.md
+++ b/src/content/reference/react-dom/index.md
@@ -17,6 +17,19 @@ Ces API peuvent ĂȘtre importĂ©es depuis vos composants. On les utilise rarement
* [`createPortal`](/reference/react-dom/createPortal) vous permet d'afficher des composants enfants dans une autre partie de l'arbre du DOM.
* [`flushSync`](/reference/react-dom/flushSync) vous permet de forcer React à traiter les mises à jour d'état en attente, puis à mettre à jour le DOM de façon synchrone.
+## API de préchargement de ressources {/*resource-preloading-apis*/}
+
+Ces API peuvent ĂȘtre utilisĂ©es pour accĂ©lĂ©rer vos applis en prĂ©chargeant des ressources telles que les scripts, feuilles de style et fontes dĂšs que vous savez que vous en aurez besoin, par exemple avant de naviguer sur une autre page qui utilisera ces ressources.
+
+[Les frameworks basĂ©s sur React](/learn/start-a-new-react-project) s'occupent frĂ©quemment pour vous du chargement des ressources, de sorte que vous n'aurez peut-ĂȘtre pas besoin d'appeler ces API vous-mĂȘme. Consultez la documentation de votre framework pour en savoir plus Ă ce sujet.
+
+* [`prefetchDNS`](/reference/react-dom/prefetchDNS) vous permet de précharger l'adresse IP d'un nom de domaine DNS auquel vous anticipez une connexion.
+* [`preconnect`](/reference/react-dom/preconnect) vous permet de vous connecter Ă un serveur en vue d'y charger des ressources par la suite, mĂȘme si vous ne savez pas encore exactement lesquelles.
+* [`preload`](/reference/react-dom/preload) vous permet de charger une feuille de styles, une fonte, une image ou un script externe dont vous anticipez l'utilisation.
+* [`preloadModule`](/reference/react-dom/preloadModule) vous permet de charger un module ESM en vue de son utilisation imminente.
+* [`preinit`](/reference/react-dom/preinit) vous permet de charger et d'évaluer un script tiers ou de charger et insérer une feuille de style.
+* [`preinitModule`](/reference/react-dom/preinitModule) vous permet de charget et Ă©valuer un module ESM.
+
---
## Points d'entrée {/*entry-points*/}
diff --git a/src/content/reference/react-dom/preconnect.md b/src/content/reference/react-dom/preconnect.md
new file mode 100644
index 000000000..cb14a5e89
--- /dev/null
+++ b/src/content/reference/react-dom/preconnect.md
@@ -0,0 +1,96 @@
+---
+title: preconnect
+canary: true
+---
+
+
+
+The `preconnect` function is currently only available in React's Canary and experimental channels. Learn more about [React's release channels here](/community/versioning-policy#all-release-channels).
+
+
+
+
+
+`preconnect` lets you eagerly connect to a server that you expect to load resources from.
+
+```js
+preconnect("https://example.com");
+```
+
+
+
+Start Wizard
+ );
+}
+```
diff --git a/src/content/reference/react-dom/prefetchDNS.md b/src/content/reference/react-dom/prefetchDNS.md
new file mode 100644
index 000000000..f9889836e
--- /dev/null
+++ b/src/content/reference/react-dom/prefetchDNS.md
@@ -0,0 +1,96 @@
+---
+title: prefetchDNS
+canary: true
+---
+
+
+
+The `prefetchDNS` function is currently only available in React's Canary and experimental channels. Learn more about [React's release channels here](/community/versioning-policy#all-release-channels).
+
+
+
+
+
+`prefetchDNS` lets you eagerly look up the IP of a server that you expect to load resources from.
+
+```js
+prefetchDNS("https://example.com");
+```
+
+
+
+Start Wizard
+ );
+}
+```
diff --git a/src/content/reference/react-dom/preinit.md b/src/content/reference/react-dom/preinit.md
new file mode 100644
index 000000000..5a04528bd
--- /dev/null
+++ b/src/content/reference/react-dom/preinit.md
@@ -0,0 +1,133 @@
+---
+title: preinit
+canary: true
+---
+
+
+
+The `preinit` function is currently only available in React's Canary and experimental channels. Learn more about [React's release channels here](/community/versioning-policy#all-release-channels).
+
+
+
+
+
+[React-based frameworks](/learn/start-a-new-react-project) frequently handle resource loading for you, so you might not have to call this API yourself. Consult your framework's documentation for details.
+
+
+
+
+
+`preinit` lets you eagerly fetch and evaluate a stylesheet or external script.
+
+```js
+preinit("https://example.com/script.js", {as: "style"});
+```
+
+
+
+
+
+#### Preiniting an external script {/*preiniting-an-external-script*/}
+
+```js
+import { preinit } from 'react-dom';
+
+function AppRoot() {
+ preinit("https://example.com/script.js", {as: "script"});
+ return ...;
+}
+```
+
+If you want the browser to download the script but not to execute it right away, use [`preload`](/reference/react-dom/preload) instead. If you want to load an ESM module, use [`preinitModule`](/reference/react-dom/preinitModule).
+
+
+
+### Preiniting in an event handler {/*preiniting-in-an-event-handler*/}
+
+Call `preinit` in an event handler before transitioning to a page or state where external resources will be needed. This gets the process started earlier than if you call it during the rendering of the new page or state.
+
+```js
+import { preinit } from 'react-dom';
+
+function CallToAction() {
+ const onClick = () => {
+ preinit("https://example.com/wizardStyles.css", {as: "style"});
+ startWizard();
+ }
+ return (
+ Start Wizard
+ );
+}
+```
diff --git a/src/content/reference/react-dom/preinitModule.md b/src/content/reference/react-dom/preinitModule.md
new file mode 100644
index 000000000..ba6316a7a
--- /dev/null
+++ b/src/content/reference/react-dom/preinitModule.md
@@ -0,0 +1,106 @@
+---
+title: preinitModule
+canary: true
+---
+
+
+
+The `preinitModule` function is currently only available in React's Canary and experimental channels. Learn more about [React's release channels here](/community/versioning-policy#all-release-channels).
+
+
+
+
+
+[React-based frameworks](/learn/start-a-new-react-project) frequently handle resource loading for you, so you might not have to call this API yourself. Consult your framework's documentation for details.
+
+
+
+
+
+`preinitModule` lets you eagerly fetch and evaluate an ESM module.
+
+```js
+preinitModule("https://example.com/module.js", {as: "script"});
+```
+
+
+
+Start Wizard
+ );
+}
+```
diff --git a/src/content/reference/react-dom/preload.md b/src/content/reference/react-dom/preload.md
new file mode 100644
index 000000000..ffec1177c
--- /dev/null
+++ b/src/content/reference/react-dom/preload.md
@@ -0,0 +1,171 @@
+---
+title: preload
+canary: true
+---
+
+
+
+The `preload` function is currently only available in React's Canary and experimental channels. Learn more about [React's release channels here](/community/versioning-policy#all-release-channels).
+
+
+
+
+
+[React-based frameworks](/learn/start-a-new-react-project) frequently handle resource loading for you, so you might not have to call this API yourself. Consult your framework's documentation for details.
+
+
+
+
+
+`preload` lets you eagerly fetch a resource such as a stylesheet, font, or external script that you expect to use.
+
+```js
+preload("https://example.com/font.woff2", {as: "font"});
+```
+
+
+
+
+
+#### Preloading an external script {/*preloading-an-external-script*/}
+
+```js
+import { preload } from 'react-dom';
+
+function AppRoot() {
+ preload("https://example.com/script.js", {as: "script"});
+ return ...;
+}
+```
+
+If you want the browser to start executing the script immediately (rather than just downloading it), use [`preinit`](/reference/react-dom/preinit) instead. If you want to load an ESM module, use [`preloadModule`](/reference/react-dom/preloadModule).
+
+
+
+### Preloading in an event handler {/*preloading-in-an-event-handler*/}
+
+Call `preload` in an event handler before transitioning to a page or state where external resources will be needed. This gets the process started earlier than if you call it during the rendering of the new page or state.
+
+```js
+import { preload } from 'react-dom';
+
+function CallToAction() {
+ const onClick = () => {
+ preload("https://example.com/wizardStyles.css", {as: "style"});
+ startWizard();
+ }
+ return (
+ Start Wizard
+ );
+}
+```
diff --git a/src/content/reference/react-dom/preloadModule.md b/src/content/reference/react-dom/preloadModule.md
new file mode 100644
index 000000000..05333f1cb
--- /dev/null
+++ b/src/content/reference/react-dom/preloadModule.md
@@ -0,0 +1,107 @@
+---
+title: preloadModule
+canary: true
+---
+
+
+
+The `preloadModule` function is currently only available in React's Canary and experimental channels. Learn more about [React's release channels here](/community/versioning-policy#all-release-channels).
+
+
+
+
+
+[React-based frameworks](/learn/start-a-new-react-project) frequently handle resource loading for you, so you might not have to call this API yourself. Consult your framework's documentation for details.
+
+
+
+
+
+`preloadModule` lets you eagerly fetch an ESM module that you expect to use.
+
+```js
+preloadModule("https://example.com/module.js", {as: "script"});
+```
+
+
+
+Start Wizard
+ );
+}
+```
diff --git a/src/sidebarReference.json b/src/sidebarReference.json
index 890e7990b..ac6713800 100644
--- a/src/sidebarReference.json
+++ b/src/sidebarReference.json
@@ -203,6 +203,16 @@
"title": "",
"path": "/reference/react-dom/components/option"
@@ -211,13 +221,28 @@
"title": "",
"path": "/reference/react-dom/components/progress"
},
+ {
+ "title": "