Skip to content
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

Open
wants to merge 10 commits into
base: master
Choose a base branch
from
Open

wip : French Translation #396

wants to merge 10 commits into from

Conversation

krzepah
Copy link

@krzepah krzepah commented Aug 13, 2019

Method :

  • Sometimes, technical words such as SSR were fully translated and given the original name in parenthesis, eg : SSR becomes "rendu coté serveur (en anglais SSR : Server-Side Rendering),
    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.

@krzepah krzepah reopened this Aug 13, 2019
Copy link

@SolarLiner SolarLiner left a 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.

content/fr/guide/v10/api-reference.md Outdated Show resolved Hide resolved
content/fr/guide/v10/api-reference.md Outdated Show resolved Hide resolved
```

## 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)).

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 ¯\_(ツ)_/¯

Copy link
Author

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 !

content/fr/guide/v10/api-reference.md Outdated Show resolved Hide resolved
content/fr/guide/v10/api-reference.md Outdated Show resolved Hide resolved
content/fr/guide/v10/debugging.md Outdated Show resolved Hide resolved
content/fr/guide/v10/debugging.md Outdated Show resolved Hide resolved
content/fr/guide/v10/debugging.md Outdated Show resolved Hide resolved
content/fr/guide/v10/debugging.md Outdated Show resolved Hide resolved
content/fr/guide/v10/debugging.md Outdated Show resolved Hide resolved
---

# 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)

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
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.

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
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.

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
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.

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
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.

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
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.

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
> **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:

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
... 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()`.

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
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

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
## 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>`

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
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 -générer un rendu sur un `<iframe>`

@size-plugin
Copy link
Contributor

size-plugin bot commented Sep 8, 2019

Size report for the changes in this PR:

size-plugin-ssr Overall size: 174 kB

 markdown.e0970.worker.js ⏤  8.61 kB
    prism.28075.worker.js ⏤  6.24 kB
    editor.chunk.*****.js ⏤  65.9 kB
     emoji.chunk.*****.js ⏤  8.83 kB
    runner.chunk.*****.js ⏤  5.86 kB
            ssr-bundle.js ⏤  27.6 kB
     repl.e198e.worker.js ⏤  36.9 kB
   editor.chunk.7a736.css ⏤  3.17 kB
     ssr-bundle.06710.css ⏤  10.9 kB

commit: c3655b8

@size-plugin
Copy link
Contributor

size-plugin bot commented Sep 8, 2019

Size report for the changes in this PR:

size-plugin-browser Overall size: 328 kB

                 sw-esm.js ⏤  682 B
                     sw.js ⏤  678 B
  markdown.bc303.worker.js ⏤  8.68 kB
     prism.18eb5.worker.js ⏤  6.26 kB
  emoji.chunk.91398.esm.js ⏤  8.85 kB
    polyfills.6a525.esm.js ⏤  2.13 kB
  markdown.8ff2c.worker.js ⏤  8.68 kB
      emoji.chunk.1ed91.js ⏤  8.85 kB
        polyfills.3233a.js ⏤  2.12 kB
      repl.0b7a0.worker.js ⏤  34.9 kB
    editor.chunk.7a736.css ⏤  2.15 kB
 editor.chunk.fa6b3.esm.js ⏤  66.3 kB
 runner.chunk.a92f8.esm.js ⏤  5.79 kB
         5.chunk.bc319.css ⏤  1.47 kB
      5.chunk.95a73.esm.js ⏤  3.39 kB
      repl.3f385.worker.js ⏤  36.4 kB
     editor.chunk.e0251.js ⏤  66.4 kB
     runner.chunk.2df13.js ⏤  5.83 kB
          5.chunk.b2018.js ⏤  3.45 kB
          bundle.c6f3d.css ⏤  9.11 kB
       bundle.01f9a.esm.js ⏤  22.9 kB
           bundle.1e481.js ⏤  23.2 kB

commit: c3655b8

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants