wip : French Translation

content/en/guide/v10/debugging.md

@@ -146,7 +146,7 @@ const ref = createRef();
 
 ### Invalid event handler
 
-Sometimes you'll may accidentally pass a wrong value to an event handler. They must always be a `function` or `null` if you want to remove it. All other types are invalid.
+Sometimes you'll may accidentally pass a wrong value to an event handler. They must always be a `function`, or if you want to remove it `null`. All other types are invalid.
 
 ```jsx
 // valid

content/fr/guide/v10/api-reference.md

@@ -0,0 +1,181 @@
+---
+name: Référence API
+description: ‘Apprenez en plus à propos de toutes les fonctions exporté Preact’
+---
+
+# Référence API
+
+Cette page sert de rapide vue d’ensemble de toutes les fonctions exportés.
+
+
+---
+
+<toc></toc>
+
+---
+
+## Preact.Component
+
+`Component` est une classe de base dont vous allez généralement hériter afin de créer des composants Preact ayant leur propre état.
+
+### Component.render(props, state)
+
+Tous les composants doivent implémenter la fonction `render()`. Elle reçoit les propriétés et l'état du composant, et doit retourner un élément Preact ou null.
+
+```jsx
+import { Component } from 'preact';
+
+class MyComponent extends Component {
+	render(props, state) {
+		// props === this.props
+		// state === this.state
+
+		return <h1>Bonjour, {props.name}!</h1>;
+	}
+}
+```
+
+Pour en apprendre d’avantage à propos des `Components` et comment ils peuvent être utilisé, visitez la page [Components](guide/v10/components).
+
+## render()
+
+`render(component, containerNode, [replaceNode])`
+
+Change un composant Preact en élément DOM `containerNode`. Retourne une référence à l'élément DOM rendu.
+
+Si le paramètre optionnel `replaceNode` est fourni avec un élément DOM et que celui-ci est un enfant de `containerNode`, Preact fera une mise-à-jour et remplacera cet élément en utilisant son algorithme de différenciation.
+
+```js
+import { render } from 'preact';
+
+const Foo = () => <div>foo</div>;
+
+// DOM avant le rendu:
+// <div id="container"></div>
+render(<Foo />, document.getElementById('container'));
+// Après rendu:
+// <div id="container">
+//  <div>foo</div>
+// </div>
+
+// DOM avant rendu:
+// <div id="container">
+//   <div>bar</div>
+//   <div id="target"></div>
+// </div>
+render(
+  Foo,
+  document.getElementById('container'),
+  document.getElementById('target')
+);
+// Après rendu:
+// <div id="container">
+//   <div>bar</div>
+//   <div id="target">
+//     <div>foo</div>
+//   </div>
+// </div>
+```
+
+## 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)).
+
+
+```jsx
+import { render } from 'preact';
+
+const Foo = () => <div>foo</div>;
+hydrate(<Foo />, document.getElementById('container));
+```
+
+## h() / createElement()
+
+`h(nodeName, attributes, [...children])`
+
+Retourne un élément DOM virtuel Preact (en anglais : Preact Virtual DOM) avec les `attributes` donnés.
+
+Les arguments suivant sont collectés dans une liste de `children` (enfants), et peuvent être :
+
+- 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
+
+```js
+import { h } from 'preact';
+
+h('div', { id: 'foo' }, 'Bonjour!');
+// <div id="foo">Bonjour!</div>
+
+h('div', { id: 'foo' }, 'Bonjour', null, ['Preact!']);
+// <div id="foo">Bonjour Preact!</div>
+
+h(
+	'div',
+	{ id: 'foo' },
+	h('span', null, 'Bonjour!')
+);
+// <div id="foo"><span>Bonjour!</span></div>
+```
+
+## 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.
+
+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.
+
+Avec `toChildArray` vous pouvez vous assurer que ce sera toujours le cas.
+
+```jsx
+import { toChildArray } from 'preact';
+
+function Foo(props) {
+  const count = toChildArray(props.children).length;
+  return <div>I have {count} children</div>;
+}
+
+// children is not an array
+render(<Foo>bar</Foo>, container);
+
+// Children is an array
+render((
+  <Foo>
+    <p>A</p>
+    <p>B</p>
+  </Foo>,
+  container
+);
+```
+
+## cloneElement
+
+Cette fonction vous permet de faire un clone superficiel d'un composant et de faire le rendu du clone quelque part d'autre.
+
+## createContext
+
+Voir dans la section [Documentation context](/guide/v10/context#createcontext).
+
+## createRef
+
+Voir dans la section [Documentation 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.
+
+```jsx
+import { Fragment, render } from 'preact';
+
+render((
+  <Fragment>
+    <div>A</div>
+    <div>B</div>
+    <div>C</div>
+  </Fragment>
+), container);
+// Renders:
+// <div id="container>
+//   <div>A</div>
+//   <div>B</div>
+//   <div>C</div>
+// </div>
+```

content/fr/guide/v10/components.md

@@ -0,0 +1,151 @@
+---
+name: Composant `Components`
+descriptions: 'Les composants sont le coeur des application Preact. Apprenez comment vous en servir et composez des UI'
+
+---
+
+# 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.
+
+Il y a deux types de composants dans Preact, et nous allons les voir dans ce guide.
+
+---
+
+<toc></toc>
+
+---
+
+## Composant fonctionnel
+
+Les composants fonctionnels sont des simples fonctions qui reçoivent en paramètre `props` comme premier argument. Le nom de la fonction **doit** commencer avec une majuscule pour qu'elles soient reconnues avec JSX.
+
+```jsx
+function MyComponent(props) {
+  return <div>Mon nom est {props.name}.</div>;
+}
+
+// Usage
+const App = <MyComponent name="John Doe" />;
+
+// Renders: <div>Mon nom est John Doe.</div>
+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)
+
+## Composant class
+
+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.
+
+Ici, nous avons une simple classe composant appelé `<Clock>` qui affiche le temps actuel:
+
+```js
+class Clock extends Component {
+  state = { time: Date.now() }
+
+  // Cycle de vie: Appellé lorsque notre composant est crée
+  componentDidMount() {
+    // update time every second
+    this.timer = setInterval(() => {
+      this.setState({ time: Date.now() });
+    }, 1000);
+  }
+
+  // Cycle de vie: Appelé lorsque notre composant est détruit
+  componentWillUnmount() {
+    // s'arrête lorsqu'il n'est plus affichable
+    clearInterval(this.timer);
+  }
+
+  render() {
+    let time = new Date(this.state.time).toLocaleTimeString();
+    return <span>{time}</span>;
+  }
+}
+```
+
+### 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:
+
+| Méthode de cycle de vie     | Quand est ce qu'elle est appelé                 |
+|-----------------------------|--------------------------------------------------|
+| `componentWillMount`        | (obsolète) avant que le composant soit monté dans le DOM|
+| `componentDidMount`         | après que le composant soit monté dans le DOM    |
+| `componentWillUnmount`      | avant la suppression de l'élément du DOM         |
+| `componentWillReceiveProps` | (obsolète) avant que de nouveaux paramètres soient ajoutés |
+| `getDerivedStateFromProps`  | juste avant `shouldComponentUpdate`. À utiliser avec précaution. |
+| `shouldComponentUpdate`     | avant `render()`. Retourner `false` pour sauter le rendu |
+| `componentWillUpdate`       | (obsolète) appelé avant `render()`                                |
+| `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.
+
+#### 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()`).
+
+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.
+
+
+```jsx
+class Catcher extends Component {
+  state = { errored: false }
+
+  componentDidCatch(error) {
+    this.setState({ errored: true });
+  }
+
+  render(props, state) {
+    if (state.errored) {
+      return <p>Quelque chose s'est mal passé</p>;
+    }
+    return props.children;
+  }
+}
+```
+
+## 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.
+
+```jsx
+import { Fragment, render } from 'preact';
+
+function TodoItems() {
+  return (
+    <Fragment>
+      <li>A</li>
+      <li>B</li>
+      <li>C</li>
+    </Fragment>
+  )
+}
+
+const App = (
+  <ul>
+    <TodoItems />
+    <li>D</li>
+  </ul>
+);
+
+render(App, container);
+// Renders:
+// <ul>
+//   <li>A</li>
+//   <li>B</li>
+//   <li>C</li>
+//   <li>D</li>
+// </ul>
+```
+
+Notez que les transpilateurs modernes vous permettent d'utiliser une syntaxe plus courte pour `Fragments`. Ce raccourci est bien plus commun et sera celui que vous rencontrerez le plus souvent.
+
+```jsx
+// This:
+const Foo = <Fragment>foo</Fragment>;
+// ...is the same as this:
+const Bar = <>foo</>;
+```