You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardexpand all lines: content/fr/guide/v8/differences-to-react.md
+2-2
Original file line number
Diff line number
Diff line change
@@ -17,7 +17,7 @@ La raison pour laquelle Preact n'essaye pas d'inclure chaque fonctionnalité de
17
17
18
18
## Compatibilité de version
19
19
20
-
Pour Preact et [preact-compat], la compatibilité de version est mesurée par rapport aux version majeures _actuelle_ et _précédente_ de React. Quand de nouvelles fonctionnalités sont annoncées par l'équipe de React, elles peuvent être ajoutées au coeur de Preact si cela fait sens par rapport aux [buts du projet]. C'est un processus relativement démocratique, en constante évolution à travers des discussions et des décisions transparentes, en utilisant les issues et les pull requests.
20
+
Pour Preact et [preact-compat], la compatibilité de version est mesurée par rapport aux version majeures _actuelle_ et _précédente_ de React. Quand de nouvelles fonctionnalités sont annoncées par l'équipe de React, elles peuvent être ajoutées au cœur de Preact si cela fait sens par rapport aux [buts du projet]. C'est un processus relativement démocratique, en constante évolution à travers des discussions et des décisions transparentes, en utilisant les issues et les pull requests.
21
21
22
22
> Ainsi, le site web et la documentation reflètent React `0.14.x` et `15.x`, lorsque l'on parle de compatibilité ou qu'on fait des comparaisons.
23
23
@@ -55,7 +55,7 @@ En fait, Preact ajoute quelques fonctionnalités pratiques inspirées par le tra
55
55
56
56
- La validation des [PropType] : Tout le monde n'utilise pas les PropTypes, donc ils ne font pas partie du coeur de Preact.
57
57
-_**Les PropTypes sont totalement supportés** dans [preact-compat], ou vous pouvez les utiliser manuellement._
58
-
-[Children]: Pas nécéssaire dans Preact, parce que `props.children est _toujours un Array_.
58
+
-[Children]: Pas nécessaire dans Preact, parce que `props.children est _toujours un Array_.
59
59
-_`React.Children` est totalement supporté dans [preact-compat]._
60
60
- Événements synthétiques : Les navigateurs supportés par Preact n'ont pas besoin de cet ajout.
61
61
-_Preact utilise la méthode `addEventListener` nativement supportée par les navigateurs pour la gestion des événements. Voir [GlobalEventHandlers] pour une liste complète des gestionnaires d'événement DOM._
Il est possible que certains projets souhaitent étendre `Component` avec des fonctionnalités additionelles.
8
+
Il est possible que certains projets souhaitent étendre `Component` avec des fonctionnalités additionnelles.
9
9
10
10
Il existe différents avis sur l'héritage en JavaScript, mais si vous souhaitez créer votre propre classe de base dont tous vos composants hériteront, Preact a tout prévu.
11
11
@@ -62,4 +62,4 @@ class MixedComponent extends Component {
62
62
63
63
---
64
64
65
-
> **Note :** il est important de noter que l'héritage peut vous bloquer dans une relation parent-enfant fragile. Souvent, lorsque vous êtes face à une tâche que peut être résolué par l'héritage, il y a une façon plus fonctionnelles de faire la même chose, qui vous permettra de créer une telle relation.
65
+
> **Note :** il est important de noter que l'héritage peut vous bloquer dans une relation parent-enfant fragile. Souvent, lorsque vous êtes face à une tâche que peut être résolue par l'héritage, il y a une façon plus fonctionnelles de faire la même chose, qui vous permettra de créer une telle relation.
Copy file name to clipboardexpand all lines: content/fr/guide/v8/forms.md
+3-3
Original file line number
Diff line number
Diff line change
@@ -15,11 +15,11 @@ Dans Preact, les formulaires fonctionnent globalement de la même façon que dan
15
15
16
16
---
17
17
18
-
## Composants Controllés et Non Controllés
18
+
## Composants Contrôlés et Non Contrôlés
19
19
20
-
La documentation de React sur les [Composants "Controllés"](https://facebook.github.io/react/docs/forms.html#controlled-components) et [Composants "Non-controllés"](https://facebook.github.io/react/docs/forms.html#uncontrolled-components) est très utiles pour comprendre comment appréhender les formulaires HTML, qui utilise un flux de données bidirectionnel, et comment les utiliser dans le contexte d'un rendu de DOM Virtuel basé sur des composants, qui utilise généralement un flux de données unidirectionnel.
20
+
La documentation de React sur les [Composants "Contrôlés"](https://fr.legacy.reactjs.org/docs/forms.html#controlled-components) et [Composants "Non-contrôlés"](https://fr.legacy.reactjs.org/docs/uncontrolled-components.html) est très utiles pour comprendre comment appréhender les formulaires HTML, qui utilise un flux de données bidirectionnel, et comment les utiliser dans le contexte d'un rendu de DOM Virtuel basé sur des composants, qui utilise généralement un flux de données unidirectionnel.
21
21
22
-
Généralement, vous devriez essayer de toujours utiliser les composants _Controllés_. Toutefois, lorsqu'on construit des composants isolés ou qu'on enrobe des bibliothèques externes, il peut être utile de simplement utiliser votre composant comme un point de montage pour des fonctionnalités qui ne sont pas liées à preact. Dans ces cas là, les composants "Non controllés" correspondent à ce que vous souhaitez faire.
22
+
Généralement, vous devriez essayer de toujours utiliser les composants _Contrôlés_. Toutefois, lorsqu'on construit des composants isolés ou qu'on enrobe des bibliothèques externes, il peut être utile de simplement utiliser votre composant comme un point de montage pour des fonctionnalités qui ne sont pas liées à preact. Dans ces cas là, les composants "Non contrôlés" correspondent à ce que vous souhaitez faire.
Copy file name to clipboardexpand all lines: content/fr/guide/v8/getting-started.md
+3-3
Original file line number
Diff line number
Diff line change
@@ -108,11 +108,11 @@ Rendre hyperscript avec un DOM virtuel est inutile, cependant. Nous voulons rend
108
108
109
109
## Composants
110
110
111
-
Preact exporte une classe `Component` générique, qui peut être étendue pour créer des boûts d'interface utilisateur encapsulés et indépendants. Les composants supportent toutes les [méthodes de cycle de vie][#the-component-lifecycle] standard de React, comme `shouldComponentUpdate()` et `componentWillReceiveProps()`. Ecrire votre implémentation spécifique de ces méthodes et la meilleure façon de contrôler _quand_ et _comment_ les composants sont mis à jour.
111
+
Preact exporte une classe `Component` générique, qui peut être étendue pour créer des bouts d'interface utilisateur encapsulés et indépendants. Les composants supportent toutes les [méthodes de cycle de vie][#the-component-lifecycle] standard de React, comme `shouldComponentUpdate()` et `componentWillReceiveProps()`. Écrire votre implémentation spécifique de ces méthodes et la meilleure façon de contrôler _quand_ et _comment_ les composants sont mis à jour.
112
112
113
-
Les composants ont aussi une méthode `render()`, mais à la différence de React, cette méthode reçoit `(props, state)` comme arguments. Cela donne un moyen ergonomique de destructurer`props` et `state` en variables locales qui pourront être référencés dans le JSX.
113
+
Les composants ont aussi une méthode `render()`, mais à la différence de React, cette méthode reçoit `(props, state)` comme arguments. Cela donne un moyen ergonomique de déstructurer`props` et `state` en variables locales qui pourront être référencés dans le JSX.
114
114
115
-
Jettons un oeil à un composant `Clock` très simple, qui affiche l'heure courante.
115
+
Jetons un œil à un composant `Clock` très simple, qui affiche l'heure courante.
Copy file name to clipboardexpand all lines: content/fr/guide/v8/linked-state.md
+2-2
Original file line number
Diff line number
Diff line change
@@ -62,7 +62,7 @@ Par défaut, `linkState()` essayera d'extraire la bonne valeur à partir d'un é
62
62
63
63
Il y a toutefois des cas où ce n'est pas ce qui est souhaité - les événements personnalisés et les boutons radios groupés sont deux exemples possibles. Dans ces cas-là, un troisième argument peut-être passé à `linkState()` pour spécifier le chemin séparé par des points dans l'objet événement où la valeur peut être trouvée.
64
64
65
-
Pour comprendre cette fonctionnalité, il peut être utile de jeter un oeil sous le capot de `linkState()`. Ce qui suit illustre un gestionnaire d'événement créé manuellement et qui persiste une valeur d'un objet Event dans le state. Fonctionnellement, c'est équivalent à la version utilisant `linkState()`, sans toutefois inclure l'optimisation de mémorisation qui rend `linkState()` précieux.
65
+
Pour comprendre cette fonctionnalité, il peut être utile de jeter un œil sous le capot de `linkState()`. Ce qui suit illustre un gestionnaire d'événement créé manuellement et qui persiste une valeur d'un objet Event dans le state. Fonctionnellement, c'est équivalent à la version utilisant `linkState()`, sans toutefois inclure l'optimisation de mémorisation qui rend `linkState()` précieux.
66
66
67
67
```js
68
68
// ce gestionnaire renvoyé par linkState :
@@ -79,7 +79,7 @@ handler = event => {
79
79
80
80
### Illustration: boutons radio groupés
81
81
82
-
Le code suivant ne fonctionne pas comme prévu. Si l'utilisateur clique sur "no", `noChecked` devient `true` mais `yesChecked` reste à `true`, puisque `onChange` n'est pas éclenché sur l'autre bouton radio :
82
+
Le code suivant ne fonctionne pas comme prévu. Si l'utilisateur clique sur "no", `noChecked` devient `true` mais `yesChecked` reste à `true`, puisque `onChange` n'est pas éclanche sur l'autre bouton radio :
Copy file name to clipboardexpand all lines: content/fr/guide/v8/progressive-web-apps.md
+4-4
Original file line number
Diff line number
Diff line change
@@ -20,7 +20,7 @@ Preact est un excellent choix pour les [Progressive Web Apps](https://web.dev/le
20
20
<div class="_title-block">
21
21
<h3>Moins de script chargé</h3>
22
22
</div>
23
-
<p class="_summary">La petite taille de Preact est précieuse lors vous avez un budget performance serré. Sur un terminal mobile moyen, le chargement de gros bundles de JavaScript mènent à des temps de chargement, d'analyse et d'évaluation plus longs. Cela peut faire attendre les utilisateurs plus longtemps avant qu'ils puissent intéragir avec votre application. En rognant sur le code de la bibliothèque dans vos bundles, vous améliorez le temps de chargement en livrant moins de code à vos utilisateurs.</p>
23
+
<p class="_summary">La petite taille de Preact est précieuse lors vous avez un budget performance serré. Sur un terminal mobile moyen, le chargement de gros bundles de JavaScript mènent à des temps de chargement, d'analyse et d'évaluation plus longs. Cela peut faire attendre les utilisateurs plus longtemps avant qu'ils puissent interagir avec votre application. En rognant sur le code de la bibliothèque dans vos bundles, vous améliorez le temps de chargement en livrant moins de code à vos utilisateurs.</p>
24
24
</div>
25
25
</li>
26
26
<li class="list-item">
@@ -40,7 +40,7 @@ Preact est un excellent choix pour les [Progressive Web Apps](https://web.dev/le
40
40
</div>
41
41
<div class="list-detail">
42
42
<div class="_title-block">
43
-
<h3>Un bloc de construction qui fonctionne merveilleusement avec l'ecosystème React</h3>
43
+
<h3>Un bloc de construction qui fonctionne merveilleusement avec l’écosystème React</h3>
44
44
</div>
45
45
<p class="_summary">Que vous ayez besoin d'utiliser le <a href="https://facebook.github.io/react/docs/react-dom-server.html">rendu côté serveur</a> de React pour afficher quelque chose à l'écran rapidement, ou d'utiliser <a href="https://github.com/ReactTraining/react-router">React Router</a> pour la navigation, Preact fonctionne bien avec de nombreuses bibliothèques de l'écosystème.</p>
46
46
</div>
@@ -53,7 +53,7 @@ En fait, le site sur lequel vous vous trouvez actuellement est une Progressive W
53
53
54
54

55
55
56
-
Le contenu statique du site est stocké dans l'API Cache Storage (Service Worker), ce qui permet un affichage instantanné lors des visites répétées.
56
+
Le contenu statique du site est stocké dans l'API Cache Storage (Service Worker), ce qui permet un affichage instantané lors des visites répétées.
57
57
58
58
## Astuces de performances
59
59
@@ -96,7 +96,7 @@ En plus d'être une solution qui fonctionne bien pour votre PWA, Preact peut aus
96
96
97
97
## Preact CLI
98
98
99
-
[Preact CLI](https://github.com/preactjs/preact-cli/) est l'outil de build officiel pour les projets Preact. C'est une simple dépendance en ligne de commande qui regroupe votre code Preact dans une Progressive Web App hautement optimisée. Son but est de rendre toutes les recommendations précédentes automatiques, afin que vous puissez vous concentrer sur l'écriture de bons composants.
99
+
[Preact CLI](https://github.com/preactjs/preact-cli/) est l'outil de build officiel pour les projets Preact. C'est une simple dépendance en ligne de commande qui regroupe votre code Preact dans une Progressive Web App hautement optimisée. Son but est de rendre toutes les recommendations précédentes automatiques, afin que vous puissiez vous concentrer sur l'écriture de bons composants.
Copy file name to clipboardexpand all lines: content/fr/guide/v8/switching-to-preact.md
+3-3
Original file line number
Diff line number
Diff line change
@@ -29,12 +29,12 @@ Premièrement, vous devez installer preact et preact-compat (ce sont deux packag
29
29
npm i -S preact preact-compat
30
30
```
31
31
32
-
Une fois ces dépendences installées, configurez votre système de build pour remplacer les imports de React afin qu'ils pointent vers Preact.
32
+
Une fois ces dépendances installées, configurez votre système de build pour remplacer les imports de React afin qu'ils pointent vers Preact.
33
33
34
34
35
35
### Comment créer un alias preact-compat
36
36
37
-
Maintenant que vous avez vos dépendences installées, vous allez devoir configurer votre système de build pour rediriger tous les imports/requires de `react` ou `react-dom` vers `preact-compat`.
37
+
Maintenant que vous avez vos dépendances installées, vous allez devoir configurer votre système de build pour rediriger tous les imports/requires de `react` ou `react-dom` vers `preact-compat`.
38
38
39
39
#### Aliasing avec Webpack
40
40
@@ -204,7 +204,7 @@ Alternativement, vous pouvez automatiquement convertir vos appels à `createClas
204
204
205
205
Une autre différence qu'il convient de noter est que Preact ne support que les références fonctionnelles par défaut.
206
206
Les références par chaîne de caractères sont dépréciées dans React et vont être supprimées sous peu, car elles introduisent trop de complexité pour peu de gains.
207
-
Si vous voulez continuer d'utiliser les références par chaîne de caractère, [cette petite fonction linkedRef](https://gist.github.com/developit/63e7a81a507c368f7fc0898076f64d8d) vous offre une solution durable qui alimente `this.refs.$$` comme les références par chaine de caractères le faisaient. La simplicité de ce petit enrobage autour des références fonctionnelles aide aussi à illustrer pourquoi celles-ci sont maintenant le meilleur choix pour le futur.
207
+
Si vous voulez continuer d'utiliser les références par chaîne de caractère, [cette petite fonction linkedRef](https://gist.github.com/developit/63e7a81a507c368f7fc0898076f64d8d) vous offre une solution durable qui alimente `this.refs.$$` comme les références par chaîne de caractères le faisaient. La simplicité de ce petit enrobage autour des références fonctionnelles aide aussi à illustrer pourquoi celles-ci sont maintenant le meilleur choix pour le futur.
Copy file name to clipboardexpand all lines: content/fr/guide/v8/unit-testing-with-enzyme.md
+2-2
Original file line number
Diff line number
Diff line change
@@ -17,7 +17,7 @@ React fournit un module `react-addons-test-utils` pour tester les composants, et
17
17
18
18
Nous avons besoin de deux modules :
19
19
20
-
-`preact-compat-enzyme`: pour fournir les propriétés internes de React aditionnelles
20
+
-`preact-compat-enzyme`: pour fournir les propriétés internes de React additionnelles
21
21
-`preact-test-utils`: pour fournir les parties de l'API de `react-addons-test-utils` utilisées par `enzyme`
22
22
23
23
```bash
@@ -48,7 +48,7 @@ Utilisant Karma comme test runner, nous allons devoir ajouter quelques [`alias w
48
48
## Limitations actuelles
49
49
50
50
1. Actuellement, seul le mode [`mount`](http://airbnb.io/enzyme/docs/api/mount.html) est supporté.
51
-
2. Vous aurez peut-être besoin d'enrober vos assertions dans un `setTimeout` lorsque vous appelerez les méthodes `setProps()` ou `setState()` du `React Wrapper`.
51
+
2. Vous aurez peut-être besoin d'enrober vos assertions dans un `setTimeout` lorsque vous appellerez les méthodes `setProps()` ou `setState()` du `React Wrapper`.
Copy file name to clipboardexpand all lines: content/fr/index.md
+1-1
Original file line number
Diff line number
Diff line change
@@ -105,7 +105,7 @@ function Counter() {
105
105
<div>
106
106
<h3>Productif instantanément</h3>
107
107
<p>
108
-
La légereté est plus amusante quand vous n'avez pas à sacrifier la productivité pour y arriver. Avec Preact vous serez productif en quelques instants. Vous aurez même droit aux fonctionnalités supplémentaires suivantes :
108
+
La légèreté est plus amusante quand vous n'avez pas à sacrifier la productivité pour y arriver. Avec Preact vous serez productif en quelques instants. Vous aurez même droit aux fonctionnalités supplémentaires suivantes :
109
109
</p>
110
110
<ul>
111
111
<li>Les `props`, `state` et `context` sont passés en arguments de la méthode `render()`</li>
0 commit comments