wip : French Translation

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

@@ -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';

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ées.
+
+
+---
+
+<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és, 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()
+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
+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 d'éléments spécifiés ci-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é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 que lorsqu'il y a plusieurs enfants que vous pouvez être certain que `children` sera une liste.
+
+Cependant, `toChildArray` retournant toujours une liste, cela vous facilitera la vie concernant leur prise en charge.
+
+```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 clonage superficiel d'un composant et d'en faire le rendu autre part.
+
+## createContext
+
+Voir dans la section [Documentation du contexte](/guide/v10/context#createcontext).
+
+## 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. Il permet à un composant de retourner plusieurs 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 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.
+
+---
+
+<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);
+```
+
+> 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 de classe
+
+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:
+
+```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 à 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é                 |
+|-----------------------------|--------------------------------------------------|
+| `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 leurs relations.
+
+#### componentDidCatch
+
+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 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
+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 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 où chaque élément intermédiaire aurait 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</>;
+```