-
-
Notifications
You must be signed in to change notification settings - Fork 509
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
wip : French Translation #396
base: master
Are you sure you want to change the base?
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Several grammatical and orthographical mistakes I corrected in suggested changes. I've also tried to normalize translations of technical words and features.
``` | ||
|
||
## hydrate() | ||
Lorsque vous utilisez un DOM pré-rendu, il n'y a pas besoin de faire en rendu encore une fois. Avec `hydrate`, la plupart de la phase de différenciation sera sauté à l'exception des écoute d'évènements. C'est principalement utilisé en conjonction avec le rendu coté serveur (en anglais SSR : [Server-Side Rendering](/guide/v10/server-side-rendering)). |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
J'aime pas le phrasé de ce paragraphe. "à l'exception des écoute d'évènemts" est techniquement correct, cependant la façon de l'écrire est un peu "bancale" si je puis dire.
Cela dit je n'ais pas de suggestions pour l'améliorer, donc ¯\_(ツ)_/¯
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Je vais y réfléchir, merci beaucoup !
--- | ||
|
||
# Contexte | ||
|
||
Le contexte vous permet de passer une valeur à travers les `props` à un enfant en bas de l'arbre sans avoir à passer à travers tous les composants qui se trouvent entre. Un cas d'utilisation très populaire par exemple est le thème. En quelques mots, le contexte permet de faire des mise à jours dans Preact dans un style publicateur / abonné. (terme originel : pub-sub) | ||
Le contexte vous permet de passer une valeur à travers les `props` à un enfant plus bas dans l'arbre sans avoir à passer à travers tous les composants qui se trouvent entre. Il permet par exemple de pouvoir gérer des thèmes personalisés. En quelques mots, le contexte permet de faire des mise à jour dans Preact dans un style publieur / abonné. (terme originel : pub-sub) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Le contexte vous permet de passer une valeur à travers les `props` à un enfant plus bas dans l'arbre sans avoir à passer à travers tous les composants qui se trouvent entre. Il permet par exemple de pouvoir gérer des thèmes personalisés. En quelques mots, le contexte permet de faire des mise à jour dans Preact dans un style publieur / abonné. (terme originel : pub-sub) | |
Le contexte vous permet de passer une valeur à travers les `props` à un enfant plus bas dans l'arbre sans avoir à passer à travers tous les composants qui se trouvent entre. Il permet par exemple de pouvoir gérer des thèmes personalisés. En quelques mots, le contexte permet de faire des mises à jour dans Preact dans un style publieur / abonné. (terme originel : pub-sub) |
Désolé, petite faute de frappe dans la suggestion ("mises à jour")
|
||
# Différences à React | ||
|
||
Preact en soit même n'est pas fait pour être une ré-implémentation de React. Il y a des différences, beaucoup d'entre elles sont triviales, peut être complètement supprimés en utilisant [preact/compat], qui est une fine couche au dessus de Preact afin de lui permettre d'avoir 100% de compatibilité avec React. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Preact en soit même n'est pas fait pour être une ré-implémentation de React. Il y a des différences, beaucoup d'entre elles sont triviales, peut être complètement supprimés en utilisant [preact/compat], qui est une fine couche au dessus de Preact afin de lui permettre d'avoir 100% de compatibilité avec React. | |
Preact en soit même n'est pas fait pour être une ré-implémentation de React. Il y a des différences, beaucoup d'entre elles triviales, qui peuvent être complètement supprimées en utilisant [preact/compat], qui est une fine couche au dessus de Preact afin de lui permettre d'avoir 100% de compatibilité avec React. |
|
||
Preact en soit même n'est pas fait pour être une ré-implémentation de React. Il y a des différences, beaucoup d'entre elles sont triviales, peut être complètement supprimés en utilisant [preact/compat], qui est une fine couche au dessus de Preact afin de lui permettre d'avoir 100% de compatibilité avec React. | ||
|
||
La raison pour laquelle Preact n'essaie pas d'inclure toutes les fonctionnalités de React est qu'elle est faite pour rester **petite** et **concentré** - autrement, cela aurait eu plus de sense de soumettre des optimisations au projet React, qui a déjà une architecture complexe et solide. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
La raison pour laquelle Preact n'essaie pas d'inclure toutes les fonctionnalités de React est qu'elle est faite pour rester **petite** et **concentré** - autrement, cela aurait eu plus de sense de soumettre des optimisations au projet React, qui a déjà une architecture complexe et solide. | |
La raison pour laquelle Preact n'essaie pas d'inclure toutes les fonctionnalités de React est qu'elle est faite pour rester **petite** et **concentrée** - autrement, cela aurait eu plus de sens de soumettre des optimisations au projet React, qui a déjà une architecture complexe et solide. |
|
||
## Principales différences | ||
|
||
La principal différence en comparant une application Preact et React est que nous ne livrons pas un système de gestion d'événement synthétique. Preact utilise la gestion d'événement native `addEventlistener` pour gêrer les évènements internes. Voir [Evénements Globaux] pour une liste complète des événements DOM. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
La principal différence en comparant une application Preact et React est que nous ne livrons pas un système de gestion d'événement synthétique. Preact utilise la gestion d'événement native `addEventlistener` pour gêrer les évènements internes. Voir [Evénements Globaux] pour une liste complète des événements DOM. | |
La principale différence en comparant une application Preact et React est que nous ne livrons pas un système de gestion d'événement synthétique. Preact utilise la gestion d'événement native `addEventListener` pour gêrer les évènements internes. Voir [Évènements Globaux] pour une liste complète des événements DOM. |
|
||
La principal différence en comparant une application Preact et React est que nous ne livrons pas un système de gestion d'événement synthétique. Preact utilise la gestion d'événement native `addEventlistener` pour gêrer les évènements internes. Voir [Evénements Globaux] pour une liste complète des événements DOM. | ||
|
||
Une gestion synthétique n'a pas de sense car le navigateur supporte toutes les fonctionnalités dont nous avons besoin. Une implémentation d'une gestion d'événement personnalisé augmenterait nos frais de développement et une surface d'API plus large. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Une gestion synthétique n'a pas de sense car le navigateur supporte toutes les fonctionnalités dont nous avons besoin. Une implémentation d'une gestion d'événement personnalisé augmenterait nos frais de développement et une surface d'API plus large. | |
Une gestion synthétique n'a pas de sens car le navigateur supporte toutes les fonctionnalités dont nous avons besoin. Implémenter une gestion d'événement personnalisée augmenterait nos frais de développement et aurait une surface d'API plus large. |
|
||
--- | ||
|
||
> **Note de bas de page:** Il est intéressant de noter que l'héritage peut vous verrouiller dans des relations fragiles "enfant-parent". Souvent lorsque nous faisons face à un problème qui peut être résolu avec un paradigme objet peut aussi l'être avec une façon plus fonctionnel sans avoir à créer ce genre de relation. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
> **Note de bas de page:** Il est intéressant de noter que l'héritage peut vous verrouiller dans des relations fragiles "enfant-parent". Souvent lorsque nous faisons face à un problème qui peut être résolu avec un paradigme objet peut aussi l'être avec une façon plus fonctionnel sans avoir à créer ce genre de relation. | |
> **Note de bas de page:** Il est intéressant de noter que l'héritage peut vous verrouiller dans des relations fragiles "enfant-parent". Souvent lorsque nous faisons face à un problème qui peut être résolu avec un paradigme objet, le problème peut aussi l'être d'une manière plus fonctionnelle sans avoir à créer ce genre de relation. |
} | ||
``` | ||
|
||
... ou pour le raccourcie: |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
... ou pour le raccourcie: | |
... ou en raccourci: |
} | ||
``` | ||
|
||
Avec ce hook sur le cycle de vie, et en disant à Preact de ne pas refaire un rendu sur le composant quand des changements se font dans l'arbre VDOM (DOM virtuel), votre composant a maintenant une référence à son élément DOM racine qui peut être considéré comme static jusqu'à ce que le composant est retiré du DOM (unmounted). Comme tous les composants cette référence s'appelle tout simplement `this.base`, et correspond à la racine de l'élément JSX qui a été retourné par `render()`. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Avec ce hook sur le cycle de vie, et en disant à Preact de ne pas refaire un rendu sur le composant quand des changements se font dans l'arbre VDOM (DOM virtuel), votre composant a maintenant une référence à son élément DOM racine qui peut être considéré comme static jusqu'à ce que le composant est retiré du DOM (unmounted). Comme tous les composants cette référence s'appelle tout simplement `this.base`, et correspond à la racine de l'élément JSX qui a été retourné par `render()`. | |
Avec ce hook sur le cycle de vie, et en disant à Preact de ne pas refaire un rendu sur le composant quand des changements se font dans l'arbre VDOM (DOM virtuel), votre composant maintenant une référence à son élément DOM racine qui peut être considéré comme statique jusqu'à ce que le composant est retiré du DOM (unmounted). Comme tous les composants cette référence s'appelle tout simplement `this.base`, et correspond à la racine de l'élément JSX qui a été retourné par `render()`. |
[**Voir cette démo sur Webpackbin**](https://www.webpackbin.com/bins/-KflCmJ5bvKsRF8WDkzb) | ||
|
||
|
||
## Exemples dans la vie réel |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
## Exemples dans la vie réel | |
## Exemples dans la vie réelle |
|
||
## Exemples dans la vie réel | ||
|
||
Alternativement, vous pouvez voir cette technique en action sur [preact-token-input](https://github.com/developit/preact-token-input/blob/master/src/index.js) - ceci utilise un composant comme une attache au DOM, mais désactive ensuite les mises-à-jours et permet [tags-input](https://github.com/developit/tags-input) re reprendre la main. Un exemple plus complexe peut être [preact-richtextarea](https://github.com/developit/preact-richtextarea), qui utilise cette technique afin d'éviter de re-générer un rendu sur une `<iframe>` |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Alternativement, vous pouvez voir cette technique en action sur [preact-token-input](https://github.com/developit/preact-token-input/blob/master/src/index.js) - ceci utilise un composant comme une attache au DOM, mais désactive ensuite les mises-à-jours et permet [tags-input](https://github.com/developit/tags-input) re reprendre la main. Un exemple plus complexe peut être [preact-richtextarea](https://github.com/developit/preact-richtextarea), qui utilise cette technique afin d'éviter de re-générer un rendu sur une `<iframe>` | |
Alternativement, vous pouvez voir cette technique en action sur [preact-token-input](https://github.com/developit/preact-token-input/blob/master/src/index.js) - ceci utilise un composant comme une attache au DOM, mais désactive ensuite les mises-à-jours et permet [tags-input](https://github.com/developit/tags-input) de reprendre la main. Un exemple plus complexe peut être [preact-richtextarea](https://github.com/developit/preact-richtextarea), qui utilise cette technique afin d'éviter de ré-générer un rendu sur un `<iframe>` |
Size report for the changes in this PR: size-plugin-ssr Overall size: 174 kB
commit: c3655b8 |
Size report for the changes in this PR: size-plugin-browser Overall size: 328 kB
commit: c3655b8 |
Method :
I however made exceptions of internals like
Component
where I did not translate the word and putted it in between ` to specify it is a technical vocabulary.