Merge pull request #598 from reactjs/sync-2390627c

tdd · web-flow · commit 851bcd65ae06 · 2023-09-25T11:12:03.000+02:00
Sync with react.dev @ 2390627
diff --git a/public/images/team/dave-mccabe.jpg b/public/images/team/dave-mccabe.jpg
diff --git a/public/images/team/lunaruan.jpg b/public/images/team/lunaruan.jpg
diff --git a/public/images/team/mengdi-chen.jpg b/public/images/team/mengdi-chen.jpg
diff --git a/public/images/team/sean-keegan.jpg b/public/images/team/sean-keegan.jpg
diff --git a/src/components/Layout/HomeContent.js b/src/components/Layout/HomeContent.js
@@ -1672,8 +1672,8 @@ function LikeButton({video}) {
     <button
       data-hover="LikeButton"
       className={cn(
-        'outline-none focus:bg-red-50/5 focus:text-red-50 relative flex items-center justify-center w-10 h-10 cursor-pointer rounded-full text-tertiary hover:bg-card active:scale-95 active:bg-red-50/5 active:text-red-50',
-        isLiked && 'text-red-50'
+        'outline-none focus:bg-red-50/5 focus:text-red-50 relative flex items-center justify-center w-10 h-10 cursor-pointer rounded-full hover:bg-card active:scale-95 active:bg-red-50/5 active:text-red-50',
+        isLiked ? 'text-red-50' : 'text-tertiary'
       )}
       aria-label={isLiked ? 'Retirer' : 'Enregistrer'}
       onClick={() => {
diff --git a/src/components/Layout/Toc.tsx b/src/components/Layout/Toc.tsx
@@ -27,8 +27,7 @@ export function Toc({headings}: {headings: Toc}) {
         <ul className="space-y-2 pb-16">
           {headings.length > 0 &&
             headings.map((h, i) => {
-              if (h.url == null) {
-                // TODO: only log in DEV
+              if (!h.url && process.env.NODE_ENV === 'development') {
                 console.error('Heading does not have URL');
               }
               return (
diff --git a/src/components/Seo.tsx b/src/components/Seo.tsx
@@ -21,19 +21,12 @@ const deployedTranslations = [
   'en',
   'zh-hans',
   'es',
+  'fr',
   // We'll add more languages when they have enough content.
   // Please DO NOT edit this list without a discussion in the reactjs/react.dev repo.
   // It must be the same between all translations.
 ];
 
-let shouldPreventIndexing = false;
-if (
-  siteConfig.languageCode !== 'en' &&
-  !deployedTranslations.includes(siteConfig.languageCode)
-) {
-  shouldPreventIndexing = true;
-}
-
 function getDomain(languageCode: string): string {
   const subdomain = languageCode === 'en' ? '' : languageCode + '.';
   return subdomain + 'react.dev';
@@ -69,7 +62,6 @@ export const Seo = withRouter(
           href={canonicalUrl.replace(siteDomain, getDomain('en'))}
           hrefLang="x-default"
         />
-        {shouldPreventIndexing && <meta name="robots" content="noindex" />}
         {deployedTranslations.map((languageCode) => (
           <link
             key={'alt-' + languageCode}
diff --git a/src/content/community/acknowledgements.md b/src/content/community/acknowledgements.md
@@ -24,6 +24,7 @@ Nous aimerions remercier particulièrement certaines personnes ayant effectué d
 * [Christoph Nakazawa](https://github.com/cpojer)
 * [Christopher Chedeau](https://github.com/vjeux)
 * [Clement Hoang](https://github.com/clemmy)
+* [Dave McCabe](https://github.com/davidmccabe)
 * [Dominic Gannaway](https://github.com/trueadm)
 * [Flarnie Marchan](https://github.com/flarnie)
 * [Jason Quense](https://github.com/jquense)
@@ -33,8 +34,10 @@ Nous aimerions remercier particulièrement certaines personnes ayant effectué d
 * [Josh Duck](https://github.com/joshduck)
 * [Joe Critchley](https://github.com/joecritch)
 * [Jeff Morrison](https://github.com/jeffmo)
+* [Luna Ruan](https://github.com/lunaruan)
 * [Keyan Zhang](https://github.com/keyz)
 * [Marco Salazar](https://github.com/salazarm)
+* [Mengdi Chen](https://github.com/mondaychen)
 * [Nat Alison](https://github.com/tesseralis)
 * [Nathan Hunzaker](https://github.com/nhunzaker)
 * [Nicolas Gallagher](https://github.com/necolas)
@@ -45,7 +48,7 @@ Nous aimerions remercier particulièrement certaines personnes ayant effectué d
 * [Robert Zhang](https://github.com/robertzhidealx)
 * [Sander Spies](https://github.com/sanderspies)
 * [Sasha Aickin](https://github.com/aickin)
-* [Seth Webster](https://github.com/sethwebster)
+* [Sean Keegan](https://github.com/seanryankeegan)
 * [Sophia Shoemaker](https://github.com/mrscobbler)
 * [Sunil Pai](https://github.com/threepointone)
 * [Tim Yung](https://github.com/yungsters)
diff --git a/src/content/community/team.md b/src/content/community/team.md
@@ -26,10 +26,6 @@ Les membres actuels de l'équipe React sont listés ci-dessous par ordre alphab
     Dans a commencé à programmer lorsqu'il a découvert par hasard qu'il y avait Visual Basic dans Microsoft Powerpoint.  Il a découvert que sa véritable vocation consistait à transformer les tweets de [Sebastian](#sebastian-markbåge) en billets de blog interminables. Dan gagne parfois à Fortnite en se cachant dans un buisson jusqu'à la fin de la partie.
 </TeamMember>
 
-<TeamMember name="Dave McCabe" permalink="dave-mccabe" photo="/images/team/dave-mccabe.jpg" github="davidmccabe" twitter="mcc_abe" title="Ingénieur chez Meta">
-    Ingénieur de métier et homme d'extérieur par nature, David a longtemps innové dans le domaine de la programmation-en-bronzant. Lorsqu'il ne surprend pas ses collègues avec ses arrière-plans en pleine nature lors des visioconférences, il aime jouer de la guitare (dans des prairies ensoleillées, ça va de soi) et faire des arts martiaux (en intérieur pour le moment, il faut qu'il y travaille).
-</TeamMember>
-
 <TeamMember name="Eli White" permalink="eli-white" photo="/images/team/eli-white.jpg" github="TheSavior" twitter="Eli_White" title="Manager d’ingénieurs chez Meta">
     Eli a commencé la programmation après avoir été suspendu au collège pour piratage.  Il travaille sur React et React Native depuis 2017. Il aime manger des sucreries, en particulier les crèmes glacées et la tarte aux pommes. Vous le trouverez généralement en train d'essayer des trucs un peu fous comme le parkour, les simulateurs de chute libre ou la danse aérienne sur rubans de soie.
 </TeamMember>
@@ -54,10 +50,6 @@ Les membres actuels de l'équipe React sont listés ci-dessous par ordre alphab
     La carrière de développeuse de Lauren a atteint son sommet lorsqu'elle a découvert la balise `<marquee>`. Depuis, elle cherche à retrouver cette extase.  Lorsqu'elle n'est pas en train d'ajouter des bugs à React, elle aime balancer des mèmes audacieux dans les forums internes, jouer à beaucoup trop de jeux vidéos avec l'amour de sa vie, et son chien Zelda.
 </TeamMember>
 
-<TeamMember name="Luna Ruan" permalink="luna-ruan" photo="/images/team/lunaruan.jpg" github="lunaruan" twitter="lunaruan" title="Ingénieure indépendante">
-    Luna a appris à programmer pour faire des jeux vidéos. Au lieu de quoi elle s'est retrouvée à bosser sur l'appli web de Pinterest, et désormais sur React lui-même. Luna n'a plus envie de faire des jeux vidéos, mais elle compte faire de l'écriture créative si un jour elle s'ennuie.
-</TeamMember>
-
 <TeamMember name="Luna Wei" permalink="luna-wei" photo="/images/team/luna-wei.jpg" github="lunaleaps" twitter="lunaleaps" title="Ingénieure chez Meta">
     Luna a appris les bases de Python à 6 ans grâce à son père. Depuis plus rien ne l'arrête. Luna a bien l'intention d'être une Génération Z, et le chemin du succès passe par la défense de l'environnement, du jardinage urbain et beaucoup de temps précieux passé avec Voo-Doo (voir photo).
 </TeamMember>
@@ -66,10 +58,6 @@ Les membres actuels de l'équipe React sont listés ci-dessous par ordre alphab
     Matt est tombé par hasard dans le code, et depuis il adore créer grâce à des communautés des trucs qu'on ne peut pas créer tout seuls.  Avant React, il a travaillé sur YouTube, l'Assistant Google, Fuchsia, Google Cloud AI et Evernote.  Lorsqu'il n'est pas en train d'améliorer l'outillage des développeurs il aime la montagne, le jazz, et passer du temps en famille.
 </TeamMember>
 
-<TeamMember name="Mengdi Chen" permalink="mengdi-chen" photo="/images/team/mengdi-chen.jpg" github="mondaychen" twitter="mengdi_en" title="Ingénieure chez Meta">
-    Alors qu'elle bossait sur son diplôme en Arts Numériques, Mengdi la ramenait avec ses compétences front-end parce que ses CSS marchaient nickel même sur IE6.  Puis React a ouvert une nouvelle porte pour elle dans le monde de la programmation, et depuis elle rêvait d'intégrer l'équipe React. Hors du boulot, elle est généralement en train de courir après ses deux enfants ou de collectionner des recettes étranges.
-</TeamMember>
-
 <TeamMember name="Mofei Zhang" permalink="mofei-zhang" photo="/images/team/mofei-zhang.png" github="mofeiZ" title="Ingénieure chez Meta">
     Mofei a commencé à programmer dès qu'elle a réalisé que ça pouvait l'aider à tricher aux jeux vidéos.  Ses études se sont concentrées sur les systèmes d'exploitation (OS), mais elle aime aujourd'hui triturer React.  Hors du boulot, elle aime déboguer des problèmes d'escalade de bloc et planifier ses prochaines randonnées.
 </TeamMember>
@@ -86,10 +74,6 @@ Les membres actuels de l'équipe React sont listés ci-dessous par ordre alphab
     Sathya a détesté le *Dragon Book* durant ses études, et pourtant a fini par consacrer sa carrière aux compilateurs. Lorsqu'il n'est pas en train de compiler des composants React, soit il boit du café soit il mange encore un Dosa.
 </TeamMember>
 
-<TeamMember name="Sean Keegan" permalink="sean-keegan" photo="/images/team/sean-keegan.jpg" github="seanryankeegan" twitter="DevRelSean" title="Developer Advocate chez Meta">
-    Après une première carrière comme prof de maths, Sean s'est souvenu de cette petite intro à l'informatique qu'il avait dû suivre en pré-requis et s'est dit « Eh, c'était pas mal ! ». Un bootcamp de code et quelques boulots techniques plus tard, Sean a découvert l'évangélisme développeurs *(developer advocacy, NdT)* et s'y consacre depuis lors.  Hors du boulot, Sean aime l'ultimate, les jeux vidéos, et chercher (mais rarement appliquer) comment mieux s'occuper de ses plantes domestiques.
-</TeamMember>
-
 <TeamMember name="Sebastian Markbåge" permalink="sebastian-markbåge" photo="/images/team/sebmarkbage.jpg" github="sebmarkbage" twitter="sebmarkbage" title="Ingénieur chez Vercel">
     Sébastien a étudié la psychologie. Il est généralement silencieux. Même lorsqu'il dit quelque chose, ça ne finit par avoir du sens pour le reste d'entre nous que quelques mois plus tard.  La véritable pronconciation de son nom de famille est « marc-bau-jai », mais il a fini par tolérer « marc-beige » par pur pragmatisme — une approche qu'il applique aussi à React.
 </TeamMember>
diff --git a/src/content/learn/passing-props-to-a-component.md b/src/content/learn/passing-props-to-a-component.md
@@ -460,7 +460,7 @@ export default function Gallery() {
           </li>
           <li>
             <b>A découvert : </b>
-            le Polonium (élément)
+            le Polonium (élément chimique)
           </li>
         </ul>
       </section>
diff --git a/src/content/learn/removing-effect-dependencies.md b/src/content/learn/removing-effect-dependencies.md
@@ -927,7 +927,7 @@ function ChatRoom() {
 
   useEffect(() => {
     const options = createOptions();
-    const connection = createConnection();
+    const connection = createConnection(options);
     connection.connect();
     return () => connection.disconnect();
   }, []); // ✅ Toutes les dépendances sont déclarées
@@ -1614,7 +1614,7 @@ label, button { display: block; margin-bottom: 5px; }
 
 Votre Effet est ré-exécuté parce qu'il dépend de l'objet `options`.  Les objets sont susceptibles d'être recréés par inadvertance, et vous devriez essayer autant que possible de les éviter comme dépendances pour vos Effets.
 
-Le correctif le moins impactant consiste à lire `roomId` et `serverUrl` directement hors de l'Effet, et de faire que l'Effet dépende de ces valeurs primitives (qui ne peuvent pas changer par inadvertance).  Au sein de l'Effet, créez un objet et passez-le à  `createConnection` :
+Le correctif le moins impactant consiste à lire `roomId` et `serverUrl` directement hors de l'Effet, et de faire que l'Effet dépende de ces valeurs primitives (qui ne peuvent pas changer par inadvertance).  Au sein de l'Effet, créez un objet et passez-le à `createConnection` :
 
 <Sandpack>
 
diff --git a/src/content/learn/state-a-components-memory.md b/src/content/learn/state-a-components-memory.md
@@ -1486,8 +1486,6 @@ Voici une version corrigée qui utilise une variable `name` classique, déclaré
 <Sandpack>
 
 ```js
-import { useState } from 'react';
-
 export default function FeedbackForm() {
   function handleClick() {
     const name = prompt('Comment vous appelez-vous ?');
diff --git a/src/content/learn/state-as-a-snapshot.md b/src/content/learn/state-as-a-snapshot.md
@@ -79,7 +79,7 @@ Lorsque React refait le rendu d'un composant :
 
 1. React rappelle votre fonction.
 2. Votre fonction renvoie un nouvel instantané JSX.
-3. React met alors à jour l'écran pour refléter l'instantané que vous venez de renvoyer.
+3. React met alors à jour l'écran pour refléter l'instantané que votre fonction vient de renvoyer.
 
 <IllustrationBlock sequential>
     <Illustration caption="React appelle la fonction" src="/images/docs/illustrations/i_render1.png" />
diff --git a/src/content/learn/synchronizing-with-effects.md b/src/content/learn/synchronizing-with-effects.md
@@ -768,7 +768,7 @@ Ce n’est pas le rendu qui déclenche l’achat, c’est une interaction spéci
   }
 ```
 
-**Ça illustre bien le fait que si le remontage casse la logique de votre application, il s’agit probablement d’un bug dans votre code.**  Du point de vue de l’utilisateur, visiter la page ne devrait en rien différer de la visiter, puis cliquer un lien, puis y revenir.  React vérifie que vos composants obéissent à ce principe en les remontant une fois lors du développement.
+**Ça illustre bien le fait que si le remontage casse la logique de votre application, il s’agit probablement d’un bug dans votre code.**  Du point de vue d’un utilisateur, visiter la page ne devrait en rien différer de la visiter, puis cliquer un lien, puis y revenir.  React vérifie que vos composants obéissent à ce principe en les remontant une fois lors du développement.
 
 ## Tous ensemble cette fois {/*putting-it-all-together*/}
 
diff --git a/src/content/reference/react-dom/components/common.md b/src/content/reference/react-dom/components/common.md
@@ -100,11 +100,11 @@ Ces props standard du DOM sont également prises en charge pour tous les composa
 * `onFocusCapture` : une version de `onFocus` qui se déclenche durant la [phase de capture](/learn/responding-to-events#capture-phase-events).
 * [`onGotPointerCapture`](https://developer.mozilla.org/fr/docs/Web/API/Element/gotpointercapture_event) : un [gestionnaire d'événement `PointerEvent`](#pointerevent-handler). Cet événement est déclenché lorsqu'un élément capture programmatiquement le pointeur.
 * `onGotPointerCaptureCapture` : une version de `onGotPointerCapture` qui se déclenche durant la [phase de capture](/learn/responding-to-events#capture-phase-events).
-* [`onKeyDown`](https://developer.mozilla.org/fr/docs/Web/API/Element/keydown_event) : un [gestionnaire d'événement `KeyboardEvent` handler](#pointerevent-handler). Cet événement est déclenché quand une touche est pressée.
+* [`onKeyDown`](https://developer.mozilla.org/fr/docs/Web/API/Element/keydown_event) : un [gestionnaire d'événement `KeyboardEvent` handler](#keyboardevent-handler). Cet événement est déclenché quand une touche est pressée.
 * `onKeyDownCapture` : une version de `onKeyDown` qui se déclenche durant la [phase de capture](/learn/responding-to-events#capture-phase-events).
-* [`onKeyPress`](https://developer.mozilla.org/fr/docs/Web/API/Element/keypress_event) : un [gestionnaire d'événement `KeyboardEvent`](#pointerevent-handler). Il est déprécié. Privilégiez `onKeyDown` ou `onBeforeInput`.
+* [`onKeyPress`](https://developer.mozilla.org/fr/docs/Web/API/Element/keypress_event) : un [gestionnaire d'événement `KeyboardEvent`](#keyboardevent-handler). Il est déprécié. Privilégiez `onKeyDown` ou `onBeforeInput`.
 * `onKeyPressCapture` : une version de `onKeyPress` qui se déclenche durant la [phase de capture](/learn/responding-to-events#capture-phase-events).
-* [`onKeyUp`](https://developer.mozilla.org/fr/docs/Web/API/Element/keyup_event) : un [gestionnaire d'événement `KeyboardEvent`](#pointerevent-handler). Cet événement est déclenché quand une touche est relâchée.
+* [`onKeyUp`](https://developer.mozilla.org/fr/docs/Web/API/Element/keyup_event) : un [gestionnaire d'événement `KeyboardEvent`](#keyboardevent-handler). Cet événement est déclenché quand une touche est relâchée.
 * `onKeyUpCapture` : une version de `onKeyUp` qui se déclenche durant la [phase de capture](/learn/responding-to-events#capture-phase-events).
 * [`onLostPointerCapture`](https://developer.mozilla.org/docs/Web/API/Element/lostpointercapture_event) : un [gestionnaire d'événement `PointerEvent`](#pointerevent-handler). Cet événement est déclenché quand un élément cesse de capturer le pointeur.
 * `onLostPointerCaptureCapture` : une version de `onLostPointerCapture` qui se déclenche durant la [phase de capture](/learn/responding-to-events#capture-phase-events).
diff --git a/src/content/reference/react/useEffect.md b/src/content/reference/react/useEffect.md
@@ -62,7 +62,7 @@ function ChatRoom({ roomId }) {
 
 * Si certaines de vos dépendances sont des objets ou fonctions définies au sein de votre composant, il existe un risque qu'elles **entraînent des exécutions superflues de votre Effet**.  Pour corriger ça, retirez les dépendances superflues sur des [objets](#removing-unnecessary-object-dependencies) et [fonctions](#removing-unnecessary-function-dependencies).  Vous pouvez aussi [extraire les mises à jour d'état](#updating-state-based-on-previous-state-from-an-effect) et la [logique non réactive](#reading-the-latest-props-and-state-from-an-effect) hors de votre Effet.
 
-* Si votre Effet ne découlait pas d'une interaction (telle qu'un clic), React laissera le navigateur **rafraîchir l'affichage à l'écran avant d'exécuter votre Effet**. Si votre Effet a des aspects visuels (par exemple, il positionne une infobulle) et que le retard est perceptible (par exemple, l'affichage vacille), remplacez `useEffect` par [`useLayoutEffect`](/reference/react/useLayoutEffect).
+* Si votre Effet ne découlait pas d'une interaction (telle qu'un clic), React laissera généralement le navigateur **rafraîchir l'affichage à l'écran avant d'exécuter votre Effet**. Si votre Effet a des aspects visuels (par exemple, il positionne une infobulle) et que le retard est perceptible (par exemple, l'affichage vacille), remplacez `useEffect` par [`useLayoutEffect`](/reference/react/useLayoutEffect).
 
 * Même si votre Effet est déclenché par une interaction (telle qu'un clic), **le navigateur est susceptible de rafraîchir l'affichage avant d'avoir traité les mises à jour d'état au sein de votre Effet**.  C'est généralement ce que vous souhaitez.  Cependant, si vous devez empêcher le navigateur de rafraîchir l'affichage tout de suite, remplacez `useEffect` par [`useLayoutEffect`](/reference/react/useLayoutEffect).
 
