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
3 changes: 2 additions & 1 deletion content/en/guide/v10/api-reference.md
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,8 @@ render(

## hydrate()

When you have a prerendered DOM, there is no need to re-render it again. With hydrate most of the diffing phase will be skipped with event listeners being the exception. It's mainly used in conjuncton with [Server-Side Rendering](/guide/v10/server-side-rendering).
If you have a prerendered DOM (because of [Server-Side-Rendering](/guide/v10/server-side-rendering) then there is no need to use `render` again. You can use `hydrate` which will skip the internal diffing algorithm and only attach event listeners if it finds any in `props`.”


```jsx
import { render } from 'preact';
Expand Down
22 changes: 11 additions & 11 deletions content/fr/guide/v10/api-reference.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ description: ‘Apprenez en plus à propos de toutes les fonctions exporté Prea

# Référence API

Cette page sert de rapide vue d’ensemble de toutes les fonctions exportés.
Cette page sert de rapide vue d’ensemble de toutes les fonctions exportées.


---
Expand Down Expand Up @@ -35,7 +35,7 @@ class MyComponent extends Component {
}
```

Pour en apprendre d’avantage à propos des `Components` et comment ils peuvent être utilisé, visitez la page [Components](guide/v10/components).
Pour en apprendre d’avantage à propos des `Components` et comment ils peuvent être utilisés, visitez la page [Components](guide/v10/components).

## render()

Expand Down Expand Up @@ -78,7 +78,7 @@ render(
```

## 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)).
Si vous avez un dom déjà rendu (par exemple parce que vous avez un rendu serveur, SSR [Server-Side Rendering](/guide/v10/server-side-rendering)), vous n'avez pas besoin de réappliquer un rendu avec `render` encore une fois. Vous pouvez utiliser `hydrate` qui sautera la phase de rendu et ne fera qu'attacher l'écoute d'événement (en anglais : EventHandlers) s'ils sont passé en paramètre avec `props`.


```jsx
Expand All @@ -98,7 +98,7 @@ Les arguments suivant sont collectés dans une liste de `children` (enfants), et

- Une valeur scalaire (chaine de caractère, nombres, booléen, null, undefined, etc...)
- D'autres éléments DOM virtuel
- Une infinité de chaine imbriqués des éléments d'au dessus
- Une infinité de chaine imbriqués d'éléments spécifiés ci-dessus

```js
import { h } from 'preact';
Expand All @@ -119,11 +119,11 @@ h(

## toChildArray

Cette fonction d'aide convertira toujours des enfants en liste. Si le paramètre est déjà une liste ceci ne fera rien. Cette fonction est nécéssaire parce que le paramètre `children` n'est pas garantis d'être une liste.
Cette fonction d'aide convertira toujours des enfants en liste. Si le paramètre est déjà une liste ceci ne fera rien. Cette fonction est nécessaire parce que le paramètre `children` ne garantit pas d'être une liste.

Si un élément ne contient qu'un seul enfant, celui-ci le recevra directement. Ce n'est seulement lorsqu'il y a d'avantage d'enfants que vous pouvez être sûr que vous recevrez une liste.
Si un élément ne contient qu'un seul enfant, celui-ci le recevra directement. Ce n'est seulement que lorsqu'il y a plusieurs enfants que vous pouvez être certain que `children` sera une liste.

Avec `toChildArray` vous pouvez vous assurer que ce sera toujours le cas.
Cependant, `toChildArray` retournant toujours une liste, cela vous facilitera la vie concernant leur prise en charge.

```jsx
import { toChildArray } from 'preact';
Expand All @@ -148,19 +148,19 @@ render((

## cloneElement

Cette fonction vous permet de faire un clone superficiel d'un composant et de faire le rendu du clone quelque part d'autre.
Cette fonction vous permet de faire un clonage superficiel d'un composant et d'en faire le rendu autre part.

## createContext

Voir dans la section [Documentation context](/guide/v10/context#createcontext).
Voir dans la section [Documentation du contexte](/guide/v10/context#createcontext).

## createRef

Voir dans la section [Documentation références](/guide/v10/refs#createref).
Voir dans la section [Documentation des références](/guide/v10/refs#createref).

## Fragment

Un type spécial de composant qui ne fait aucun rendu dans le DOM. Ils permettent à un composant de retourner multiple enfants sans avoir besoin de les emballer dans une balise div.
Un type spécial de composant qui ne fait aucun rendu dans le DOM. Il permet à un composant de retourner plusieurs enfants sans avoir besoin de les emballer dans une balise div.

```jsx
import { Fragment, render } from 'preact';
Expand Down
20 changes: 10 additions & 10 deletions content/fr/guide/v10/components.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ descriptions: 'Les composants sont le coeur des application Preact. Apprenez com

# Composant

Les composants (`Component`) représentent le bloque de construction de base de Preact. Il sont fondamentaux pour construire facilement des UI complexes à partir de petits blocs. Ils sont aussi responsables d'attacher l'état (`state`) à notre rendu de sorti.
Les composants (`Component`) représentent le bloc de construction de base de Preact. Il sont fondamentaux pour construire facilement des UI complexes. Ils sont aussi responsables d'attacher l'état (`state`) à notre rendu de sortie.

Il y a deux types de composants dans Preact, et nous allons les voir dans ce guide.

Expand All @@ -32,11 +32,11 @@ const App = <MyComponent name="John Doe" />;
render(App, document.body);
```

> Note, dans des versions antérieurs elles étaient connues comme des composants sans états mais ceci n'est plus vrai depuis les [`hooks-addon`](/guide/v10/hooks)
> NB : dans des versions antérieures elles étaient connues comme des composants sans état mais ceci n'est plus vrai depuis les [`Hooks`](/guide/v10/hooks)

## Composant class
## Composant de classe

Les composants class ont un état et des méthodes de cycle de vie. Les suivantes sont des méthodes spéciales qui seront appelés lorsque le composant est attaché au DOM ou lorsqu'il est détruit par exemple.
Les composants class ont un état et des méthodes de cycle de vie. Ces dernières sont des méthodes spéciales qui seront appelés lorsque le composant est attaché au DOM ou lorsqu'il est détruit, par exemple.

Ici, nous avons une simple classe composant appelé `<Clock>` qui affiche le temps actuel:

Expand Down Expand Up @@ -67,7 +67,7 @@ class Clock extends Component {

### Méthodes de cycle de vie

Afin de permettre à l'horloge de se mettre à jours toutes les secondes, nous avons besoin de savoir quand `<Clock>` est monté au DOM. _Si vous avez utilisé des éléments personnalisés HTML5, ceci est similaire aux méthodes de cycle de vie `attachedCallback` et `detachedCallback`._ Preact invoque ces méthodes en suivant le cycle suivant s'ils sont défini dans le composant:
Afin de permettre à l'horloge de se mettre à jour toutes les secondes, nous avons besoin de savoir quand `<Clock>` est monté au DOM. _Si vous avez utilisé des éléments personnalisés HTML5, ceci est similaire aux méthodes de cycle de vie `attachedCallback` et `detachedCallback`._ Preact invoque ces méthodes en suivant le cycle suivant s'ils sont défini dans le composant:

| Méthode de cycle de vie | Quand est ce qu'elle est appelé |
|-----------------------------|--------------------------------------------------|
Expand All @@ -81,13 +81,13 @@ Afin de permettre à l'horloge de se mettre à jours toutes les secondes, nous a
| `getSnapshotBeforeUpdate` | appelé avant `render()` |
| `componentDidUpdate` | appelé après `render()` |

> Voir [ce diagramme](https://twitter.com/dan_abramov/status/981712092611989509) pour avoir un visuel de leur relation entre eux même.
> Voir [ce diagramme](https://twitter.com/dan_abramov/status/981712092611989509) pour avoir un visuel de leurs relations.

#### componentDidCatch

Il y a une méthode qui a besoin d'une reconnaissance spécial et c'est `componentDidCatch`. Elle est special car elle permet de gérer des erreurs qui apparaissent pendant le rendu. Ceci inclus les erreurs qui apparaissent dans les fonctions attachés aux cycle de vie, mais exclus toute erreur géré de manière asynchrone (Comme après un appel `fetch()`).
Une de ces méthodes est particulière : `componentDidCatch`. Elle est spéciale car elle permet de gérer les erreurs qui apparaissent pendant le rendu. Ceci inclus les erreurs qui apparaissent dans les fonctions attachés aux cycle de vie, mais exclut toute erreur gérée de manière asynchrone (Comme après un appel `fetch()`).

Quand une erreur est appelé, nous pouvons utiliser cette méthode pour réagir à n'importe quel erreurs et afficher un jolie message d'erreur ou tout autre contenu de retrait.
Quand une erreur est lancée, nous pouvons utiliser cette méthode pour réagir à cette dernière, et afficher un joli message d'erreur ou tout autre contenu de retrait.


```jsx
Expand All @@ -109,7 +109,7 @@ class Catcher extends Component {

## Fragments

Un `Fragment` permet de retourner de multiples éléments à la fois. Ils résolvent une limitation du JSX qui demande que chaque "bloques (`block`)" ne doivent avoir qu'un seul élément racine (`root`). Vous les rencontrerez souvent en combination avec les listes, les tables ou le CSS Flexbox ou chaque éléments intermédiaires auraient autrement un style différent.
Un `Fragment` permet de retourner plusieurs éléments à la fois. Ils résolvent une limitation du JSX qui demande que chaque bloc ne doit avoir qu'un seul élément racine (`root`). Vous les rencontrerez souvent en combinaison avec les listes, les tables ou le CSS Flexbox chaque élément intermédiaire aurait autrement un style différent.

```jsx
import { Fragment, render } from 'preact';
Expand Down Expand Up @@ -148,4 +148,4 @@ Notez que les transpilateurs modernes vous permettent d'utiliser une syntaxe plu
const Foo = <Fragment>foo</Fragment>;
// ...is the same as this:
const Bar = <>foo</>;
```
```
16 changes: 8 additions & 8 deletions content/fr/guide/v10/context.md
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
---
name: Contexte
description: 'Le contexte vous permet de passer des paramètres (`props`) à travers des composants intermédiaires. Ce document décris comment la nouvelle et ancienne API fonctionnent.'
description: 'Le contexte vous permet de passer des paramètres (`props`) à travers des composants intermédiaires. Ce document décrit comment l'ancienne et la nouvelle API fonctionne.'
---

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


Il y a deux différents moyens d'utilise `context`: Via la nouvelle API `createContext` et l'ancienne API hérité. La différence entre les deux est que l'ancienne ne peut pas mettre à jour un enfant lorsqu'un élément parent interrompt le rendu en utilisant `shouldComponentUpdate`. C'est pourquoi il est très recommandé d'utiliser `createContext`.
Il y a deux différents moyens d'utiliser `context`: Via la nouvelle API `createContext` et l'ancienne API héritée. La différence entre les deux est que l'ancienne ne peut pas mettre à jour un enfant lorsqu'un élément parent interrompt le rendu en utilisant `shouldComponentUpdate`. C'est pourquoi il est très recommandé d'utiliser `createContext`.

---

Expand All @@ -17,7 +17,7 @@ Il y a deux différents moyens d'utilise `context`: Via la nouvelle API `createC

## createContext

En premier, nous avons besoin de créer un objet context que nous pouvons passer en paramètre. Ceci est fait via la fonction `createContext(initialValue)`, qui retourne un composant `Provider` qui est utilisé pour définir la valeur du contexte et un `Consumer` qui est responsable de récupérer la valeur du contexte.
En premier, nous avons besoin de créer un objet de contexte que nous puissions passer en paramètre. Ceci est fait via la fonction `createContext(initialValue)`, qui retourne un composant `Provider` (Publieur) qui est utilisé pour définir la valeur du contexte et un `Consumer` (Abonné) qui est responsable de récupérer la valeur du contexte.


```jsx
Expand All @@ -44,13 +44,13 @@ function App() {
}
```

> Une façon plus simple d'utiliser contexte est d'utiliser le "hook" [useContext](/guide/v10/hooks#context).
> Une façon plus simple d'utiliser un contexte est d'utiliser le "hook" [useContext](/guide/v10/hooks#context).

## L'API contexte hérité (dite "Legacy")
## L'API contexte héritée (dite "Legacy")

Nous incluons l'API hérité principalement pour des raison de compatibilités à rebours. Elle a été remplacé par l'API `createContext`. L'API hérité est connu pour avoir des problèmes comme le blocage de mise-à-jours s'il y a des composants intermédiaires qui retournent `false` à `shouldComponentUpdate`. Si vous souhaitez l'utiliser malgré tout, vous pouvez continuer à lire.
Nous incluons l'API héritée principalement à des fins de rétrocompatibilité. Elle a été remplacée par l'API `createContext`. L'API héritée est connue pour avoir des problèmes comme le blocage de mise-à-jours s'il y a des composants intermédiaires qui retournent `false` à `shouldComponentUpdate`. Si vous souhaitez l'utiliser malgré tout, vous pouvez continuer à lire.

Pour passer une variable personnalisé à travers le contexte, un composant a besoin d'avoir la méthode `getChildContext`. Vous pouvez y retourner les nouvelles valeurs que vous voulez stocker dans le contexte. Le contexte peut être accéder à travers comme second argument dans le cas d'une fonction, et `this.context` dans le cas d'un composant de class.
Pour passer une variable personnalisée à travers le contexte, un composant a besoin d'avoir la méthode `getChildContext`. Vous pouvez y retourner les nouvelles valeurs que vous voulez stocker dans le contexte. Le contexte peut être accédé à travers le second argument dans le cas d'une fonction, ou `this.context` dans le cas d'un composant de classe.

```jsx
function ThemedButton(props, context) {
Expand Down
Loading