diff --git a/content/fr/guide/v8/differences-to-react.md b/content/fr/guide/v8/differences-to-react.md index 82b383a8a..bd228b437 100755 --- a/content/fr/guide/v8/differences-to-react.md +++ b/content/fr/guide/v8/differences-to-react.md @@ -17,7 +17,7 @@ La raison pour laquelle Preact n'essaye pas d'inclure chaque fonctionnalité de ## Compatibilité de version -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. +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. > 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. @@ -55,7 +55,7 @@ En fait, Preact ajoute quelques fonctionnalités pratiques inspirées par le tra - La validation des [PropType] : Tout le monde n'utilise pas les PropTypes, donc ils ne font pas partie du coeur de Preact. - _**Les PropTypes sont totalement supportés** dans [preact-compat], ou vous pouvez les utiliser manuellement._ -- [Children]: Pas nécéssaire dans Preact, parce que `props.children est _toujours un Array_. +- [Children]: Pas nécessaire dans Preact, parce que `props.children est _toujours un Array_. - _`React.Children` est totalement supporté dans [preact-compat]._ - Événements synthétiques : Les navigateurs supportés par Preact n'ont pas besoin de cet ajout. - _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._ diff --git a/content/fr/guide/v8/extending-component.md b/content/fr/guide/v8/extending-component.md index 07ac38a0c..a00523b05 100644 --- a/content/fr/guide/v8/extending-component.md +++ b/content/fr/guide/v8/extending-component.md @@ -5,7 +5,7 @@ permalink: '/guide/extending-component' # Étendre le composant de base -Il est possible que certains projets souhaitent étendre `Component` avec des fonctionnalités additionelles. +Il est possible que certains projets souhaitent étendre `Component` avec des fonctionnalités additionnelles. 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. @@ -62,4 +62,4 @@ class MixedComponent extends Component { --- -> **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. +> **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. diff --git a/content/fr/guide/v8/forms.md b/content/fr/guide/v8/forms.md index 19bab773c..57d7eefef 100755 --- a/content/fr/guide/v8/forms.md +++ b/content/fr/guide/v8/forms.md @@ -15,11 +15,11 @@ Dans Preact, les formulaires fonctionnent globalement de la même façon que dan --- -## Composants Controllés et Non Controllés +## Composants Contrôlés et Non Contrôlés -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. +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. -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. +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. ## Checkboxes & boutons Radios diff --git a/content/fr/guide/v8/getting-started.md b/content/fr/guide/v8/getting-started.md index 3336ba13a..38d2837d6 100755 --- a/content/fr/guide/v8/getting-started.md +++ b/content/fr/guide/v8/getting-started.md @@ -108,11 +108,11 @@ Rendre hyperscript avec un DOM virtuel est inutile, cependant. Nous voulons rend ## Composants -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. +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. -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. +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. -Jettons un oeil à un composant `Clock` très simple, qui affiche l'heure courante. +Jetons un œil à un composant `Clock` très simple, qui affiche l'heure courante. ```js import { h, render, Component } from 'preact'; diff --git a/content/fr/guide/v8/linked-state.md b/content/fr/guide/v8/linked-state.md index 37632ed29..c988c0820 100755 --- a/content/fr/guide/v8/linked-state.md +++ b/content/fr/guide/v8/linked-state.md @@ -62,7 +62,7 @@ Par défaut, `linkState()` essayera d'extraire la bonne valeur à partir d'un é 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. -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. +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. ```js // ce gestionnaire renvoyé par linkState : @@ -79,7 +79,7 @@ handler = event => { ### Illustration: boutons radio groupés -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 : +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 : ```js import linkState from 'linkstate'; diff --git a/content/fr/guide/v8/progressive-web-apps.md b/content/fr/guide/v8/progressive-web-apps.md index cb4ecbf4d..d03bac4c4 100644 --- a/content/fr/guide/v8/progressive-web-apps.md +++ b/content/fr/guide/v8/progressive-web-apps.md @@ -20,7 +20,7 @@ Preact est un excellent choix pour les [Progressive Web Apps](https://web.dev/le

Moins de script chargé

-

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.

+

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.

  • @@ -40,7 +40,7 @@ Preact est un excellent choix pour les [Progressive Web Apps](https://web.dev/le
    -

    Un bloc de construction qui fonctionne merveilleusement avec l'ecosystème React

    +

    Un bloc de construction qui fonctionne merveilleusement avec l’écosystème React

    Que vous ayez besoin d'utiliser le rendu côté serveur de React pour afficher quelque chose à l'écran rapidement, ou d'utiliser React Router pour la navigation, Preact fonctionne bien avec de nombreuses bibliothèques de l'écosystème.

    @@ -53,7 +53,7 @@ En fait, le site sur lequel vous vous trouvez actuellement est une Progressive W ![A DevTools Timeline trace of the preactjs.com site on a Nexus 5X](/pwa-guide/timeline.jpg) -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. +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. ## Astuces de performances @@ -96,7 +96,7 @@ En plus d'être une solution qui fonctionne bien pour votre PWA, Preact peut aus ## Preact CLI -[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. +[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. Voici quelques choses fournies par Preact CLI : diff --git a/content/fr/guide/v8/switching-to-preact.md b/content/fr/guide/v8/switching-to-preact.md index 238f2717e..5e30e25b6 100755 --- a/content/fr/guide/v8/switching-to-preact.md +++ b/content/fr/guide/v8/switching-to-preact.md @@ -29,12 +29,12 @@ Premièrement, vous devez installer preact et preact-compat (ce sont deux packag npm i -S preact preact-compat ``` -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. +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. ### Comment créer un alias preact-compat -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`. +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`. #### Aliasing avec Webpack @@ -204,7 +204,7 @@ Alternativement, vous pouvez automatiquement convertir vos appels à `createClas Une autre différence qu'il convient de noter est que Preact ne support que les références fonctionnelles par défaut. 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. -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. +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. ### 4. Simplify Root Render diff --git a/content/fr/guide/v8/unit-testing-with-enzyme.md b/content/fr/guide/v8/unit-testing-with-enzyme.md index 0aa13cb6b..b414363ff 100644 --- a/content/fr/guide/v8/unit-testing-with-enzyme.md +++ b/content/fr/guide/v8/unit-testing-with-enzyme.md @@ -17,7 +17,7 @@ React fournit un module `react-addons-test-utils` pour tester les composants, et Nous avons besoin de deux modules : -- `preact-compat-enzyme`: pour fournir les propriétés internes de React aditionnelles +- `preact-compat-enzyme`: pour fournir les propriétés internes de React additionnelles - `preact-test-utils`: pour fournir les parties de l'API de `react-addons-test-utils` utilisées par `enzyme` ```bash @@ -48,7 +48,7 @@ Utilisant Karma comme test runner, nous allons devoir ajouter quelques [`alias w ## Limitations actuelles 1. Actuellement, seul le mode [`mount`](http://airbnb.io/enzyme/docs/api/mount.html) est supporté. -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`. +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`. ## Exemple diff --git a/content/fr/index.md b/content/fr/index.md index 900eee0bc..e5d511614 100755 --- a/content/fr/index.md +++ b/content/fr/index.md @@ -105,7 +105,7 @@ function Counter() {

    Productif instantanément

    - 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 : + 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 :