Skip to content

Commit

Permalink
i18n(api-reference, "french")
Browse files Browse the repository at this point in the history
  • Loading branch information
Patrick Borowy committed Aug 13, 2019
1 parent aa4a6e0 commit 48ffcad
Showing 1 changed file with 182 additions and 0 deletions.
182 changes: 182 additions & 0 deletions content/fr/guide/v10/api-reference.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,182 @@
---
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>
```

0 comments on commit 48ffcad

Please sign in to comment.