Merge pull request #615 from reactjs/sync-fcd00068

Sync with react.dev @ fcd0006

Author: tdd

src/components/Layout/Feedback.tsx

@@ -45,13 +45,15 @@ const thumbsDownIcon = (
 );
 
 function sendGAEvent(isPositive: boolean) {
+  const category = isPositive ? 'like_button' : 'dislike_button';
+  const value = isPositive ? 1 : 0;
   // Fragile. Don't change unless you've tested the network payload
   // and verified that the right events actually show up in GA.
   // @ts-ignore
   gtag('event', 'feedback', {
-    event_category: 'button',
+    event_category: category,
     event_label: window.location.pathname,
-    value: isPositive ? 1 : 0,
+    event_value: value,
   });
 }
 

src/components/Layout/Sidebar/SidebarLink.tsx

@@ -77,7 +77,7 @@ export function SidebarLink({
         {title}{' '}
         {canary && (
           <IconCanary
-            title="This feature is available in the latest Canary"
+            title=" - Cette fonctionnalité est disponible dans le dernier Canary"
             className="ms-2 text-gray-30 dark:text-gray-60 inline-block w-4 h-4 align-[-3px]"
           />
         )}

src/components/MDX/MDXComponents.tsx

@@ -243,7 +243,7 @@ function Illustration({
           src={src}
           alt={alt}
           style={{maxHeight: 300}}
-          className="bg-white rounded-lg"
+          className="rounded-lg"
         />
         {caption ? (
           <figcaption className="text-center leading-tight mt-4">
@@ -275,7 +275,12 @@ function IllustrationBlock({
   const images = imageInfos.map((info, index) => (
     <figure key={index}>
       <div className="bg-white rounded-lg p-4 flex-1 flex xl:p-6 justify-center items-center my-4">
-        <img src={info.src} alt={info.alt} height={info.height} />
+        <img
+          className="text-primary"
+          src={info.src}
+          alt={info.alt}
+          height={info.height}
+        />
       </div>
       {info.caption ? (
         <figcaption className="text-secondary dark:text-secondary-dark text-center leading-tight mt-4">

src/components/PageHeading.tsx

@@ -34,7 +34,7 @@ function PageHeading({
           {title}
           {canary && (
             <IconCanary
-              title="This feature is available in the latest Canary"
+              title=" - Cette fonctionnalité est disponible dans le dernier Canary"
               className="ms-4 mt-1 text-gray-50 dark:text-gray-40 inline-block w-6 h-6 align-[-1px]"
             />
           )}

src/content/blog/2022/06/15/react-labs-what-we-have-been-working-on-june-2022.md

@@ -28,7 +28,7 @@ Nous collaborons avec Vercel et Shopify pour unifier la prise en charge de *bund
 
 ## Chargement de ressources {/*asset-loading*/}
 
-À l'heure actuelle, les ressources telles que les scripts, styles externes, fontes et images sont généralement pré-chargées ou chargées au moyen de systèmes extérieurs. Ça peut s'avérer délicat à coordonner entre des environnements tels que le streaming, les composants serveur et d'autres encore.
+À l'heure actuelle, les ressources telles que les scripts, styles externes, fontes et images sont généralement pré-chargées ou chargées au moyen de systèmes extérieurs. Ça peut s'avérer délicat à coordonner entre des environnements tels que le streaming, les Composants Serveur et d'autres encore.
 
 Nous explorons la possibilité d'ajouter des API pour précharger ou charger des ressources externes dédoublonnées au travers de React, pour fonctionner dans tous les environnements React.
 

src/content/learn/start-a-new-react-project.md

@@ -83,7 +83,7 @@ Si vous n’êtes toujours pas convaincu·e, ou si votre appli a des contraintes
 
 ## 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).
+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).
 
 Ces fonctionnalités se rapprochent chaque jour un peu plus de la production, et nous discutons avec d’autres équipes de *bundlers* et de frameworks pour les intégrer. Nous espérons que d’ici un an ou deux, tous les frameworks listés sur cette page auront une prise en charge complète de ces fonctionnalités. (Si vous êtes en charge d'un framework et intéressé·e par un partenariat avec nous pour expérimenter ces fonctionnalités, n’hésitez pas à nous le faire savoir !)
 
@@ -97,9 +97,9 @@ Next.js est maintenu par [Vercel](https://vercel.com/). Vous pouvez [déployer u
 
 #### Quelles sont les fonctionnalités qui composent la vision d'architecture full-stack de l'équipe React ? {/*which-features-make-up-the-react-teams-full-stack-architecture-vision*/}
 
-Le *bundler* dans l'App Router de Next.js implémente entièrement la [spécification officielle des composants serveurs React](https://github.com/reactjs/rfcs/blob/main/text/0188-server-components.md). Ça vous permet de mélanger des composants exécutés au *build*, côté serveur et interactivement côté client dans une seule et même arborescence React.
+Le *bundler* dans l'App Router de Next.js implémente entièrement la [spécification officielle des Composants Serveurs React](https://github.com/reactjs/rfcs/blob/main/text/0188-server-components.md). Ça vous permet de mélanger des composants exécutés au *build*, côté serveur et interactivement côté client dans une seule et même arborescence React.
 
-Par example, vous pouvez écrire un composant serveur React en tant que fonction `async` qui lit à partir d’une base de données ou d’un fichier. Vous pouvez alors transmettre ces données aux composants interactifs côté client :
+Par example, vous pouvez écrire un Composant Serveur React en tant que fonction `async` qui lit à partir d’une base de données ou d’un fichier. Vous pouvez alors transmettre ces données aux composants interactifs côté client :
 
 ```js
 // Ce composant s’exécute *seulement* côté serveur (ou pendant le build).
@@ -125,6 +125,6 @@ L’App Router de Next.js intègre également [le chargement de données avec Su
 </Suspense>
 ```
 
-Les composants serveur et Suspense sont des fonctionnalités de React plutôt que de Next.js. Cependant, leur adoption au niveau du framework nécessite une adhésionet un travail d’implémentation significatif. Pour l’instant, l’App Router de Next.js en propose l’implémentation la plus complète. L’équipe React travaille avec les équipes de *bundlers* pour faciliter l’implémentation de ces fonctionnalités dans la prochaine génération de frameworks.
+Les Composants Serveur et Suspense sont des fonctionnalités de React plutôt que de Next.js. Cependant, leur adoption au niveau du framework nécessite une adhésionet un travail d’implémentation significatif. Pour l’instant, l’App Router de Next.js en propose l’implémentation la plus complète. L’équipe React travaille avec les équipes de *bundlers* pour faciliter l’implémentation de ces fonctionnalités dans la prochaine génération de frameworks.
 
 </DeepDive>

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

@@ -90,13 +90,13 @@ export default function Search() {
 
 </Sandpack>
 
-### Gérer l'envoi de formulaire dans une action serveur {/*handle-form-submission-with-a-server-action*/}
+### Gérer l'envoi de formulaire dans une Action Serveur {/*handle-form-submission-with-a-server-action*/}
 
-Affichez un `<form>` avec un champ de saisie et un bouton d'envoi, puis passez-lui une action serveur (une fonction dotée de la directive [`'use server'`](/reference/react/use-server)) *via* sa prop `action` pour exécuter cette fonction quand le formulaire sera envoyé.
+Affichez un `<form>` avec un champ de saisie et un bouton d'envoi, puis passez-lui une Action Serveur (une fonction dotée de la directive [`'use server'`](/reference/react/use-server)) *via* sa prop `action` pour exécuter cette fonction quand le formulaire sera envoyé.
 
-Passer une action serveur à `<form action>` permet aux utilisateurs d'envoyer le formulaire même sans JavaScript activé, ou avant que le code JavaScript ne soit chargé et exécuté.  C'est bien pratique pour les utilisateurs ne disposant que d'une connexion ou d'un appareil lents, ou qui ont JavaScript désactivé.  C'est d'ailleurs un comportement similaire à celui des formulaires dont la prop `action` contient une URL.
+Passer une Action Serveur à `<form action>` permet aux utilisateurs d'envoyer le formulaire même sans JavaScript activé, ou avant que le code JavaScript ne soit chargé et exécuté.  C'est bien pratique pour les utilisateurs ne disposant que d'une connexion ou d'un appareil lents, ou qui ont JavaScript désactivé.  C'est d'ailleurs un comportement similaire à celui des formulaires dont la prop `action` contient une URL.
 
-Vous pouvez utiliser des champs cachés pour fournir des données à l'action du `<form>`.  L'action serveur récupèrera ces données de champs cachés au moyen d'une instance de [`FormData`](https://developer.mozilla.org/fr/docs/Web/API/FormData).
+Vous pouvez utiliser des champs cachés pour fournir des données à l'action du `<form>`.  L'Action Serveur récupèrera ces données de champs cachés au moyen d'une instance de [`FormData`](https://developer.mozilla.org/fr/docs/Web/API/FormData).
 
 ```jsx
 import { updateCart } from './lib.js';
@@ -136,7 +136,7 @@ function AddToCart({productId}) {
 }
 ```
 
-Lorsqu'un `<form>` fait son rendu au sein d'un [composant côté serveur](/reference/react/use-client), et qu'en prime une [action serveur](/reference/react/use-server) est passée à la prop `action` du `<form>`, le formulaire bénéficie d'une [amélioration progressive](https://developer.mozilla.org/fr/docs/Glossary/Progressive_Enhancement).
+Lorsqu'un `<form>` fait son rendu au sein d'un [Composant Serveur](/reference/react/use-client), et qu'en prime une [Action Serveur](/reference/react/use-server) est passée à la prop `action` du `<form>`, le formulaire bénéficie d'une [amélioration progressive](https://developer.mozilla.org/fr/docs/Glossary/Progressive_Enhancement).
 
 ### Afficher un état d'attente pendant l'envoi du formulaire {/*display-a-pending-state-during-form-submission*/}
 
@@ -324,11 +324,11 @@ export default function Search() {
 
 Afin d'afficher un message d'erreur d'envoi de formulaire avant même que le *bundle* JavaScript soit chargé et exécuté (à des fins d'amélioration progressive), plusieurs choses sont nécessaires :
 
-1. le `<form>` doit figurer dans un [composant côté serveur](/reference/react/use-client)
-2. la fonction passée à la prop `action` du `<form>` doit être une [action serveur](/reference/react/use-server)
+1. le `<form>` doit figurer dans un [Composant Serveur](/reference/react/use-client)
+2. la fonction passée à la prop `action` du `<form>` doit être une [Action Serveur](/reference/react/use-server)
 3. le Hook `useFormState` doit être utilisé pour produire le message d'erreur
 
-`useFormState` accepte deux arguments : une [action serveur](/reference/react/use-server) et un état initial. `useFormState` renvoie deux valeurs : une variable d'état et une action. L'action ainsi renvoyée par `useFormState` doit être passée à la prop `action` du formulaire. La variable d'état renvoyée par `useFormState` peut être utilisée pour afficher le message d'erreur. La valeur renvoyée par [l'action serveur](/reference/react/use-server) passée à `useFormState` sera utilisée pour mettre à jour la variable d'état.
+`useFormState` accepte deux arguments : une [Action Serveur](/reference/react/use-server) et un état initial. `useFormState` renvoie deux valeurs : une variable d'état et une action. L'action ainsi renvoyée par `useFormState` doit être passée à la prop `action` du formulaire. La variable d'état renvoyée par `useFormState` peut être utilisée pour afficher le message d'erreur. La valeur renvoyée par [l'Action Serveur](/reference/react/use-server) passée à `useFormState` sera utilisée pour mettre à jour la variable d'état.
 
 <Sandpack>
 

src/content/reference/react-dom/hooks/useFormState.md

@@ -51,7 +51,7 @@ function StatefulForm({}) {
 
 L'état de formulaire est déterminé par la valeur renvoyée par l'action lors du dernier envoi en date du formulaire. Si le formulaire n'a pas encore été envoyé, il équivaut à l'état initial que vous avez fourni.
 
-Lorsque vous l'utilisez dans une action serveur, `useFormState` permet d'afficher la réponse du serveur pour l'envoi du formulaire avant même que l'hydratation ne soit terminée.
+Lorsque vous l'utilisez dans une Action Serveur, `useFormState` permet d'afficher la réponse du serveur pour l'envoi du formulaire avant même que l'hydratation ne soit terminée.
 
 [Voir d'autres exemples plus bas](#usage).
 
@@ -117,7 +117,7 @@ function action(currentState, formData) {
 
 #### Afficher des erreurs de formulaire {/*display-form-errors*/}
 
-Pour afficher des messages tels qu'un message d'erreur ou une notification renvoyés par une action serveur, enrobez l'action dans un appel à `useFormState`.
+Pour afficher des messages tels qu'un message d'erreur ou une notification renvoyés par une Action Serveur, enrobez l'action dans un appel à `useFormState`.
 
 <Sandpack>
 
@@ -190,7 +190,7 @@ form button {
 
 #### Afficher des données structurées suite à l'envoi d'un formulaire {/*display-structured-information-after-submitting-a-form*/}
 
-La valeur renvoyée par une action serveur peut être n'importe quelle valeur sérialisable. Il peut par exemple s'agir d'un objet avec un booléen indiquant si l'action a réussi, un message d'erreur, ou des informations mises à jour.
+La valeur renvoyée par une Action Serveur peut être n'importe quelle valeur sérialisable. Il peut par exemple s'agir d'un objet avec un booléen indiquant si l'action a réussi, un message d'erreur, ou des informations mises à jour.
 
 <Sandpack>
 

src/content/reference/react/index.md

@@ -4,8 +4,7 @@ title: Référence API React
 
 <Intro>
 
-Cette section fournit une documentation de référence détaillée pour travailler avec React.
-Pour une introduction à React, consultez plutôt la section [Apprendre](/learn).
+Cette section fournit une documentation de référence détaillée pour travailler avec React. Pour une introduction à React, consultez plutôt la section [Apprendre](/learn).
 
 </Intro>