i18n(french, [forms, getting-started, hooks])

Author: Patrick Borowy

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>
+    );
+  }
+}
+```

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
+