From e3dbcb9f456d431f631d6e5a4a84d7a5dffccfe1 Mon Sep 17 00:00:00 2001
From: Patrick Borowy <patrick@krzepah.net>
Date: Tue, 13 Aug 2019 11:51:02 +0200
Subject: [PATCH 01/10] i18n("api-reference", "french")

---
 content/fr/guide/v10/api-reference.md | 181 ++++++++++++++++++++++++++
 1 file changed, 181 insertions(+)
 create mode 100644 content/fr/guide/v10/api-reference.md

diff --git a/content/fr/guide/v10/api-reference.md b/content/fr/guide/v10/api-reference.md
new file mode 100644
index 000000000..c1264241d
--- /dev/null
+++ b/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>
+```

From 1b85ef398e17629ba640db3ac3ccf8f5aea8220a Mon Sep 17 00:00:00 2001
From: Patrick Borowy <patrick@krzepah.net>
Date: Tue, 13 Aug 2019 12:27:08 +0200
Subject: [PATCH 02/10] i18n("components", "french")

---
 content/fr/guide/v10/components.md | 151 +++++++++++++++++++++++++++++
 1 file changed, 151 insertions(+)
 create mode 100755 content/fr/guide/v10/components.md

diff --git a/content/fr/guide/v10/components.md b/content/fr/guide/v10/components.md
new file mode 100755
index 000000000..45f98f12d
--- /dev/null
+++ b/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 `Components`
+
+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 `Functional Components`
+
+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</>;
+```
\ No newline at end of file

From 22f0705d6c7689176bc2e05b3ebeaad37d9f5058 Mon Sep 17 00:00:00 2001
From: Patrick Borowy <patrick@krzepah.net>
Date: Tue, 13 Aug 2019 18:23:34 +0200
Subject: [PATCH 03/10] i18n("context", "french")

---
 content/fr/guide/v10/context.md | 81 +++++++++++++++++++++++++++++++++
 1 file changed, 81 insertions(+)
 create mode 100644 content/fr/guide/v10/context.md

diff --git a/content/fr/guide/v10/context.md b/content/fr/guide/v10/context.md
new file mode 100644
index 000000000..370921927
--- /dev/null
+++ b/content/fr/guide/v10/context.md
@@ -0,0 +1,81 @@
+---
+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.'
+---
+
+# 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)
+
+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`.
+
+---
+
+<toc></toc>
+
+---
+
+## 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.
+
+
+```jsx
+const Theme = createContext('light');
+
+function ThemedButton(props) {
+  return (
+    <Theme.Consumer>
+      {theme => {
+        return <button {...props} class={'btn ' + theme}>Bouton à thème</button>;
+      }}
+    </Theme.Consumer>
+  );
+}
+
+function App() {
+  return (
+    <Theme.Provider value="dark">
+      <SomeComponent>
+        <ThemedButton />
+      </SomeComponent>
+    <Theme.Provider />
+  );
+}
+```
+
+> Une façon plus simple d'utiliser contexte est d'utiliser le "hook" [useContext](/guide/v10/hooks#context).
+
+## L'API contexte hérité (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.
+
+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.
+
+```jsx
+function ThemedButton(props, context) {
+  return (
+    <button {...props} class={'btn ' + context.theme}>
+      Themed Button
+    </button>;
+  );
+}
+
+class App extends Component {
+  getChildContext() {
+    return {
+      theme: 'light'
+    }
+  }
+
+  render() {
+    return (
+      <div>
+        <SomeOtherComponent>
+          <ThemedButton />
+        </SomeOtherComponent>
+      </div>
+    );
+  }
+}
+```

From 5c025f6f4b3b83f81cfd208a1810675cb1488bb0 Mon Sep 17 00:00:00 2001
From: Patrick Borowy <patrick@krzepah.net>
Date: Wed, 14 Aug 2019 15:38:03 +0200
Subject: [PATCH 04/10] i18n("french", "debugging.md") ; +
 guide.english.debugger.Invalideventhandler phrasing

---
 content/en/guide/v10/debugging.md |   2 +-
 content/fr/guide/v10/debugging.md | 213 ++++++++++++++++++++++++++++++
 2 files changed, 214 insertions(+), 1 deletion(-)
 create mode 100644 content/fr/guide/v10/debugging.md

diff --git a/content/en/guide/v10/debugging.md b/content/en/guide/v10/debugging.md
index a3e4d2608..8171f71bb 100644
--- a/content/en/guide/v10/debugging.md
+++ b/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
diff --git a/content/fr/guide/v10/debugging.md b/content/fr/guide/v10/debugging.md
new file mode 100644
index 000000000..305f216db
--- /dev/null
+++ b/content/fr/guide/v10/debugging.md
@@ -0,0 +1,213 @@
+---
+name: Debugger une application Preact
+description: 'Comment debugger une application Preact quand quelque chose ne va pas.'
+---
+
+# Debugger une application Preact
+
+Preact livre de nombreux outils pour permettre un déboggage plus simple. Ils sont empaquetés dans un seul `import` et peuvent êtres inclus en important `preact/debug`.
+
+Ceux-ci incluent un pont vers l'excellente extension pour Chrome ou Firefox, [Outil développement React]. Si vous l'avez déjà d'installé vous pouvez **l'essayer sur ce site**. Vous n'avez qu'a ouvrir la console de développement et inspecter comment nous l'avons construit.
+
+Nous afficherons un message de sommation ou une erreur lorsque nous rencontrerons un problème comme d'incorrecte nidification (en anglais nesting) des éléments `<table>`.
+
+
+---
+
+<toc></toc>
+
+---
+
+## Installation
+L'[Outil de développement React] peut être installé dans la page d'extensions de votre navigateur
+
+
+- [Pour Chrome](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi)
+- [Pour Firefox](https://addons.mozilla.org/en-US/firefox/addon/react-devtools/)
+
+Une fois installé, nous avons besoin d'import `preact/debug` quelque part pour initialiser la connexion à l'extension. Soyez certain que cette import **est le premier** import de toute votre application.
+
+> `preact-cli` inclue le paquet `preact/debug/` automatiquement. Vous pouvez sauter la prochaine étape en toute sécurité si vous l'utilisez.
+
+Voila un exemple d'entrée principal de votre application.
+
+```jsx
+// Doit être le premier import
+import "preact/debug";
+import { render } from 'preact';
+import App from './components/App';
+
+render(<App />, document.getElementById('root'));
+```
+
+### Supprimer les outils de développement de la production
+
+La plupart des "bundlers" vous permettent de supprimer du code lorsqu'ils détectent qu'une instruction `if` ne sera jamais rencontré. Vous pouvez utiliser ceci pour n'inclue `preact/debug` que pendant votre développement et sauvegarder quelques bytes précieux dans votre application final.
+
+```js
+// Doit être le premier import
+if (process.env.NODE_ENV==='development') {
+  // Ici nous devons utiliser require puisque les instructions
+  // "import" ne sont autorisé qu'en haut d'un fichier.
+  require("preact/debug");
+}
+
+import { render } from 'preact';
+import App from './components/App';
+
+render(<App />, document.getElementById('root'));
+```
+
+Soyez certain d'attribuer la variable d'environnement `NODE_ENV` à la valeur correct dans votre outil de "bundling".
+
+Debugger des sommations et des erreurs
+
+De temps en temps vous pourrez rencontrer une sommation (warning) ou une erreur (error) lorsque Preact détectera du code invalide. Elles doivent être corrigé pour permettre à l'application de fonctionner correctement.
+
+### `undefined` parent passed to `render()`
+
+Cela veut dire que le code essaie de faire un rendu de votre application dans le néant au lieu d'un élément DOM. C'est la différence entre :
+
+```jsx
+// What Preact received
+render(<App />, undefined);
+
+// vs what it expected
+render(<App />, actualDomNode);
+```
+La raison principal pour laquelle cette erreur apparait est que votre élément DOM n'est pas présent lorsque la fonction `render()` est appelée. Soyez certain qu'il existe. 
+
+### `undefined` component passed to `createElement()`
+
+Preact lancera une erreur lorsque vous passerez `undefined` au lieu d'un composant. Une cause commune a cette erreur est une confusion avec les exports de type `default` et `named`.
+
+```jsx
+// app.js
+export default function App() {
+  return <div>Bonjour monde !</div>;
+}
+
+// index.js: Faux, car `app.js` n'a pas d'export nommé
+import { App } from './app';
+render(<App />, dom);
+```
+
+La même erreur sera lancé lorsque ce sera l'inverse. Lorsque vous déclarez un export nommé (`named` export) et que vous essayez d'utiliser l'export `default`. Une façon rapide de vérifier cela (dans le cas où votre éditeur ne le fait pas déjà), est de simplement logger l'import.
+
+```js
+// app.js
+export function App() {
+  return <div>Bonjour monde !</div>;
+}
+
+// index.js
+import App from './app';
+
+console.log(App);
+// Logs: { default: [Function] } Au lieu d'un composant
+```
+
+### Passed a JSX literal as JSX twice
+
+Passer un literal-JSX ou un composant dans du JSX à nouveau est invalide et déclenchera cette erreur.
+
+```jsx
+const Foo = <div>foo</div>;
+// Invalide: Foo contient déjà un élément-JSX
+render(<Foo />, dom);
+```
+Pour corriger cela, nous pouvons juste passer la variable directement:
+
+```jsx
+const Foo = <div>foo</div>;
+render(Foo, dom);
+```
+
+### Improper nesting of table detected
+
+HTML a une direction très claire sur la manière dont les tables devraient être structurés. Ne pas respecter ce format amènera à des erreurs de rendus qui peuvent être difficile à débogguer. Dans Preact, nous détectons et affichons ces erreurs. Pour en apprendre d'avantage sur comment ces tables devraient être structurés nous vous recommandons vivement la [documentation MDN](https://developer.mozilla.org/en-US/docs/Learn/HTML/Tables/Basics)
+
+### Invalid `ref`-property
+
+Lorsque la propriété `ref` contient quelque chose de non attendu, nous lancerons cette erreur. Ceci inclus les `refs` à base de chaine de caractère (`string-based refs`) qui peuvent avoir été déprécié il y a un moment.
+
+```jsx
+// valide
+<div ref={e => {/* ... */)}} />
+
+// valide
+const ref = createRef();
+<div ref={ref} />
+
+// Invalide
+<div ref="ref" />
+```
+
+### Invalid event handler
+
+De temps en temps vous pourriez accidentellement passer une valeur incorrect à un handler. Elles doivent toujours être une fonction (`function`) ou si vous souhaitez l'enlever, `null`. Tous les autres types sont invalides.
+
+
+```jsx
+// valid
+<div onClick={() => console.log("click")} />
+
+// invalid
+<div onClick={console.log("click")} />
+```
+
+### Hook can only be invoked from render methods
+
+Cette erreur survient lorsque vous essayez d'utiliser un `hook` en dehors d'un composant. Ceux-ci ne sont supportés qu'à l'intérieur d'un composant.
+
+```jsx
+// Invalide, doit être utilisé à l'intérieur d'un composant
+const [value, setValue] = useState(0);
+
+// valide
+function Foo() {
+  const [value, setValue] = useState(0);
+  return <button onClick={() => setValue(value + 1)}>{value}</div>;
+}
+```
+
+### Getting `vnode.[property]` is deprecated
+
+Avec Preact X nous il y a certains changement majeurs qui entrainent une rupture de compatibilité avec la précédente version de Preact dans la façon dont nous gérons la structure interne `vnode`.
+
+| Preact 8.x | Preact 10.x |
+|---|---|
+| `vnode.nodeName` | `vnode.type` |
+| `vnode.attributes` | `vnode.props` |
+| `vnode.children` | `vnode.props.children`|
+
+### Found children with the same key
+
+Un aspect unique à propos des librairies basés sur un DOM virtuel est qu'elles ont une chance de détecter lorsqu'un noeud a été bougé. Cependant, pour savoir exactement quel noeud est lequel, nous avons besoin de les identifier. _Ceci n'est nécéssaire que lorsque nous créons des éléments dynamiquement._
+
+
+```jsx
+// Les deux enfants auront la même clé "A"
+<div>
+  {['A', 'A'].map(char => <p key={char}>{char}</p>)}
+</div>
+```
+
+La façon correct de faire cela est de leur donner des clés uniques. Dans la plupart des cas, la donnée sur lequel vous itérez aura une forme d'`id`.
+
+
+```jsx
+const persons = [
+  { name: 'John', age: 22 },
+  { name: 'Sarah', age: 24}
+];
+
+// Quelque part dans votre composant
+<div>
+  {persons.map(({ name, age }) => {
+    return <p key={name}>{name}, Age: {age}</p>;
+  })}
+</div>
+```
+
+[Outil de développement React]: https://github.com/facebook/react-devtools

From c4574566b0095f7b0e726ff9fd0083fbb493a5a1 Mon Sep 17 00:00:00 2001
From: Patrick Borowy <patrick@krzepah.net>
Date: Wed, 14 Aug 2019 15:40:42 +0200
Subject: [PATCH 05/10] removed double translated title

---
 content/fr/guide/v10/components.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)
 mode change 100755 => 100644 content/fr/guide/v10/components.md

diff --git a/content/fr/guide/v10/components.md b/content/fr/guide/v10/components.md
old mode 100755
new mode 100644
index 45f98f12d..62c29abaf
--- a/content/fr/guide/v10/components.md
+++ b/content/fr/guide/v10/components.md
@@ -4,7 +4,7 @@ descriptions: 'Les composants sont le coeur des application Preact. Apprenez com
 
 ---
 
-# Composant `Components`
+# 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.
 
@@ -16,7 +16,7 @@ Il y a deux types de composants dans Preact, et nous allons les voir dans ce gui
 
 ---
 
-## Composant fonctionnel `Functional Components`
+## 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.
 

From 092e690ebf7a81d23c29b310464e9f4fba4d3d87 Mon Sep 17 00:00:00 2001
From: Patrick Borowy <patrick@krzepah.net>
Date: Sat, 17 Aug 2019 13:19:44 +0200
Subject: [PATCH 06/10] Review, typo & wording

Co-Authored-By: Nathan Graule <solarliner@gmail.com>
---
 content/fr/guide/v10/api-reference.md | 20 +++++------
 content/fr/guide/v10/components.md    | 20 +++++------
 content/fr/guide/v10/context.md       | 16 ++++-----
 content/fr/guide/v10/debugging.md     | 52 +++++++++++++--------------
 4 files changed, 54 insertions(+), 54 deletions(-)

diff --git a/content/fr/guide/v10/api-reference.md b/content/fr/guide/v10/api-reference.md
index c1264241d..22bb88082 100644
--- a/content/fr/guide/v10/api-reference.md
+++ b/content/fr/guide/v10/api-reference.md
@@ -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.
 
 
 ---
@@ -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()
 
@@ -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';
@@ -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';
@@ -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';
diff --git a/content/fr/guide/v10/components.md b/content/fr/guide/v10/components.md
index 62c29abaf..b44c0f1a6 100644
--- a/content/fr/guide/v10/components.md
+++ b/content/fr/guide/v10/components.md
@@ -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.
 
@@ -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:
 
@@ -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é                 |
 |-----------------------------|--------------------------------------------------|
@@ -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
@@ -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 où chaque élément intermédiaire aurait autrement un style différent.
 
 ```jsx
 import { Fragment, render } from 'preact';
@@ -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</>;
-```
\ No newline at end of file
+```
diff --git a/content/fr/guide/v10/context.md b/content/fr/guide/v10/context.md
index 370921927..1122c1916 100644
--- a/content/fr/guide/v10/context.md
+++ b/content/fr/guide/v10/context.md
@@ -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)
 
-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`.
 
 ---
 
@@ -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
@@ -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) {
diff --git a/content/fr/guide/v10/debugging.md b/content/fr/guide/v10/debugging.md
index 305f216db..4638541c7 100644
--- a/content/fr/guide/v10/debugging.md
+++ b/content/fr/guide/v10/debugging.md
@@ -1,15 +1,15 @@
 ---
-name: Debugger une application Preact
-description: 'Comment debugger une application Preact quand quelque chose ne va pas.'
+name: Débogage d'une application Preact
+description: 'Comment déboguer une application Preact quand quelque chose ne va pas.'
 ---
 
-# Debugger une application Preact
+# Déboguer une application Preact
 
-Preact livre de nombreux outils pour permettre un déboggage plus simple. Ils sont empaquetés dans un seul `import` et peuvent êtres inclus en important `preact/debug`.
+Preact livre de nombreux outils pour permettre un débogage plus simple. Ils sont empaquetés dans un seul `import` et peuvent êtres inclus en important `preact/debug`.
 
-Ceux-ci incluent un pont vers l'excellente extension pour Chrome ou Firefox, [Outil développement React]. Si vous l'avez déjà d'installé vous pouvez **l'essayer sur ce site**. Vous n'avez qu'a ouvrir la console de développement et inspecter comment nous l'avons construit.
+Ceux-ci incluent un pont vers l'excellente extension pour Chrome ou Firefox, [Outil développement React]. Si vous l'avez déjà installée vous pouvez **l'essayer sur ce site**. Vous n'avez qu'à ouvrir la console de développement et inspecter comment nous l'avons construit.
 
-Nous afficherons un message de sommation ou une erreur lorsque nous rencontrerons un problème comme d'incorrecte nidification (en anglais nesting) des éléments `<table>`.
+Nous afficherons un message d'avertissement ou une erreur lorsque nous rencontrerons un problème comme un embriquement incorrect (en anglais nesting) des éléments `<table>`.
 
 
 ---
@@ -25,11 +25,11 @@ L'[Outil de développement React] peut être installé dans la page d'extensions
 - [Pour Chrome](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi)
 - [Pour Firefox](https://addons.mozilla.org/en-US/firefox/addon/react-devtools/)
 
-Une fois installé, nous avons besoin d'import `preact/debug` quelque part pour initialiser la connexion à l'extension. Soyez certain que cette import **est le premier** import de toute votre application.
+Une fois installé, nous avons besoin d'importer `preact/debug` quelque part pour initialiser la connexion à l'extension. Faites un sorte que cette import **est le premier** de toute votre application.
 
 > `preact-cli` inclue le paquet `preact/debug/` automatiquement. Vous pouvez sauter la prochaine étape en toute sécurité si vous l'utilisez.
 
-Voila un exemple d'entrée principal de votre application.
+Voici un exemple d'entrée principale d'application.
 
 ```jsx
 // Doit être le premier import
@@ -40,9 +40,9 @@ import App from './components/App';
 render(<App />, document.getElementById('root'));
 ```
 
-### Supprimer les outils de développement de la production
+### Supprimer les outils de développement en production
 
-La plupart des "bundlers" vous permettent de supprimer du code lorsqu'ils détectent qu'une instruction `if` ne sera jamais rencontré. Vous pouvez utiliser ceci pour n'inclue `preact/debug` que pendant votre développement et sauvegarder quelques bytes précieux dans votre application final.
+La plupart des "bundlers" vous permettent de supprimer du code lorsqu'ils détectent qu'une instruction `if` ne sera jamais rencontrée, vous pouvez utiliser ceci pour n'inclure `preact/debug` que pendant votre développement et sauvegarder quelques précieux octets dans votre application finale.
 
 ```js
 // Doit être le premier import
@@ -58,24 +58,24 @@ import App from './components/App';
 render(<App />, document.getElementById('root'));
 ```
 
-Soyez certain d'attribuer la variable d'environnement `NODE_ENV` à la valeur correct dans votre outil de "bundling".
+Soyez certain d'attribuer la variable d'environnement `NODE_ENV` à la valeur correcte dans votre outil de "bundling".
 
-Debugger des sommations et des erreurs
+Déboguer les avertissements et des erreurs
 
-De temps en temps vous pourrez rencontrer une sommation (warning) ou une erreur (error) lorsque Preact détectera du code invalide. Elles doivent être corrigé pour permettre à l'application de fonctionner correctement.
+De temps en temps vous pourrez rencontrer un avertissement (warning) ou une erreur (error) lorsque Preact détectera du code invalide. Elles doivent être corrigé pour permettre à l'application de fonctionner correctement.
 
 ### `undefined` parent passed to `render()`
 
-Cela veut dire que le code essaie de faire un rendu de votre application dans le néant au lieu d'un élément DOM. C'est la différence entre :
+Cela veut dire que le code essaie de faire un rendu de votre application dans le vide, au lieu d'un élément DOM. C'est la différence entre :
 
 ```jsx
-// What Preact received
+// Ce qu'à reçu Preact
 render(<App />, undefined);
 
-// vs what it expected
+// vs. ce à quoi il s'attendait
 render(<App />, actualDomNode);
 ```
-La raison principal pour laquelle cette erreur apparait est que votre élément DOM n'est pas présent lorsque la fonction `render()` est appelée. Soyez certain qu'il existe. 
+La raison principale pour laquelle cette erreur apparaît est que votre élément DOM n'est pas présent lorsque la fonction `render()` est appelée. Soyez certain qu'il existe. 
 
 ### `undefined` component passed to `createElement()`
 
@@ -92,7 +92,7 @@ import { App } from './app';
 render(<App />, dom);
 ```
 
-La même erreur sera lancé lorsque ce sera l'inverse. Lorsque vous déclarez un export nommé (`named` export) et que vous essayez d'utiliser l'export `default`. Une façon rapide de vérifier cela (dans le cas où votre éditeur ne le fait pas déjà), est de simplement logger l'import.
+La même erreur sera lancée lorsque çe sera l'inverse, par exemple lorsque vous déclarez un export nommé (`named` export) et que vous essayez d'utiliser l'export `default`. Une façon rapide de vérifier cela (dans le cas où votre éditeur ne le fait pas déjà), est de simplement faire usage de `console.log` afin d'en connaître la valeur.
 
 ```js
 // app.js
@@ -109,11 +109,11 @@ console.log(App);
 
 ### Passed a JSX literal as JSX twice
 
-Passer un literal-JSX ou un composant dans du JSX à nouveau est invalide et déclenchera cette erreur.
+Passer une constante JSX ou un composant dans du JSX à nouveau est invalide et déclenchera cette erreur.
 
 ```jsx
 const Foo = <div>foo</div>;
-// Invalide: Foo contient déjà un élément-JSX
+// Invalide: Foo contient déjà une constante JSX
 render(<Foo />, dom);
 ```
 Pour corriger cela, nous pouvons juste passer la variable directement:
@@ -125,11 +125,11 @@ render(Foo, dom);
 
 ### Improper nesting of table detected
 
-HTML a une direction très claire sur la manière dont les tables devraient être structurés. Ne pas respecter ce format amènera à des erreurs de rendus qui peuvent être difficile à débogguer. Dans Preact, nous détectons et affichons ces erreurs. Pour en apprendre d'avantage sur comment ces tables devraient être structurés nous vous recommandons vivement la [documentation MDN](https://developer.mozilla.org/en-US/docs/Learn/HTML/Tables/Basics)
+HTML a une direction très claire sur la manière dont les tables devraient être structurées. Ne pas respecter ce format amènera à des erreurs de rendu qui peuvent être difficile à déboguer. Dans Preact, nous détectons et affichons ces erreurs. Pour en apprendre d'avantage sur la structure correcte des tables, nous vous recommandons vivement la [documentation MDN](https://developer.mozilla.org/fr/docs/Apprendre/HTML/Tableaux/Basics)
 
 ### Invalid `ref`-property
 
-Lorsque la propriété `ref` contient quelque chose de non attendu, nous lancerons cette erreur. Ceci inclus les `refs` à base de chaine de caractère (`string-based refs`) qui peuvent avoir été déprécié il y a un moment.
+Lorsque la propriété `ref` contient quelque chose de non attendu, nous lancerons cette erreur. Ceci inclut les `refs` à base de chaîne de caractères (`string-based refs`) qui ont été déprécié par le passé.
 
 ```jsx
 // valide
@@ -145,7 +145,7 @@ const ref = createRef();
 
 ### Invalid event handler
 
-De temps en temps vous pourriez accidentellement passer une valeur incorrect à un handler. Elles doivent toujours être une fonction (`function`) ou si vous souhaitez l'enlever, `null`. Tous les autres types sont invalides.
+De temps en temps vous pourriez accidentellement passer une valeur incorrecte à un handler. Elles doivent toujours être une fonction, ou, si vous souhaitez l'enlever, `null`. Tous les autres types sont invalides.
 
 
 ```jsx
@@ -173,7 +173,7 @@ function Foo() {
 
 ### Getting `vnode.[property]` is deprecated
 
-Avec Preact X nous il y a certains changement majeurs qui entrainent une rupture de compatibilité avec la précédente version de Preact dans la façon dont nous gérons la structure interne `vnode`.
+Avec Preact X, certains changement majeurs entraînent une rupture de compatibilité avec la précédente version de Preact dans la façon dont nous gérons la structure interne `vnode`.
 
 | Preact 8.x | Preact 10.x |
 |---|---|
@@ -183,7 +183,7 @@ Avec Preact X nous il y a certains changement majeurs qui entrainent une rupture
 
 ### Found children with the same key
 
-Un aspect unique à propos des librairies basés sur un DOM virtuel est qu'elles ont une chance de détecter lorsqu'un noeud a été bougé. Cependant, pour savoir exactement quel noeud est lequel, nous avons besoin de les identifier. _Ceci n'est nécéssaire que lorsque nous créons des éléments dynamiquement._
+Un aspect unique des librairies basés sur un DOM virtuel est qu'elles ont une chance de détecter lorsqu'un nœud a été bougé. Cependant, pour savoir exactement quel nœud est lequel, nous avons besoin de les identifier. _Ceci n'est nécessaire que lorsque nous créons des éléments dynamiquement._
 
 
 ```jsx
@@ -193,7 +193,7 @@ Un aspect unique à propos des librairies basés sur un DOM virtuel est qu'elles
 </div>
 ```
 
-La façon correct de faire cela est de leur donner des clés uniques. Dans la plupart des cas, la donnée sur lequel vous itérez aura une forme d'`id`.
+La bonne façon de gérer cela est de leur donner des clés uniques. Dans la plupart des cas, la donnée sur laquelle vous itérez aura une forme d'`id`.
 
 
 ```jsx

From d8ec11a0cb1c5df627e794920bbf1bd0930ce5c1 Mon Sep 17 00:00:00 2001
From: Patrick Borowy <patrick@krzepah.net>
Date: Sat, 17 Aug 2019 15:09:47 +0200
Subject: [PATCH 07/10] i18n("french", "differences-to-react")

---
 content/fr/guide/v10/differences-to-react.md | 150 +++++++++++++++++++
 1 file changed, 150 insertions(+)
 create mode 100644 content/fr/guide/v10/differences-to-react.md

diff --git a/content/fr/guide/v10/differences-to-react.md b/content/fr/guide/v10/differences-to-react.md
new file mode 100644
index 000000000..2a82f686d
--- /dev/null
+++ b/content/fr/guide/v10/differences-to-react.md
@@ -0,0 +1,150 @@
+---
+name: Différences avec React
+permalink: '/guide/differences-to-react'
+description: 'Différences détaillées entre Preact et React'
+---
+
+# 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.
+
+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.
+
+---
+
+<toc></toc>
+
+---
+
+## 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.
+
+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.
+
+L'autre principal différence est que nous suivons d'un peu plus prêt les spécifications DOM. Un exemple est que nous permettons d'utiliser `class` au lieu de `className`.
+
+
+## Compatibilité de Versions
+
+Pour Preact et [preact/compat], la compatibilité de version est mesuré avec la version majeure _actuel_ et _précédente_ de React. Quand de nouvelles fonctionnalités sont annoncés par l'équipe de React, elles pourraient être ajouté à Preact si cela a du sens avec les [objectifs du projet]. Ceci est un processus démocratique, constamment évoluant à travers les discussions et les décisions faite ouvertement, utilisant des tickets (issues) et des propositions de modification (pull-requests).
+
+> Ainsi, le site et la documentation utilisent React `0.16.x` et `15.` lorsque l'on parle de compatibilité et de comparaisons.
+
+
+## Fonctionnalités unique à Preact
+
+Preact a décidé d'ajouter quelques fonctionnalités pratique inspirés par le travail de la communauté (P)React.
+
+### Arguments dans `Component.render()`
+
+Nous passons `this.props` et `this.state` d'une classe composant à `render()`. vous pouvez voir que ce composant utilise un seul paramètre (`prop`) et une seul propriété d'état (`state property`).
+
+```jsx
+// Fonctionne à la fois avec Preact et React
+class Foo extends Component {
+  state = { age: 1 };
+
+  render() {
+    return <div>Name: {this.props.name}, Age: {this.state.age}</div>;
+  }
+}
+```
+En Preact, ceci peut aussi être écrit comme ceci:
+
+```jsx
+// Fonctionne seulement en Preact
+class Foo extends Component {
+  state = { age: 1 };
+
+  render({ name }, { age }) {
+    return <div>Name: {name}, Age: {age}</div>;
+  }
+}
+```
+Les deux extraits vont faire exactement le même rendu. Ce n'est qu'une question de préférence stylistique.
+
+### attributs HTML brut / noms des propriétés
+Avec Preact nous suivons d'un peu plus prêt les spécifications DOM. Une principale différence est que nous permettons d'utiliser `class` au lieu de `className`.
+
+```jsx
+// This:
+<div class="foo" />
+
+// ...est le même que:
+<div className="foo" />
+```
+La plupart des développeurs Preact préfèrent d'utiliser une `class` parce que c'est plus court à écrire mais les deux sont supportés.
+
+### Utiliser `onInput` au lieu de `onChange`
+
+Pour des raisons historique, React a simplement lié (aliased) `onChange` à `onInput`. La dernière est celle utilisé par le DOM et est supporté partout. L'événement `input` est celui principalement celui qui est utilisé dans tous les cas où vous souhaitez être notifié lorsque l'élément de contrôle de formulaire (`input`, `textarea`, `checkbox`, etc...) est mis-à-jour.
+
+
+```jsx
+// React
+<input onChange={e => console.log(e.target.value)} />
+
+// Preact
+<input onInput={e => console.log(e.target.value)} />
+```
+Si vous utilisez [preact/compat] nous mettrons en place cet alias 'onChange' à `onInput` globalement de manière similaire à React. Ceci est une des astuces que nous utilisons pour nous assurer d'une compatibilité avec l'écosystème de React.
+
+### JSX-Constructor
+Cette idée était originellement appellé [hyperscript] et a de la valeur bien au dela de l'écosystème React, alors Preact promu le standard originel. ([Lire : pourquoi `h()`?]((http://jasonformat.com/wtf-is-jsx)). Si vous regardez la sortie transpilé, ce sera plus simple à lire que `React.createElement`.
+
+```js
+h(
+  'a',
+  { href:'/' },
+  h('span', null, 'Home')
+);
+
+// vs
+React.createElement(
+  'a',
+  { href:'/' },
+  React.createElement('span', null, 'Home')
+);
+```
+Dans la plupart des applications Preact vous rencontrerez `h()`, mais nous supportons les deux, alors peut importe celui que vous utiliserez.
+
+### Pas besoin de contextTypes
+
+L'API hérité `Context` a besoin que les `Component` implémente `contextTypes` ou `childContextTypes` dans react. Avec Preact nous n'avons pas cette limitation et tous les composants reçoivent toutes les entrées `context` récupérés dans `getChildContext()`.
+
+## Fonctionnalités exclusives à `preact/compat`
+
+`preact/compat` est notre couche de **compat**ibilité qui traduit du code React en Preact. Pour des utilisateurs de React existant il est très simple d'utiliser Preact en mêttant en place quelques alias dans leur fichier de configuration et laisser le reste du code tel qu'il est.
+
+### Children-API
+
+L'API `children` est spécialisé dans une façon d'itérer les `children` d'un composant. Pour Preact cette API n'est pas nécéssaire et nous recommandons d'utiliser une chaine native à la place.
+
+```jsx
+// React
+function App(props) {
+  return <div>{Children.count(props.children)}</div>
+}
+
+// Preact: Convert children to an array and use standard array methods.
+function App(props) {
+  return <div>{toChildArray(props.children).length}</div>
+}
+```
+
+### Composants spécialisés
+
+[preact/compat] livre une version spécialisé des composants qui ne sont pas fait pour toutes les applications. Ceci inclus:
+
+- `PureComponent`: Ne se met à jour que si un `props` ou un `state` a changé
+- `memo`: Similaire à `PureComponent` mais permet de passer une fonction de comparaison.
+- `forwardRef`: Livre une référence (`ref`) à un enfant spécifique d'un composant.
+- `Portals`: Continue le rendu dans un container DOM différent.
+- `Suspense`: **experimental** Permet de définir un affichage temporaire pendant que le rendu n'est pas fini.
+- `lazy`: **experimental** "Lazy load" du code asynchrone et marque l'arbre comme étant prêt ou pas en fonction.
+
+[objectifs du projet]: /about/project-goals
+[hyperscript]: https://github.com/dominictarr/hyperscript
+[preact/compat]: #features-exclusive-to-preactcompat
+[Evénements Globaux]: https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers
\ No newline at end of file

From 9b8e632a14c782f09d131e7fface89a906b6c6b2 Mon Sep 17 00:00:00 2001
From: Patrick Borowy <patrick@krzepah.net>
Date: Sat, 17 Aug 2019 15:30:50 +0200
Subject: [PATCH 08/10] i18n("french", "extending-component")

---
 content/fr/guide/v10/extending-component.md | 66 +++++++++++++++++++++
 1 file changed, 66 insertions(+)
 create mode 100644 content/fr/guide/v10/extending-component.md

diff --git a/content/fr/guide/v10/extending-component.md b/content/fr/guide/v10/extending-component.md
new file mode 100644
index 000000000..1cc564933
--- /dev/null
+++ b/content/fr/guide/v10/extending-component.md
@@ -0,0 +1,66 @@
+---
+name: Extending Component
+permalink: '/guide/extending-component'
+---
+
+# Étendre un Composant
+
+Il est possible que certain projets souhaitent étendre les fonctionnalités de base d'un Composant.
+
+Il y a de différentes opinions sur la valeur ajouté de l'héritage en Javascript, mais si vous souhaitez créer vos propres "base class" desquels tous vous composants héritent, Preact vous permet de le faire.
+
+Peut être que vous voulez une connection automatique avec des stores/reducers dans une architecture "Flux". Peut être que vous souhaitez ajouter des mixins basés sur des propriétés pour avoir quelque chose qui ressemble plus à `React.createClass()` _(note: le [décorateur `@bind`](https://github.com/developit/decko#bind) est préférable_)
+
+Dans tous les cas, juste utiliser un héritage de class ES2015 pour étendre une class Composant Preact :
+
+```js
+class BoundComponent extends Component {
+    // example: récupère les méthodes liés
+    binds() {
+        let list = this.bind || [],
+            binds = this._binds;
+        if (!binds) {
+            binds = this._binds = {};
+            for (let i=list.length; i--; ) {
+                binds[list[i]] = this[list[i]].bind(this);
+            }
+        }
+        return binds;
+    }
+}
+```
+
+Example Usage:
+
+```js
+class Link extends BoundComponent {
+    bind = ['click'];
+    click() {
+        open(this.props.href);
+    }
+    render({ children }) {
+        let { click } = this.binds();
+        return <span onClick={ click }>{ children }</span>;
+    }
+}
+
+render(
+    <Link href="http://example.com">Click Me</Link>,
+    document.body
+);
+```
+
+Les possibilités sont infinis. Il y a un class `Component` étendu qui supporte les mixins rudimentaires:
+
+```js
+class MixedComponent extends Component {
+    constructor() {
+        super();
+        (this.mixins || []).forEach( m => Object.assign(this, m) );
+    }
+}
+```
+
+---
+
+> **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.

From 33a004f01ec6dffe49456b69968e22163ac21ca7 Mon Sep 17 00:00:00 2001
From: Patrick Borowy <patrick@krzepah.net>
Date: Sun, 18 Aug 2019 10:28:30 +0200
Subject: [PATCH 09/10] i18n("french", "external-dom-mutations") ; rephrasing
 hydrate

---
 content/en/guide/v10/api-reference.md         |  3 +-
 content/fr/guide/v10/api-reference.md         |  2 +-
 .../fr/guide/v10/external-dom-mutations.md    | 84 +++++++++++++++++++
 3 files changed, 87 insertions(+), 2 deletions(-)
 create mode 100644 content/fr/guide/v10/external-dom-mutations.md

diff --git a/content/en/guide/v10/api-reference.md b/content/en/guide/v10/api-reference.md
index c98309836..77fa1fd64 100644
--- a/content/en/guide/v10/api-reference.md
+++ b/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';
diff --git a/content/fr/guide/v10/api-reference.md b/content/fr/guide/v10/api-reference.md
index 22bb88082..4d63e4929 100644
--- a/content/fr/guide/v10/api-reference.md
+++ b/content/fr/guide/v10/api-reference.md
@@ -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
diff --git a/content/fr/guide/v10/external-dom-mutations.md b/content/fr/guide/v10/external-dom-mutations.md
new file mode 100644
index 000000000..6ef18170e
--- /dev/null
+++ b/content/fr/guide/v10/external-dom-mutations.md
@@ -0,0 +1,84 @@
+---
+name: Mutations DOM externes
+permalink: '/guide/external-dom-mutations'
+description: "Comment intégrer Peact avec jQuery et d'autres extraits JavaScript qui mutent le DOM directement"
+---
+
+# Mutation DOM externe
+
+Parfois on a besoin de travailler avec une librairie qui a besoin de manipuler librement le DOM, sauvegarder des états en celui-ci, ou qui n'a aucune limite de composant. Il y a beaucoup de très bon outils réutilisables qui fonctionnent de cette manière.
+
+En Preact (et de manière similaire, en React), travailler avec ce type de libraire demande à ce que vous disiez à l'algorithme de changement du DOM virtuel qu'il ne devrait pas essayer de _défaire_ les changements DOM externes fait à l'intérieur d'un composant (`Component`) ou l'élément DOM qu'il représente.
+
+---
+
+<toc></toc>
+
+---
+
+## Technique
+
+Ceci peut être aussi simple que définir une méthode `shouldComponentUpdate()` sur votre composant, et lui faire retourner `false`:
+
+```js
+class Block extends Component {
+  shouldComponentUpdate() {
+    return false;
+  }
+}
+```
+
+... ou pour le raccourcie:
+
+```js
+class Block extends Component {
+  shouldComponentUpdate = () => false;
+}
+```
+
+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()`.
+
+---
+
+## Exemple pas à pas
+
+Ceci est est un exemple de comment on peut "éteindre" la re-génération du rendu d'un composant. Notez que `render()` est toujours invoqué dans la procédure où l'on crée et charge le composant afin de générer sa structure DOM initiale.
+
+```js
+class Example extends Component {
+  shouldComponentUpdate() {
+    // Ne re-fait pas le rendu via l'algorithme de différenciation (`diff`)
+    return false;
+  }
+
+  componentWillReceiveProps(nextProps) {
+    // Vous pouvez faire quelque chose avec les paramètres entrant ici
+  }
+
+  componentDidMount() {
+    // maintenant qu'il est chargé, vous pouvez modifier le DOM librement
+    let thing = document.createElement('maybe-a-custom-element');
+    this.base.appendChild(thing);
+  }
+
+  componentWillUnmount() {
+    // le composant est sur le point d'être supprimé du DOM, faites un nettoyage.
+  }
+
+  render() {
+    return <div class="example" />;
+  }
+}
+```
+
+
+## Démonstration
+
+[![demo](https://i.gyazo.com/a63622edbeefb2e86d6c0d9c8d66e582.gif)](http://www.webpackbin.com/V1hyNQbpe)
+
+[**Voir cette démo sur Webpackbin**](https://www.webpackbin.com/bins/-KflCmJ5bvKsRF8WDkzb)
+
+
+## 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>`

From c3655b8688a119158fd2e4698828e373997423f3 Mon Sep 17 00:00:00 2001
From: Patrick Borowy <patrick@krzepah.net>
Date: Sun, 8 Sep 2019 04:26:17 +0200
Subject: [PATCH 10/10] i18n(french, [forms, getting-started, hooks])

---
 content/fr/guide/v10/forms.md           | 127 ++++++++++
 content/fr/guide/v10/getting-started.md | 172 +++++++++++++
 content/fr/guide/v10/hooks.md           | 315 ++++++++++++++++++++++++
 3 files changed, 614 insertions(+)
 create mode 100644 content/fr/guide/v10/forms.md
 create mode 100644 content/fr/guide/v10/getting-started.md
 create mode 100644 content/fr/guide/v10/hooks.md

diff --git a/content/fr/guide/v10/forms.md b/content/fr/guide/v10/forms.md
new file mode 100644
index 000000000..d6655759d
--- /dev/null
+++ b/content/fr/guide/v10/forms.md
@@ -0,0 +1,127 @@
+---
+name: Formulaires
+description: 'Comment créer un formulaire avec Preact qui fonctionnera partout'
+---
+
+# Formulaires
+
+Les formulaires dans Preact fonctionnent presque de la même manière qu'en HTML. Vous faites le rendu d'un controleur d'entrée et vous attachez une écoute d'événement (`event listener`) à celui-ci.
+
+La principal différence est que dans la plupart des cas, la `value` n'est pas controlé par le noeud DOM, mais par Preact.
+
+---
+
+<toc></toc>
+
+---
+
+## Composants controllés et non controllés
+
+(`Controlled & Uncontrolled Components`) Lorsque l'on parle de control d'un formulaire nous rencontrerons souvent les termes "Composant controllé" (`Controlled Component`) et "Composant non controllé" (`Uncontrolled Component`). Ces descriptions font référence à la manière dont le flux de donnée est géré. Le DOM a un flux bidirectionel parce que chaque control qu'il effectura gérera l'entrée de l'utilisateur lui même. Une simple entrée de texte mettera toujours à jour sa valeur lorsque l'utilisateur aura écrit dedans.
+
+En contraste, un framework comme Preact a généralement un flux unidirectionnel. Le composant ne gère pas la valeur en soit même, mais quelque chose plus haut dans l'arbre des composants.
+
+```jsx
+// Non controlé, parceque Preact n'attribue pas la valeur
+<input onInput={myEventHandler} />;
+
+// Controlé, parceque Preact attribue la valeur
+<input value={someValue} onInput={myEventHandler} />;
+```
+
+Généralement, vous devriez tout le temps essayer d'utiliser des composants _controllés_. Cependant, lorsque vous contruisez des composants autonome ou lorsque vous enrombez une librairie externe, cela peut toujours être util de simplement utiliser votre composant comme point d'entré pour une fonctionnalité non Preact. Dans ces cas, les composants non controllés sont bien adapté pour cette tache.
+
+> note : définir la valeur comme `undefined` ou `null` renderont le composant non controllé
+
+## Créer un simple formulaire
+
+Créons un simple formulaire pour soumettre une entrée dans une liste de notes. Pour cela, nous créons un élément `<form>` et nous l'attachons à une gestion d'événement qui sera appelé lorsque le formulaire sera soumis. Nous faisons quelque chose de similaire qu'avec l'entrée de texte, mais nous sauvergardons les valeur dans la class elle même par nous même. Vous l'avez deviné, nous utilisons ici une entrée _controllé_. Dans cet exemple c'est très util car nous voulons afficher la valeur dans un autre élément.
+
+```jsx
+class TodoForm extends Component {
+  state = { value: '' };
+
+  onSubmit = e => {
+    alert("Submitted a todo");
+    e.preventDefault();
+  }
+
+  onInput = e => {
+    const { value } = e.target;
+    this.setState({ value })
+  }
+
+  render(_, { value }) {
+    return (
+      <form onSubmit={this.onSubmit}>
+        <input type="text" value={value} onInput={this.onInput} />
+        <p>You typed this value: {value}<p>
+        <button type="submit">Submit</button>
+      </form>
+    );
+  }
+}
+```
+
+## Select Input
+
+Un Element `<select>` est un peu plus impliqué, mais fonctionne d'une manière similaire à la validation de formulaire:
+
+```jsx
+class MySelect extends Component {
+  state = { value: '' };
+
+  onInput = e => {
+    this.setState({ value: e.target.value });
+  }
+
+  onSubmit = e => {
+    alert("Submitted something");
+    e.preventDefault();
+  }
+
+  render(_, { value }) {
+    return (
+      <form onSubmit={this.onSubmit}>
+        <select value={value} onInput={this.onInput}>
+          <option value="A">A</option>
+          <option value="B">B</option>
+          <option value="C">C</option>
+        </select>
+        <button type="submit">Submit</button>
+      </form>
+    );
+  }
+}
+```
+
+## Cases à cocher & cases d'options
+
+Les cases à cocher ou d'option (`<input type="checkbox|radio">`) peuvent initiallement être cause de confusion lorsque l'on crée des formulaires controlés. C'est parce que dans un environement non controllé, nous permetterions au navigateur de cocher une case pour nous, éouter sur des changements d'événements et réagir à la nouvelle valeur. Cependant, cette technique ne fait pas une bonne transition dans un monde ou ce composant change en fonction des changement d'état (`state`) et de paramètres (`props`).
+
+> **Procédure:** Disons que nous souhaiterions écouter les changement d'une case à cocher qui serait activé par l'utilisateur. Dans notre gestion d'événement `input`, nous définissons un état (`state`) à la nouvelle valeur recu par la checkbox. Ceci déclanchera un rendu de notre composant, qui ré-assignera la valeur de la case à cocher à la valeur stocké dans l'état. C'est inutile car nous avons justement demandé au DOM une valeur et ensuite nous lui demandons de refaire un rendu avec la valeur reçu.
+
+Alors, à la place d'écouter un événement `input` nous devrions plutôt écouter un événement `click`, qui sera lancé chaque fois que l'utilisateur cliquera sur la case à coché ou _un label associé_. Une case à cocher ne bascule qu'entre un Booleen `true` et `false`, alors nous nous ne ferons qu'inverser la valeur que nous avons dans l'état et nous déclanchant un rendu, et affichant la case à cocher que nous voulons.
+
+### Exemple de case à cocher
+
+```js
+class MyForm extends Component {
+  toggle = e => {
+      let checked = !this.state.checked;
+      this.setState({ checked });
+  };
+
+  render(_, { checked }) {
+    return (
+      <label>
+        <input
+          type="checkbox"
+          checked={checked}
+          onClick={this.toggle}
+        />
+      </label>
+    );
+  }
+}
+```
diff --git a/content/fr/guide/v10/getting-started.md b/content/fr/guide/v10/getting-started.md
new file mode 100644
index 000000000..30b930303
--- /dev/null
+++ b/content/fr/guide/v10/getting-started.md
@@ -0,0 +1,172 @@
+---
+name: Premiers pas
+description: "Premiers pas avec Preact. Nous apprendrons comment mettre en place des outils (si nécessaire) et commencerons à écrire une application."
+---
+
+# Premiers pas
+
+Ce simple guide vous aide à commencer a développer des applications Preact. Il y a 3 moyens populaires de le faire.
+
+Si vous commencez juste nous vous recommandons de commencer avec [preact-cli](#best-practices-powered-with-preact-cli).
+
+---
+
+<toc></toc>
+
+---
+
+## Sans aucun outil de construction
+
+Preact a toujours été livré avec une solution prête à être utilisé dans le navigateur. Ce qui ne nécessite aucun outil de construction (build tools).
+
+```js
+import { h, Component, render } from 'https://unpkg.com/preact';
+
+// Créez votre application
+const app = h('div', null, 'Hello World!');
+
+// Injectez votre application dans l'élément avec l'id `app`.
+// Faites en sorte que l'élément soit présent dans le dom ;)
+render(app, document.getElementById('app'));
+```
+
+La seul différence est que vous ne pouvez pas utiliser JSX parce que JSX a besoin d'être transpilé. Nous avons une alternative dans la prochaine section.
+
+### Alternatives à JSX
+
+Écrire une application avec un `h` brut ou un appel `createElement` est bien moins amusant que d'écrire du JSX. JSX à l'avantage de ressembler à du HTML, qui rend la compréhension plus simple pour beaucoup de développeurs. Cela en revanche nécessite une étape pré-construite, alors nous vous recommandons vivement une alternative appelé [htm].
+
+En un mot, [htm] peut être décrit comme: Une syntaxe JSX en plein Javascript sans avoir besoin de transpiler. Au lieu d'utiliser une syntaxe personnalisé, cela repose sur les littéraux de gabarits (tagged template strings) natif à javascript qui ont été ajouté à Javascript il y a un moment.
+
+
+```js
+import { h, Component, render } from 'https://unpkg.com/preact';
+import { html, Component, render } from 'https://unpkg.com/htm';
+
+// Initialize htm with Preact
+const html = htm.bind(h);
+
+const app = html`<div>Hello World!</div>`
+render(app, document.getElementById('app'));
+```
+
+C'est une façon très populaire d'écrire des applications Preact et nous vous recommandons vivement de lire le [README][htm] de html si vous êtes intéressé par cette méthode.
+
+## Meilleur pratique, avec `preact-cli`
+
+Le projet `preact-cli` a crée la meilleur solution pour livrer des applications Preact à l’empaquetage optimisé pour les meilleurs configurations web. Il est construit avec des outils standard comme `webpack`, `babel` et `postcss`. Du par ca simplicité c'est le choix le plus populaire pour utiliser Preact parmis nos utilisateurs.
+
+Comme le nom l'implique, `preact-cli` est une **c**commande en **l**igne de commande qui peut être utilisé sur le terminal de votre machine. Installez le globalement en lancant:
+```bash
+npm install -g preact-cli
+```
+
+Après, vous aurez une nouvelle commande dans votre terminal appelé `preact`. Avec celle-ci vous pouvez créer une nouvelle application en utilisant la commande suivante:
+
+```bash
+preact create default my-project
+```
+
+La commande suivante récupère un modèle depuis `preactjs-template/default`, affiche quelques informations et génère un projet à `./mon-projet`.
+
+> Astuce : Chaque dépot Github qui a un dossier `'template'` peut être utilisé comme un template en utilisant `preact create <nom-utilisateur>/<dépot> <nom-du-projet>`
+
+### Premiers pas pour le développement
+
+Nous somme prêt à commencer notre application. Pour lancer le serveur de développement, tapez la commande suivante dans le dossier d'un projet fraichement généré (`mon-projet`)
+
+```bash
+# Go into the generated project folder
+cd my-project/
+
+# Start the devserver
+npm run dev
+```
+
+Lorsque le serveur sera lancé vous pourrez accéder à votre application à l'URL qui sera affiché dans la console. Maintenant vous être prêt à développer !
+
+### Faire un empaquetage de production
+
+Il y a un moments où vous voulez enfin deployer votre application. La commande `preact` livre un outil pratique `build` afin de générer un empaquetage compressé.
+
+```bash
+npm run build
+```
+
+Après la complétion, vous pouvez utiliser le dossier `build/` nouvellement crée qui peut être déployer directement sur le serveur.
+
+> Pour une liste complète des commandes disponibles vérifiez la liste dans le [fichier README](https://github.com/preactjs/preact-cli#cli-options) de preact-cli.
+
+## L'intégrer dans une application existante
+
+Si vous avez déjà un processus de travail existant, c'est très possible que vous aillez déjà des outils d'empaquetage. Le choix le plus populaire est [webpack](https://webpack.js.org/), [rollup](https://rollupjs.org) ou [parcel](https://parceljs.org/). Preact fonctionne directement avec chacun d'eux. Aucun changement n'est nécéssaire !
+
+### Mêttre en place JSX
+
+Pour transpiler JSX, vous avez besoin d'un plugin babel qui converti votre code en Javascript valide. Celui que nous utilisons tous est [@babel/plugin-transform-react-jsx](https://babeljs.io/docs/en/babel-plugin-transform-react-jsx). Une fois installé vous avez besoin de spécifier une fonction JSX qui devrait être utilisé:
+
+```json
+{
+  "plugins": [
+    ["@babel/plugin-transform-react-jsx", {
+      "pragma": "h",
+      "pragmaFrag": "Fragment",
+    }]
+  ]
+}
+```
+
+> [babeljs](https://babeljs.io/) est l'une des meilleurs documentation. Nous vous recommandons vivement de la vérifier pour vos questions concernant babel ou comment le configurer.
+
+### Aliasing React à Preact
+
+At some point you'll probably want to make use of the vast react ecosystem. Libraries and Components originally written for React work seamlessly with our compatibility layer. To make use of it we need to point all `react` and `react-dom` imports to Preact. This step is called aliasing.
+
+#### Aliasing dans webpack
+
+Pour alias un paquet dans webpack vous devez ajouter la section `resolve.alias` dans votre configuration.
+Suivant la configuration que vous utilisez ceci pourrait déjà être présente mais ayant les alias pour Preact manquant.
+
+```js
+const config = {
+  //...snip
+  resolve: {
+    alias: {
+        'react': 'preact/compat',
+        'react-dom/test-utils': 'preact/test-utils',
+        'react-dom': 'preact/compat', // Doit être en dessous de test-utils
+    },
+}
+```
+
+#### Aliasing dans parcel
+
+Parcel utilise le fichier standard `package.json` pour lire les configurations sous une clé `alias`.
+
+
+```json
+{
+  "alias": {
+    "react": "preact/compat",
+    "react-dom/test-utils": "preact/test-utils",
+    "react-dom": "preact/compat"
+  },
+}
+```
+
+#### Aliasing dans jest
+
+Similaire aux empaqueteurs (bundlers), [jest](https://jestjs.io/) permet de réécrire le chemin d'un module. Cette syntaxe est un peut différente que, disons dans webpack, parceque celle-ci est basé sur des regex. Ajoutez ceci dans votre configuration jest:
+
+```js
+{
+  "moduleNameMapper": {
+    "react": "preact/compat"
+    "react-dom/test-utils": "preact/test-utils"
+    "react-dom": "preact/compat"
+  }
+}
+```
+
+[htm]: https://github.com/developit/htm
+
diff --git a/content/fr/guide/v10/hooks.md b/content/fr/guide/v10/hooks.md
new file mode 100644
index 000000000..7dc52be02
--- /dev/null
+++ b/content/fr/guide/v10/hooks.md
@@ -0,0 +1,315 @@
+---
+name: Accroches
+description: 'Les accroches en Preact vous permettent de composer des comportements ensemble et réutiliser les logiques dans différents composants.'
+---
+
+# Accroches
+
+Les accroches (en anglais 'Hooks') est un nouveau concept qui vous permet de composer des états et des effets de bords. Cela vous permet de réutiliser des logiques d'états entre différents composants.
+
+Si vous avez déjà travaillé avec Preact pendant un moment vous pourriez être familier avec des schéma du style `render-props` et `high-order-components` qui vous permettent de faire la même chose. Mais ces solutions ont toujours rendu le code difficile tandis qu'avec les crochets vous pouvez facilement extraire cette logique et la rendre testable unitairement et indépendamment.
+
+De part leur nature fonctionnel, elle peuvent être utilisé dans les composants fonctionnels ('functional components') et évider de nombreux pièges du mot clé `this` que présentent ces classes. Au lieu de cela, les crochets se basent sur les "closures" qui les rendent lié à la valeur et éliminent tout un tas d'erreurs lorsqu'il en vient à la mise-à-jours des états d'une manière asynchrone.
+
+Il y a deux manière d'importer celles-ci, vous pouvez les importer depuis
+`preact/hooks` ou `preact/compat`.
+
+---
+
+<toc></toc>
+
+---
+
+## Introduction
+
+C'est plus facile de vous montrer le code et de comparer cela à un composant de classe pour vous donner une idée de leur avantage. Par exemple ce simple exemple de compteur (en anglais Counter):
+
+```jsx
+class Counter extends Component {
+  state = { value: 0 };
+
+  increment = () => this.setState(prev => ({ value: prev.value +1 }));
+
+  render(_, { value }) {
+    return (
+      <div>
+        Counter: {value}
+        <button onClick={this.increment}>Increment</button>
+      </div>
+    );
+  }
+}
+```
+
+Tout ce que le composant fait est un rendu de la `div` et un `button` pour incrémenter le compteur. Ré-écrivons ceci pour le baser sur des accroches:
+
+```jsx
+function Counter() {
+  const [value, setValue] = useState(0);
+  const increment = useCallback(() => setValue(value + 1), [value]);
+
+  return (
+    <div>
+      Counter: {value}
+      <button onClick={increment}>Increment</button>
+    </div>
+  );
+}
+```
+Jusqu'ici tout est assez similaire. Alors allons une étape plus loins. Nous pouvons maintenant extraire la logique de compteur dans une accroche personnalisée et la rendre réutilisable entre les composants.
+
+
+```jsx
+function useCounter() {
+  const [value, setValue] = useState(0);
+  const increment = useCallback(() => setValue(value + 1), [value]);
+  return { value, increment };
+}
+
+// First counter
+function CounterA() {
+  const { value, increment } = useCounter();
+  return (
+    <div>
+      Counter A: {value}
+      <button onClick={increment}>Increment</button>
+    </div>
+  );
+}
+
+// Second counter which renders a different output.
+function CounterB() {
+  const { value, increment } = useCounter();
+  return (
+    <div>
+      <h1>Counter B: {value}</h1>
+      <p>I'm a nice counter</p>
+      <button onClick={increment}>Increment</button>
+    </div>
+  );
+}
+```
+
+Notez comment chacun de `CounterA` et `CounterB` sont complètement indépendants l'un de l'autres.
+
+> Si vous pensez que cela peut être un petit peu étrange, vous n'êtes pas le seul. Cela a prit un moment pour tout le monde à repenser et refaire leurs habitudes.
+
+## L'argument de dépendance
+
+De nombreuses accroches possèdent un argument qui peut être utiliser pour limiter le processus de mise-à-jour de celui-ci. Preact passera sur la liste de dépendance et vérifiera l'égalité des références. Dans le précédent exemple `Counter` nous l'avons utilisé sur `useCallback`:
+
+```jsx
+function useCounter() {
+  const [value, setValue] = useState(0);
+  const increment = useCallback(
+    () => setValue(value + 1),
+    // This is the dependency array
+    [value]
+  );
+  return { value, increment };
+}
+```
+
+Dans cette exemple nous voulons toujours mètre à jours la référence à la fonction rappelé quand `value` change. Ceci est nécéssaire parce que le rappel référencerait toujours la variable `value` de cet objet depuis lorsque l'objet a été crée.
+
+
+## Les accroches avec état
+
+Ici nous verrons comment nous introduisons des logique d'états dans ces composants fonctionnels.
+
+Avant les accroches nous devions faire une classe composant à chaque fois que nous voulions un état. Ceci a changé.
+
+### useState
+
+Cet accroche accepte un argument, celui-ci sera l'état initial. Lorsque nous invoquerons cette accroche elle retournera une liste de deux variables. La première étant l'état initial et le second étant le "setter" pour notre état.
+
+Notre applicateur (en anglais "setter") se comporte de manière similaire à `setState` d'un composant de classe classique. Il accepte une valeur ou une fonction avec le `currentState` comme argument.
+
+Lorsque vous appelez l'applicateur et que l'état est différent, cela déclenchera un rendu en commençant par le composant qui a utilisé useState.
+
+```jsx
+import { h } from 'preact';
+import { useState } from 'preact/hooks';
+
+const Counter = () => {
+  const [count, setCount] = useState(0);
+  const increment = () => setCount(count + 1);
+  // You can also pass a callback to the setter
+  const decrement = () => setCount((currentCount) => currentCount - 1);
+
+  return (
+    <div>
+      <p>Count: {count}</p>
+      <button onClick={increment}>Increment</button>
+      <button onClick={decrement}>Decrement</button>
+    </div>
+  )
+}
+```
+
+> Lorsque notre état initiale est couteux c'est mieux de passer une fonction à la place d'une valeur.
+
+### useReducer
+
+L'accroche `useReducer` a une ressemblance proche à [redux](https://redux.js.org/). Comparé à [useState](#usestateinitialstate) il est plus simple à utiliser lorsque vous avez une logique d'état complexe où le prochain état dépend du précédent.
+
+
+```jsx
+const initialState = 0;
+const reducer = (state, action) => {
+  switch (action) {
+    case 'increment': return state + 1;
+    case 'decrement': return state - 1;
+    case 'reset': return 0;
+    default: throw new Error('Unexpected action');
+  }
+};
+
+function Counter() {
+  // Returns the current state and a dispatch function to
+  // trigger an action
+  const [count, dispatch] = useReducer(reducer, initialState);
+  return (
+    <div>
+      {count}
+      <button onClick={() => dispatch('increment')}>+1</button>
+      <button onClick={() => dispatch('decrement')}>-1</button>
+      <button onClick={() => dispatch('reset')}>reset</button>
+    </div>
+  );
+}
+```
+
+## Memoization
+
+Dans la programmation d'UI il y a souvent quelques états ou résultats qui sont couteux à calculer. Memoization permet de sauvegarder le résultat de cette calculation permettant de la réutiliser lorsque la même entrée est utilisé.
+
+### useMemo
+
+Avec les accroches `useMemo`, nous pouvons memoize les résultats de cette calculation et seulement re-calculer lorsque les dépendances changes.
+
+```jsx
+const memoized = useMemo(
+  () => expensive(a, b),
+  // Only re-run the expensive function when any of these
+  // dependencies change
+  [a, b]
+);
+```
+
+> N'utilisez pas de code à effet de bord à l'intérieur de `useMemo`. Les effets de bords doivent être dans `useEffect`.
+
+### useCallback
+
+L'accroche `useCallback` peut être utilisé pour s'assurer que la référence de la fonction retourné restera egal aussi longtemps que les dépendances ne changent pas. Ceci peut être utilisé pour optimiser la mise-à-jour des composants enfant lorsqu'ils se basent sur l'égalité de la référence pour sauter un rendu (e.g: `shouldComponentUpdate`).
+
+```jsx
+const onClick = useCallback(
+  () => console.log(a, b);
+  [a, b],
+);
+```
+
+> Fait ammusant: `useCallback(fn, deps)` est équivalent à `useMemo(() => fn, deps)`.
+
+## useRef
+
+Pour obtenir la référence à un élément DOM à l'intérieur d'un composant fonctionnel il y à l'accroche `useRef`. Qui fonctionne d'une manière similaire à [createRef](/guide/v10/refs#createrefs).
+
+```jsx
+function Foo() {
+  // Initialise useRef avec la valeur initiale de `null`
+  const input = useRef(null);
+  const onClick = () => input.current && input.current.focus();
+
+  return (
+    <>
+      <input ref={input} />
+      <button onClick={onClick}>Focus input</button>
+    </>
+  );
+}
+```
+
+> Faites attention à ne pas utiliser `useRef` avec `createRef`.
+
+## useContext
+
+Pour accéder à un contexte à l'intérieur d'un composant fonctionnel nous pouvons utiliser l'accroche `useContext`, sans aucun emballage de plus haut niveau. Le premier argument doit être un objet context qui est crée depuis un appel à `createContext`.
+
+```jsx
+const Theme = createContext('light');
+
+function DisplayTheme() {
+  const theme = useContext(Theme);
+  return <p>Theme actif: {theme}</p>;
+}
+
+// ...later
+function App() {
+  return (
+    <Theme.Provider value="light">
+      <OtherComponent>
+        <DisplayTheme />
+      </OtherComponent>
+    </Theme.Provider>
+  )
+}
+```
+
+## Effets de bord
+
+Les effets de bord sont au coeur de beaucoup d'applications modernes. Que vous vouliez récupérer de la donnée depuis une API, ou déclencher un effet sur un document, vous verrez que `useEffect` est adapté à pratiquement tous vos besoins. C'est l'un des principaux avantages à l'API des accroches, c'est qu'elle base la manière de penser sur les effets plutôt que le cycle de vie des composants.
+
+### useEffect
+
+Comme le nom l'implique, `useEffect` est le principal moyen de déclencher divers effets de bords. Vous pouvez retourner une fonction de nettoyage comme l'un de vos effets si vous en avez besoin.
+
+```jsx
+useEffect(() => {
+  // Trigger your effect
+  return () => {
+    // Optional: Any cleanup code
+  };
+}, []);
+```
+
+Nous allons commencer avec un composant `Title` qui devrait refléter le titre de vos documents, afin que nous puissions voir dans la barre d'adresse dans l'onglet de notre navigateur.
+
+```jsx
+function PageTitle(props) {
+  useEffect(() => {
+    document.title = props.title;
+  }, [prop.title]);
+
+  return <h1>{props.title}</h1>;
+}
+```
+
+Le premier argument à `useEffect` est une fonction de rappel (en anglais 'callback') qui ne prend aucun argument et qui déclenche l'effet. Dans notre cas nous ne voulons le déclencher que lorsque le titre a vraiment changé. Il n'y a aucune raison de le mettre à jour si le titre est le même. C'est pour cela que l'on utilise un second argument pour spécifier notre [liste de dépendance](#the-dependency-argument).
+
+Mais parfois, nous avons des cas d'utilisation plus complexe. Pensez à un composant qui a besoin de s'inscrire à certaines données lorsqu'il est crée ou détruit. Ceci peut aussi être accomplie avec `useEffect`. Pour lancer un code de nettoyage nous n'avons qu'à lancer une fonction dans notre fonction de rappel.
+
+```jsx
+// Component that will always display the current window width
+function WindowWidth(props) {
+  const [width, setWidth] = useState(0);
+
+  function onResize() {
+    setWidth(window.innerWidth);
+  }
+
+  useEffect(() => {
+    window.addEventListener('resize', onResize);
+    return () => window.removeEventListener('resize', onResize);
+  }, []);
+
+  return <div>Window width: {width}</div>;
+}
+```
+
+> La fonction de nettoyage est optionnel. Si vous n'avez pas besoin de lancer de code de nettoyage, vous n'êtes pas obliger de retourner quoi que ce soit dans ce qui est passé à `useEffect`.
+
+### useLayoutEffect
+
+La signature est identique à [useEffect](#useeffect), mais ne se lancera que lorsque le composant sera différencié et que le navigateur a une chance d’imprimer ce contenu.
\ No newline at end of file