Skip to content

Commit fd218e9

Browse files
authored
Translation of the "Context" page
Add French translation for Context
2 parents ea7b5db + 9176d54 commit fd218e9

11 files changed

+109
-109
lines changed

content/docs/context.md

+71-72
Large diffs are not rendered by default.

examples/context/motivation-problem.js

+4-4
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,10 @@ class App extends React.Component {
66

77
function Toolbar(props) {
88
// highlight-range{1-4,7}
9-
// The Toolbar component must take an extra "theme" prop
10-
// and pass it to the ThemedButton. This can become painful
11-
// if every single button in the app needs to know the theme
12-
// because it would have to be passed through all components.
9+
// Le composant Toolbar doit prendre une prop supplémentaire `theme` et la
10+
// passer au ThemedButton. Ça peut devenir pénible si chaque bouton de l’appli
11+
// a besoin de connaître le thème parce qu’il faudra le faire passer à travers
12+
// tous les composants.
1313
return (
1414
<div>
1515
<ThemedButton theme={props.theme} />

examples/context/motivation-solution.js

+11-12
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
// highlight-range{1-4}
2-
// Context lets us pass a value deep into the component tree
3-
// without explicitly threading it through every component.
4-
// Create a context for the current theme (with "light" as the default).
2+
// Le Contexte nous permet de transmettre une prop profondément dans l’arbre des
3+
// composants sans la faire passer explicitement à travers tous les composants.
4+
// Crée un contexte pour le thème (avec “light” comme valeur par défaut).
55
const ThemeContext = React.createContext('light');
66

77
class App extends React.Component {
88
render() {
99
// highlight-range{1-3,5}
10-
// Use a Provider to pass the current theme to the tree below.
11-
// Any component can read it, no matter how deep it is.
12-
// In this example, we're passing "dark" as the current value.
10+
// Utilise un Provider pour passer le thème plus bas dans l’arbre.
11+
// N’importe quel composant peut le lire, quelle que soit sa profondeur.
12+
// Dans cet exemple, nous passons “dark” comme valeur actuelle.
1313
return (
1414
<ThemeContext.Provider value="dark">
1515
<Toolbar />
@@ -18,9 +18,8 @@ class App extends React.Component {
1818
}
1919
}
2020

21-
// highlight-range{1,2}
22-
// A component in the middle doesn't have to
23-
// pass the theme down explicitly anymore.
21+
// highlight-range{1,1}
22+
// Un composant au milieu n’a plus à transmettre explicitement le thème
2423
function Toolbar(props) {
2524
return (
2625
<div>
@@ -31,9 +30,9 @@ function Toolbar(props) {
3130

3231
class ThemedButton extends React.Component {
3332
// highlight-range{1-3,6}
34-
// Assign a contextType to read the current theme context.
35-
// React will find the closest theme Provider above and use its value.
36-
// In this example, the current theme is "dark".
33+
// Définit un contextType pour lire le contexte de thème actuel. React va
34+
// trouver le Provider de thème ancêtre le plus proche et utiliser sa valeur.
35+
// Dans cet exemple, le thème actuel est “dark.
3736
static contextType = ThemeContext;
3837
render() {
3938
return <Button theme={this.context} />;

examples/context/multiple-contexts.js

+5-5
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
1-
// Theme context, default to light theme
1+
// Contexte de thème, clair par défaut
22
const ThemeContext = React.createContext('light');
33

4-
// Signed-in user context
4+
// Contexte d’utilisateur authentifié
55
const UserContext = React.createContext({
6-
name: 'Guest',
6+
name: 'Invité',
77
});
88

99
class App extends React.Component {
1010
render() {
1111
const {signedInUser, theme} = this.props;
1212

13-
// App component that provides initial context values
13+
// Le composant App qui donne accès aux différentes valeurs des contextes
1414
// highlight-range{2-3,5-6}
1515
return (
1616
<ThemeContext.Provider value={theme}>
@@ -31,7 +31,7 @@ function Layout() {
3131
);
3232
}
3333

34-
// A component may consume multiple contexts
34+
// Un composant peut consommer plusieurs contextes
3535
function Content() {
3636
// highlight-range{2-10}
3737
return (

examples/context/reference-caveats-problem.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ class App extends React.Component {
22
render() {
33
// highlight-range{2}
44
return (
5-
<Provider value={{something: 'something'}}>
5+
<Provider value={{something: 'quelque chose'}}>
66
<Toolbar />
77
</Provider>
88
);

examples/context/reference-caveats-solution.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ class App extends React.Component {
33
super(props);
44
// highlight-range{2}
55
this.state = {
6-
value: {something: 'something'},
6+
value: {something: 'quelque chose'},
77
};
88
}
99

examples/context/theme-detailed-app.js

+6-5
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
import {ThemeContext, themes} from './theme-context';
2+
23
import ThemedButton from './themed-button';
34

4-
// An intermediate component that uses the ThemedButton
5+
// Un composant intermédiaire qui utilise ThemedButton
56
function Toolbar(props) {
67
return (
78
<ThemedButton onClick={props.changeTheme}>
8-
Change Theme
9+
Changer le thème
910
</ThemedButton>
1011
);
1112
}
@@ -29,9 +30,9 @@ class App extends React.Component {
2930

3031
render() {
3132
//highlight-range{1-3}
32-
// The ThemedButton button inside the ThemeProvider
33-
// uses the theme from state while the one outside uses
34-
// the default dark theme
33+
// Le bouton ThemedButton à l'intérieur du ThemeProvider
34+
// utilise le thème de l’état local tandis que celui à l'extérieur
35+
// utilise le thème dark par défaut
3536
//highlight-range{3-5,7}
3637
return (
3738
<Page>

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -11,5 +11,5 @@ export const themes = {
1111

1212
// highlight-range{1-3}
1313
export const ThemeContext = React.createContext(
14-
themes.dark // default value
14+
themes.dark // valeur par défaut
1515
);

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

+4-3
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import {ThemeContext, themes} from './theme-context';
2+
23
import ThemeTogglerButton from './theme-toggler-button';
34

45
class App extends React.Component {
@@ -15,8 +16,8 @@ class App extends React.Component {
1516
};
1617

1718
// highlight-range{1-2,5}
18-
// State also contains the updater function so it will
19-
// be passed down into the context provider
19+
// L’état local contient aussi la fonction de mise à jour donc elle va
20+
// être passée au fournisseur de contexte
2021
this.state = {
2122
theme: themes.light,
2223
toggleTheme: this.toggleTheme,
@@ -25,7 +26,7 @@ class App extends React.Component {
2526

2627
render() {
2728
// highlight-range{1,3}
28-
// The entire state is passed to the provider
29+
// L’état local entier est passé au fournisseur
2930
return (
3031
<ThemeContext.Provider value={this.state}>
3132
<Content />

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

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

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

+3-3
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,15 @@ import {ThemeContext} from './theme-context';
22

33
function ThemeTogglerButton() {
44
// highlight-range{1-2,5}
5-
// The Theme Toggler Button receives not only the theme
6-
// but also a toggleTheme function from the context
5+
// Le Theme Toggler Button reçoit non seulement le thème
6+
// mais aussi une fonction toggleTheme du contexte
77
return (
88
<ThemeContext.Consumer>
99
{({theme, toggleTheme}) => (
1010
<button
1111
onClick={toggleTheme}
1212
style={{backgroundColor: theme.background}}>
13-
Toggle Theme
13+
Changer le thème
1414
</button>
1515
)}
1616
</ThemeContext.Consumer>

0 commit comments

Comments
 (0)