Translation of all layout elements

content/community/nav.yml

@@ -1,42 +1,42 @@
-- title: Community Resources
+- title: Ressources communautaires
   items:
     - id: support
       title: Support
     - id: courses
-      title: Courses
+      title: Cours
     - id: examples
-      title: Examples
+      title: Exemples
     - id: meetups
       title: Meetups
     - id: conferences
-      title: Conferences
+      title: Conférences
     - id: articles
       title: Articles
     - id: podcasts
       title: Podcasts
     - id: videos
-      title: Videos
+      title: Vidéos
     - id: external-resources
-      title: External Resources
-- title: Tools
+      title: Ressources externes
+- title: Outils
   items:
     - id: debugging-tools
-      title: Debugging
+      title: Débogage
     - id: component-workbenches
       title: Component Workbenches
     - id: jsx-integrations
-      title: JSX Integrations
+      title: Intégrations JSX
     - id: starter-kits
-      title: Starter Kits
+      title: Kits de démarrage
     - id: routing
-      title: Routing
+      title: Routage
     - id: model-management
-      title: Model Management
+      title: Gestion de modèles
     - id: data-fetching
-      title: Data Fetching
+      title: Chargement de données
     - id: testing
-      title: Testing
+      title: Tests
     - id: ui-components
-      title: UI Components
+      title: Composants UI
     - id: misc
-      title: Miscellaneous
+      title: Divers

src/components/CodeEditor/CodeEditor.js

@@ -4,12 +4,13 @@
  * @emails react-core
  */
 
-import React, {Component} from 'react';
-import ReactDOM from 'react-dom';
-import Remarkable from 'remarkable';
 import {LiveEditor, LiveProvider} from 'react-live';
+import React, {Component} from 'react';
 import {colors, media} from 'theme';
+
 import MetaTitle from 'templates/components/MetaTitle';
+import ReactDOM from 'react-dom';
+import Remarkable from 'remarkable';
 
 const compileES5 = (
   code, // eslint-disable-next-line no-undef
@@ -56,12 +57,12 @@ class CodeEditor extends Component {
     if (showBabelErrorMessage) {
       errorMessage = (
         <span>
-          Babel could not be loaded.
+          Babel n’a pas pu être chargé
           <br />
           <br />
-          This can be caused by an ad blocker. If you're using one, consider
-          adding reactjs.org to the whitelist so the live code examples will
-          work.
+          Ça peut venir d’un bloqueur de publicités. Si vous en utilisez un,
+          vous voudrez sans doute ajouter fr.reactjs.org à sa liste blanche de
+          sites pour que les exemples interactifs de code fonctionnent.
         </span>
       );
     } else if (error != null) {

src/components/CodeExample/CodeExample.js

@@ -1,8 +1,8 @@
 import React, {Component} from 'react';
-import PropTypes from 'prop-types';
-
 import {colors, media} from 'theme';
+
 import CodeEditor from '../CodeEditor/CodeEditor';
+import PropTypes from 'prop-types';
 
 class CodeExample extends Component {
   render() {
@@ -61,7 +61,7 @@ class CodeExample extends Component {
         {loaded ? (
           <CodeEditor code={code} containerNodeID={containerNodeID} />
         ) : (
-          <h4>Loading code example...</h4>
+          <h4>Chargement de l’exemple de code…</h4>
         )}
       </div>
     );

src/components/ErrorDecoder/ErrorDecoder.js

@@ -5,9 +5,8 @@
  * @flow
  */
 
-import React from 'react';
-
 import type {Node} from 'react';
+import React from 'react';
 
 function replaceArgs(msg: string, argList: Array<string>): string {
   let argIdx = 0;
@@ -69,16 +68,17 @@ function ErrorResult(props: {|code: ?string, msg: string|}) {
   if (!code) {
     return (
       <p>
-        When you encounter an error, you'll receive a link to this page for that
-        specific error and we'll show you the full error text.
+        Quand vous rencontrerez une erreur, vous recevrez un lien vers cette page
+        pour cette erreur précise, et nous vous montrerons le texte complet de
+        l’erreur.
       </p>
     );
   }
 
   return (
     <div>
       <p>
-        <b>The full text of the error you just encountered is:</b>
+        <b>Le texte complet de l’erreur que vous venez de rencontrer est :</b>
       </p>
       <code>
         <b>{urlify(errorMsg)}</b>

src/components/LayoutFooter/Footer.js

@@ -5,15 +5,15 @@
  * @flow
  */
 
+import {colors, media} from 'theme';
+import {sectionListCommunity, sectionListDocs} from 'utils/sectionList';
+
 import Container from 'components/Container';
 import ExternalFooterLink from './ExternalFooterLink';
 import FooterLink from './FooterLink';
 import FooterNav from './FooterNav';
 import MetaTitle from 'templates/components/MetaTitle';
 import React from 'react';
-import {colors, media} from 'theme';
-import {sectionListCommunity, sectionListDocs} from 'utils/sectionList';
-
 import ossLogoPng from 'images/oss_logo.png';
 
 const Footer = ({layoutHasSidebar = false}: {layoutHasSidebar: boolean}) => (
@@ -73,7 +73,7 @@ const Footer = ({layoutHasSidebar = false}: {layoutHasSidebar: boolean}) => (
             })}
           </FooterNav>
           <FooterNav layoutHasSidebar={layoutHasSidebar}>
-            <MetaTitle onDark={true}>Channels</MetaTitle>
+            <MetaTitle onDark={true}>Canaux</MetaTitle>
             <ExternalFooterLink
               href="https://github.com/facebook/react"
               target="_blank"
@@ -90,19 +90,19 @@ const Footer = ({layoutHasSidebar = false}: {layoutHasSidebar: boolean}) => (
               href="https://discuss.reactjs.org"
               target="_blank"
               rel="noopener">
-              Discussion Forum
+              Forum
             </ExternalFooterLink>
             <ExternalFooterLink
               href="https://discord.gg/0ZcbPKXt5bZjGY5n"
               target="_blank"
               rel="noopener">
-              Reactiflux Chat
+              Chat Reactiflux
             </ExternalFooterLink>
             <ExternalFooterLink
               href="https://dev.to/t/react"
               target="_blank"
               rel="noopener">
-              DEV Community
+              Communauté DEV
             </ExternalFooterLink>
             <ExternalFooterLink
               href="https://www.facebook.com/react"
@@ -118,7 +118,7 @@ const Footer = ({layoutHasSidebar = false}: {layoutHasSidebar: boolean}) => (
             </ExternalFooterLink>
           </FooterNav>
           <FooterNav layoutHasSidebar={layoutHasSidebar}>
-            <MetaTitle onDark={true}>Community</MetaTitle>
+            <MetaTitle onDark={true}>Communauté</MetaTitle>
             {sectionListCommunity.map(section => (
               <FooterLink
                 to={`/community/${section.items[0].id}.html`}
@@ -128,12 +128,10 @@ const Footer = ({layoutHasSidebar = false}: {layoutHasSidebar: boolean}) => (
             ))}
           </FooterNav>
           <FooterNav layoutHasSidebar={layoutHasSidebar}>
-            <MetaTitle onDark={true}>More</MetaTitle>
-            <FooterLink to="/tutorial/tutorial.html">Tutorial</FooterLink>
+            <MetaTitle onDark={true}>Plus</MetaTitle>
+            <FooterLink to="/tutorial/tutorial.html">Tutoriel</FooterLink>
             <FooterLink to="/blog/">Blog</FooterLink>
-            <FooterLink to="/acknowledgements.html">
-              Acknowledgements
-            </FooterLink>
+            <FooterLink to="/acknowledgements.html">Remerciements</FooterLink>
             <ExternalFooterLink
               href="https://facebook.github.io/react-native/"
               target="_blank"

src/components/LayoutHeader/DocSearch.js

@@ -104,8 +104,8 @@ class DocSearch extends Component<{}, State> {
           }}
           id="algolia-doc-search"
           type="search"
-          placeholder="Search docs"
-          aria-label="Search docs"
+          placeholder="Recherche"
+          aria-label="Rechercher dans la doc"
         />
       </form>
     ) : null;

src/components/LayoutHeader/Header.js

@@ -5,16 +5,16 @@
  * @flow
  */
 
+import {colors, fonts, media} from 'theme';
+
 import Container from 'components/Container';
+import DocSearch from './DocSearch';
+import ExternalLinkSvg from 'templates/components/ExternalLinkSvg';
 import HeaderLink from './HeaderLink';
 import {Link} from 'gatsby';
 import React from 'react';
-import {colors, fonts, media} from 'theme';
-import {version} from 'site-constants';
-import ExternalLinkSvg from 'templates/components/ExternalLinkSvg';
-import DocSearch from './DocSearch';
-
 import logoSvg from 'icons/logo.svg';
+import {version} from 'site-constants';
 
 const Header = ({location}: {location: Location}) => (
   <header
@@ -120,12 +120,12 @@ const Header = ({location}: {location: Location}) => (
           />
           <HeaderLink
             isActive={location.pathname.includes('/tutorial/')}
-            title="Tutorial"
+            title="Tutoriel"
             to="/tutorial/tutorial.html"
           />
           <HeaderLink
             isActive={location.pathname.includes('/community/')}
-            title="Community"
+            title="Communauté"
             to="/community/support.html"
           />
           <HeaderLink

src/templates/components/NavigationFooter/NavigationFooter.js

@@ -4,12 +4,13 @@
  * @emails react-core
  */
 
+import {colors, fonts, media} from 'theme';
+
 import Container from 'components/Container';
 import Flex from 'components/Flex';
 import {Link} from 'gatsby';
 import PropTypes from 'prop-types';
 import React from 'react';
-import {colors, fonts, media} from 'theme';
 
 const NavigationFooter = ({next, prev, location}) => {
   return (
@@ -40,7 +41,7 @@ const NavigationFooter = ({next, prev, location}) => {
           <Flex basis="50%" type="li">
             {prev && (
               <div>
-                <SecondaryLabel>Previous article</SecondaryLabel>
+                <SecondaryLabel>Article précédent</SecondaryLabel>
                 <div
                   css={{
                     paddingTop: 10,
@@ -61,7 +62,7 @@ const NavigationFooter = ({next, prev, location}) => {
                 textAlign: 'right',
               }}>
               <div>
-                <SecondaryLabel>Next article</SecondaryLabel>
+                <SecondaryLabel>Prochain article</SecondaryLabel>
                 <div
                   css={{
                     paddingTop: 10,