Add French translation for Context

examples/context/motivation-problem.js

@@ -1,15 +1,15 @@
 class App extends React.Component {
   render() {
-    return <Toolbar theme="dark" />;
+    return <Toolbar theme="foncé" />;
   }
 }
 
 function Toolbar(props) {
   // highlight-range{1-4,7}
-  // The Toolbar component must take an extra "theme" prop
-  // and pass it to the ThemedButton. This can become painful
-  // if every single button in the app needs to know the theme
-  // because it would have to be passed through all components.
+  // Le composant Toolbar doit prendre une prop supplémentaire « theme »
+  // et la passer au ThemedButton. Ça peut devenir pénible
+  // si chaque bouton de l'appli a besoin de connaître le thème
+  // parce qu'il faudra le faire passer à travers tous les composants.
   return (
     <div>
       <ThemedButton theme={props.theme} />

examples/context/motivation-solution.js

@@ -1,26 +1,26 @@
 // highlight-range{1-4}
-// Context lets us pass a value deep into the component tree
-// without explicitly threading it through every component.
-// Create a context for the current theme (with "light" as the default).
-const ThemeContext = React.createContext('light');
+// Le Contexte nous permet de transmettre une prop profondément dans l'arborescence du composant
+// sans la faire passer explicitement à travers tous les composants.
+// Créez un contexte pour le thème (avec « clair » par défaut).
+const ThemeContext = React.createContext('clair');
 
 class App extends React.Component {
   render() {
     // highlight-range{1-3,5}
-    // Use a Provider to pass the current theme to the tree below.
-    // Any component can read it, no matter how deep it is.
-    // In this example, we're passing "dark" as the current value.
+    // Utilisez un Provider (fournisseur, NdT) pour passer le thème à l'arborescence ci-dessous.
+    // N'importe quel composant peut le lire, quel que soit sa profondeur.
+    // Dans cet exemple, nous passons « foncé » comme valeur actuelle.
     return (
-      <ThemeContext.Provider value="dark">
+      <ThemeContext.Provider value="foncé">
         <Toolbar />
       </ThemeContext.Provider>
     );
   }
 }
 
 // highlight-range{1,2}
-// A component in the middle doesn't have to
-// pass the theme down explicitly anymore.
+// Un composant au milieu n'a plus à
+// transmettre explicitement le thème
 function Toolbar(props) {
   return (
     <div>
@@ -31,9 +31,9 @@ function Toolbar(props) {
 
 class ThemedButton extends React.Component {
   // highlight-range{1-3,6}
-  // Assign a contextType to read the current theme context.
-  // React will find the closest theme Provider above and use its value.
-  // In this example, the current theme is "dark".
+  // Assignez un contextType pour lire le contexte du thème actuel.
+  // React va trouver le Provider de thème le plus près et utiliser sa valeur.
+  // Dans cet exemple, le thème actuel est « foncé ».
   static contextType = ThemeContext;
   render() {
     return <Button theme={this.context} />;

examples/context/multiple-contexts.js

@@ -1,7 +1,7 @@
-// Theme context, default to light theme
-const ThemeContext = React.createContext('light');
+// Contexte thème, par défaut à clair 
+const ThemeContext = React.createContext('clair');
 
-// Signed-in user context
+// Contexte utilisateur authentifié
 const UserContext = React.createContext({
   name: 'Guest',
 });
@@ -10,7 +10,7 @@ class App extends React.Component {
   render() {
     const {signedInUser, theme} = this.props;
 
-    // App component that provides initial context values
+    // Le composant App qui donne accès aux différentes valeurs des contextes
     // highlight-range{2-3,5-6}
     return (
       <ThemeContext.Provider value={theme}>
@@ -31,7 +31,7 @@ function Layout() {
   );
 }
 
-// A component may consume multiple contexts
+// Un composant peut consommer plusieurs contextes
 function Content() {
   // highlight-range{2-10}
   return (

examples/context/reference-caveats-problem.js

@@ -2,7 +2,7 @@ class App extends React.Component {
   render() {
     // highlight-range{2}
     return (
-      <Provider value={{something: 'something'}}>
+      <Provider value={{something: 'quelquechose'}}>
         <Toolbar />
       </Provider>
     );

examples/context/reference-caveats-solution.js

@@ -3,7 +3,7 @@ class App extends React.Component {
     super(props);
     // highlight-range{2}
     this.state = {
-      value: {something: 'something'},
+      value: {something: 'quelquechose'},
     };
   }
 

examples/context/theme-detailed-app.js

@@ -1,11 +1,11 @@
 import {ThemeContext, themes} from './theme-context';
 import ThemedButton from './themed-button';
 
-// An intermediate component that uses the ThemedButton
+// Un composant intermédiaire qui utilise ThemedButton
 function Toolbar(props) {
   return (
     <ThemedButton onClick={props.changeTheme}>
-      Change Theme
+      Changer le thème
     </ThemedButton>
   );
 }
@@ -29,9 +29,9 @@ class App extends React.Component {
 
   render() {
     //highlight-range{1-3}
-    // The ThemedButton button inside the ThemeProvider
-    // uses the theme from state while the one outside uses
-    // the default dark theme
+    // Le bouton ThemedButton à l'intérieur du ThemeProvider
+    // utilise le thème du state pendant que celui à l'exterieur
+    // utilise le thème dark par défaut
     //highlight-range{3-5,7}
     return (
       <Page>

examples/context/theme-detailed-theme-context.js

@@ -11,5 +11,5 @@ export const themes = {
 
 // highlight-range{1-3}
 export const ThemeContext = React.createContext(
-  themes.dark // default value
+  themes.dark // valeur par défaut
 );

examples/context/updating-nested-context-app.js

@@ -15,8 +15,8 @@ class App extends React.Component {
     };
 
     // highlight-range{1-2,5}
-    // State also contains the updater function so it will
-    // be passed down into the context provider
+    // L'état local contient aussi la fonction de mise à jour donc elle va
+    // être passée au provider de contexte
     this.state = {
       theme: themes.light,
       toggleTheme: this.toggleTheme,
@@ -25,7 +25,7 @@ class App extends React.Component {
 
   render() {
     // highlight-range{1,3}
-    // The entire state is passed to the provider
+    // L'état local entier est passé provider
     return (
       <ThemeContext.Provider value={this.state}>
         <Content />

examples/context/updating-nested-context-context.js

@@ -1,5 +1,5 @@
-// Make sure the shape of the default value passed to
-// createContext matches the shape that the consumers expect!
+// Assurez-vous que la forme de la valeur par défaut passée à
+// createContext correspond à la forme que les consommateurs attendent !
 // highlight-range{2-3}
 export const ThemeContext = React.createContext({
   theme: themes.dark,

examples/context/updating-nested-context-theme-toggler-button.js

@@ -2,15 +2,15 @@ import {ThemeContext} from './theme-context';
 
 function ThemeTogglerButton() {
   // highlight-range{1-2,5}
-  // The Theme Toggler Button receives not only the theme
-  // but also a toggleTheme function from the context
+  // Le Theme Toggler Button reçoit non seulement le thème
+  // mais aussi une fonction toggleTheme du contexte
   return (
     <ThemeContext.Consumer>
       {({theme, toggleTheme}) => (
         <button
           onClick={toggleTheme}
           style={{backgroundColor: theme.background}}>
-          Toggle Theme
+          Changer de thème
         </button>
       )}
     </ThemeContext.Consumer>