Merge pull request #658 from reactjs/l10n-fr-updates

copy: finalize FR updates for most translated pages

src/components/MDX/MDXComponents.tsx

@@ -384,8 +384,18 @@ function InlineTocItem({items}: {items: Array<NestedTocNode>}) {
 
 type TranslationProgress = 'complete' | 'in-progress';
 
+const frNamer = new Intl.DisplayNames('fr-FR', {type: 'language'});
+
 function LanguageList({progress}: {progress: TranslationProgress}) {
   const allLanguages = React.useContext(LanguagesContext) ?? [];
+
+  // Ensure translation (and later sorting) of language names in this fork's locale.
+  for (const lang of allLanguages) {
+    lang.enName =
+      frNamer.of(lang.code)?.replace(/^\w/, (s) => s.toUpperCase()) ??
+      lang.enName;
+  }
+
   const languages = allLanguages
     .filter(
       ({code}) =>
@@ -405,7 +415,7 @@ function LanguageList({progress}: {progress: TranslationProgress}) {
             </Link>{' '}
             &mdash;{' '}
             <Link href={`https://github.com/reactjs/${code}.react.dev`}>
-              Contribute
+              Contribuez
             </Link>
           </LI>
         );

src/content/blog/2024/04/25/react-19-upgrade-guide.md

@@ -1,20 +1,20 @@
 ---
-title: "React 19 RC Upgrade Guide"
+title: "React 19 RC : guide de migration"
 author: Ricky Hanlon
 date: 2024/04/25
-description: The improvements added to React 19 require some breaking changes, but we've worked to make the upgrade as smooth as possible and we don't expect the changes to impact most apps. In this post, we will guide you through the steps for upgrading apps and libraries to React 19.
+description: Les améliorations apportées par React 19 RC nécessitent quelques ruptures de compatibilité, mais nous avons travaillé dur pour faciliter la mise à jour le plus possible, et nous ne nous attendons pas à ce que ces changements impactent la majorité des applications. Dans cet article, nous vous guidons étape par étape pour mettre à jour vos applis et bibliothèques vers React 19.
 ---
 
 {/* FIXME:L10N */}
 
-April 25, 2024 by [Ricky Hanlon](https://twitter.com/rickhanlonii)
+Le 25 avril 2024 par [Ricky Hanlon](https://twitter.com/rickhanlonii)
 
 ---
 
 
 <Intro>
 
-The improvements added to React 19 RC require some breaking changes, but we've worked to make the upgrade as smooth as possible, and we don't expect the changes to impact most apps.
+Les améliorations apportées par React 19 RC nécessitent quelques ruptures de compatibilité, mais nous avons travaillé dur pour faciliter la mise à jour le plus possible, et nous ne nous attendons pas à ce que ces changements impactent la majorité des applications.
 
 </Intro>
 

src/content/blog/2024/04/25/react-19.md

@@ -1,19 +1,19 @@
 ---
 title: "React 19 RC"
-author: The React Team
+author: L'équipe React
 date: 2024/04/25
-description: React 19 RC is now available on npm! In this post, we'll give an overview of the new features in React 19, and how you can adopt them.
+description: React 19 RC est désormais disponible sur npm ! Dans cet article, nous vous donnons un aperçu des nouveautés de React 19 et de la façon de les adopter.
 ---
 
 {/* FIXME:L10N */}
 
-April 25, 2024 by [The React Team](/community/team)
+Le 25 avril 2024 par [l'équipe React](/community/team)
 
 ---
 
 <Intro>
 
-React 19 RC is now available on npm!
+React 19 RC est désormais disponible sur npm !
 
 </Intro>
 

src/content/blog/2024/05/22/react-conf-2024-recap.md

@@ -2,18 +2,18 @@
 title: "La React Conf 2024 en bref"
 author: Ricky Hanlon
 date: 2024/05/22
-description: Last week we hosted React Conf 2024, a two-day conference in Henderson, Nevada where 700+ attendees gathered in-person to discuss the latest in UI engineering. In this post, we'll summarize the talks and announcements from the event.
+description: La semaine dernière nous avons organisé React Conf 2024, une conférence de deux jours à Henderson, Nevada qui a réuni plus de 700 participant·es sur place pour discuter des dernières nouveautés dans l'ingénierie d'interface utilisateur (UI). Dans cet article nous récapitulons les présentations et annonces de cet événement.
 ---
 
 {/* FIXME:L10N */}
 
-May 22, 2024 by [Ricky Hanlon](https://twitter.com/rickhanlonii).
+Le 22 mai 2024 par [Ricky Hanlon](https://twitter.com/rickhanlonii).
 
 ---
 
 <Intro>
 
-Last week we hosted React Conf 2024, a two-day conference in Henderson, Nevada where 700+ attendees gathered in-person to discuss the latest in UI engineering. This was our first in-person conference since 2019, and we were thrilled to be able to bring the community together again.
+La semaine dernière nous avons organisé React Conf 2024, une conférence de deux jours à Henderson, Nevada qui a réuni plus de 700 participant·es sur place pour discuter des dernières nouveautés dans l'ingénierie d'interface utilisateur (UI).  C'était notre première conférence physique depuis 2019, et nous étions enchantés de pouvoir amener à nouveau la communauté à se rencontrer ainsi.
 
 </Intro>
 

src/content/blog/index.md

@@ -10,27 +10,20 @@ Ce blog est la source officielle des mises à jour par l'équipe React.  Toute a
 
 <div className="sm:-mx-5 flex flex-col gap-5 mt-12">
 
-<BlogCard title="React Conf 2024 Recap" date="22 mai 2024" url="/blog/2024/05/22/react-conf-2024-recap">
-
-{/* FIXME:L10N */}
-
-Last week we hosted React Conf 2024, a two-day conference in Henderson, Nevada where 700+ attendees gathered in-person to discuss the latest in UI engineering. This was our first in-person conference since 2019, and we were thrilled to be able to bring the community together again ...
+<BlogCard title="La React Conf 2024 en bref" date="22 mai 2024" url="/blog/2024/05/22/react-conf-2024-recap">
 
+La semaine dernière nous avons organisé React Conf 2024, une conférence de deux jours à Henderson, Nevada qui a réuni plus de 700 participant·es sur place pour discuter des dernières nouveautés dans l'ingénierie d'interface utilisateur (UI).  C'était notre première conférence physique depuis 2019, et nous étions enchantés de pouvoir amener à nouveau la communauté à se rencontrer ainsi…
 </BlogCard>
 
 <BlogCard title="React 19 RC " date="25 avril 2024" url="/blog/2024/04/25/react-19">
 
-{/* FIXME:L10N */}
-
-In the React 19 RC Upgrade Guide, we shared step-by-step instructions for upgrading your app to React 19. In this post, we'll give an overview of the new features in React 19, and how you can adopt them ...
+Dans le guide de migration vers React 19 RC, nous vous donnions des instructions étape par étape pour mettre à jour votre application vers React 19. Dans cet article, nous vous donnons un aperçu des nouveautés de React 19 et de la façon de les adopter…
 
 </BlogCard>
 
 <BlogCard title="React 19 RC : guide de migration" date="25 avril 2024" url="/blog/2024/04/25/react-19-upgrade-guide">
 
-{/* FIXME:L10N */}
-
-The improvements added to React 19 require some breaking changes, but we've worked to make the upgrade as smooth as possible, and we don't expect the changes to impact most apps. In this post, we will guide you through the steps for upgrading libraries to React 19 ...
+Les améliorations apportées par React 19 RC nécessitent quelques ruptures de compatibilité, mais nous avons travaillé dur pour faciliter la mise à jour le plus possible, et nous ne nous attendons pas à ce que ces changements impactent la majorité des applications. Dans cet article, nous vous guidons étape par étape pour mettre à jour vos applis et bibliothèques vers React 19…
 
 </BlogCard>
 
@@ -113,6 +106,6 @@ Toute les versions de React ne méritent pas forcément leur propre billet de bl
 
 ### Billets plus anciens {/*older-posts*/}
 
-Consultez les [anciens billets](https://legacy.reactjs.org/blog/all.html/).
+Consultez les [anciens billets](https://fr.legacy.reactjs.org/blog/all.html/).
 
 <div className="h-12"></div>

src/content/community/docs-contributors.md

@@ -40,9 +40,3 @@ La documentation de React est écrite et maintenue par [l'équipe React](/commun
 * [Luna Ruan](https://twitter.com/lunaruan) : améliorations des bacs à sable
 
 Nous aimerions aussi remercier les innombrables testeurs de la première heure et membres de la communautés qui nous ont fourni des retours tout au long de notre travail.
-
-## Traduction {/*translation*/}
-
-Si vous bénéficiez d’une traduction française de qualité et à jour de la documentation officielle React, c’est grâce au travail bénévole d’un nombre significatif de traducteur·rice·s, qui dans certains cas ont fait là leur premier travail de traduction, voire leur première contribution sur GitHub.
-
-[Christophe Porteneuve](https://twitter.com/porteneuve) pilote l’effort de traduction française ; vous pourrez trouver tout le détail des personnes ayant contribué à la traduction et de leurs travaux respectifs dans [ce document](https://github.com/reactjs/fr.react.dev/blob/main/TRANSLATORS.md). Mille merci à elles !

src/content/community/team.md

@@ -67,8 +67,7 @@ Les membres actuels de l'équipe React sont listés ci-dessous par ordre alphab
 </TeamMember>
 
 <TeamMember name="Ruslan Lesiutin" permalink="ruslan-lesiutin" photo="/images/team/lesiutin.jpg" github="hoxyq" twitter="ruslanlesiutin" threads="lesiutin" title="Engineer at Meta">
-    {/* FIXME:L10N */}
-    Ruslan's introduction to UI programming started when he was a kid by manually editing HTML templates for his custom gaming forums. Somehow, he ended up majoring in Computer Science. He enjoys music, games, and memes. Mostly memes.
+    Ruslan a commencé enfant à programmer des UI en modifiant des gabarits HTML pour ses forums personnalisés de jeux.  Sans trop savoir comment, il a fini par spécialiser ses études en informatique.  Il aime la musique, les jeux, et les mèmes.  Surtout les mèmes.
 </TeamMember>
 
 <TeamMember name="Sathya Gunasekaran " permalink="sathya-gunasekaran" photo="/images/team/sathya.jpg" github="gsathya" twitter="_gsathya" threads="gsathya.03" title="Ingénieur chez Meta">

src/content/community/translations.md

@@ -1,37 +1,41 @@
 ---
-title: Translations
+title: Traductions
 ---
 
-{/* FIXME:L10N */}
-
 <Intro>
 
-React docs are translated by the global community into many languages all over the world.
+La documentation React est traduite par une communauté globale dans de nombreuses langues un peu partout dans le monde.
 
 </Intro>
 
-## Source site {/*main-site*/}
+## Version originale {/*main-site*/}
 
-All translations are provided from the canonical source docs:
+Toutes les traductions se fondent la source canonique de documentation :
 
-- [English](https://react.dev/) &mdash; [Contribute](https://github.com/reactjs/react.dev/)
+- [Anglais](https://react.dev/) &mdash; [Contribuez](https://github.com/reactjs/react.dev/)
 
-## Full translations {/*full-translations*/}
+## Traductions complètes {/*full-translations*/}
 
 {/* If you are a language maintainer and want to add your language here, finish the "Core" translations and edit `deployedTranslations` under `src/utils`. */}
 
 <LanguageList progress="complete" />
 
-## In-progress translations {/*in-progress-translations*/}
+## Traductions en cours {/*in-progress-translations*/}
 
-For the progress of each translation, see: [Is React Translated Yet?](https://translations.react.dev/)
+Pour examiner le taux de progression de chaque traductions, consultez [Is React Translated Yet?](https://translations.react.dev/)
 
 <LanguageList progress="in-progress" />
 
-## How to contribute {/*how-to-contribute*/}
+## Comment contribuer {/*how-to-contribute*/}
+
+Vous pouvez contribuer aux efforts de traduction !
+
+La communauté gère le travail de traduction de la documentation React dans des *forks* de react.dev dédiés pour chaque langue.  Généralement, une tâche de traduction revient à traduire directement un fichier Markdown et à créer une *Pull request*.  Cliquez sur le lien « Contribuer » ci-dessus pour accéder au dépôt GitHub de votre langue, et suivez les instructions qui y figurent pour aider à la traduction.
+
+Si votre langue n'est pas encore proposée et que vous souhaitez démarrer une nouvelle traduction pour votre langue, allez voir [translations.react.dev](https://github.com/reactjs/translations.react.dev).
 
-You can contribute to the translation efforts! 
+## Au sujet de cette version française {/*translation*/}
 
-The community conducts the translation work for the React docs on each language-specific fork of react.dev. Typical translation work involves directly translating a Markdown file and creating a pull request. Click the "contribute" link above to the GitHub repository for your language, and follow the instructions there to help with the translation effort.
+Si vous bénéficiez d’une traduction française de qualité et à jour de la documentation officielle React, c’est grâce au travail bénévole d’un nombre significatif de traducteur·rice·s, qui dans certains cas ont fait là leur premier travail de traduction, voire leur première contribution sur GitHub.
 
-If you want to start a new translation for your language, visit: [translations.react.dev](https://github.com/reactjs/translations.react.dev)
+[Christophe Porteneuve](https://twitter.com/porteneuve) pilote l’effort de traduction française ; vous pourrez trouver tout le détail des personnes ayant contribué à la traduction et de leurs travaux respectifs dans [ce document](https://github.com/reactjs/fr.react.dev/blob/main/TRANSLATORS.md). Mille merci à elles !

src/content/learn/synchronizing-with-effects.md

@@ -599,30 +599,28 @@ La plupart des Effets que vous aurez à écrire correspondront à un des scénar
 
 <Pitfall>
 
-{/* FIXME:L10N */}
+#### N'utilisez pas des refs pour empêcher le déclenchement d'un Effet {/*dont-use-refs-to-prevent-effects-from-firing*/}
 
-#### Don't use refs to prevent Effects from firing {/*dont-use-refs-to-prevent-effects-from-firing*/}
-
-A common pitfall for preventing Effects firing twice in development is to use a `ref` to prevent the Effect from running more than once. For example, you could "fix" the above bug with a `useRef`:
+Une mauvaise pratique fréquente afin d'empêcher le double-déclenchement d'un Effet en développement consiste à utiliser une `ref` pour empêcher son exécution multiple.  Vous pourriez par exemple « corriger » le bug ci-dessus avec un `useRef` :
 
 ```js {1,3-4}
   const connectionRef = useRef(null);
   useEffect(() => {
-    // 🚩 This wont fix the bug!!!
+    // 🚩 Ça ne corrigera pas le bug !!!
     if (!connectionRef.current) {
       connectionRef.current = createConnection();
       connectionRef.current.connect();
     }
   }, []);
 ```
 
-This makes it so you only see `"✅ Connecting..."` once in development, but it doesn't fix the bug.
+Ainsi, vous ne voyez `"✅ Connexion..."` qu'une fois en développement, mais ça n'a pas corrigé le bug pour autant.
 
-When the user navigates away, the connection still isn't closed and when they navigate back, a new connection is created. As the user navigates across the app, the connections would keep piling up, the same as it would before the "fix". 
+Lorsque l'utilisateur navigue ailleurs, la connexion ne sera toujours pas fermée, et lorsqu'il reviendra, une nouvelle connexion sera créée. Au fil de la navigation, les connexions continueront à s'empiler, tout comme avant votre « correctif ».
 
-To fix the bug, it is not enough to just make the Effect run once. The effect needs to work after re-mounting, which means the connection needs to be cleaned up like in the solution above.
+Pour corriger le bug, il ne suffit pas de faire que l'Effet ne s'exécute qu'une fois. L'Effet doit pouvoir fonctionner après un remontage, ce qui signifie que la connexion doit être nettoyée comme dans la solution vue plus haut.
 
-See the examples below for how to handle common patterns.
+Parcourez les exemples ci-dessous pour découvrir comment gérer les cas les plus courants.
 
 </Pitfall>