React

Une bibliothèque JavaScript pour créer des interfaces

utilisateurs

Bien démarrer Suivre le tutoriel

Déclaratif À base de composants

Grâce à React, il est facile de créer des interfaces utilisateurs Créez des composants autonom
interactives. Définissez des vues simples pour chaque état de état, puis assemblez-les pour cr
votre application, et lorsque vos données changeront, React complexes.
mettra à jour, de façon optimale, juste les composants qui en
auront besoin. Dans la mesure où les composa
que sous la forme de gabarits, v
Des vues déclaratives rendent votre code plus prévisible et plus données complexes dans vos ap
facile à déboguer. DOM.

 

Un composant simple

Les composants React implémentent une méthode render() qui prend des
JSX n’est pas obligatoire pour utiliser React. Essayez la REPL Babel pour
examiner le code JavaScript brut produit par la phase de compilation du format
JSX.

ÉDITEUR JSX INTERACTIF  JSX ?

class HelloMessage extends React.Component {

render() {
return (
<div>
Salut {this.props.name}
</div>
);
}
}

ReactDOM.render(
<HelloMessage name="Thierry" />,
document.getElementById('hello-example')
);

Résultat
Salut Thierry

Un composant à état

En plus de pouvoir recevoir des données (accessibles via this.props ), un

composant peut maintenir un état local (accessible via this.state ). Lorsque
l’état local d’un composant change, son affichage est mis à jour en appelant
render() une nouvelle fois.

ÉDITEUR JSX INTERACTIF  JSX ?

 }

tick() {
this.setState(state => ({
seconds: state.seconds + 1
}));
}

componentDidMount() {
this.interval = setInterval(() => this.tick(), 1000);
}

componentWillUnmount() {
clearInterval(this.interval);
}

render() {
return (
<div>
Secondes : {this.state.seconds}
</div>
);
}
}

ReactDOM.render(
<Timer />,
document.getElementById('timer-example')
);

Résultat
Secondes : 94

Une application

En utilisant props et state on peut créer une petite application de gestion de

tâches. Cet exemple utilise state pour maintenir la liste des tâches et le texte que
l’utilisateur a saisi. Bien que les gestionnaires d’événements soient définis
directement dans le code, ils seront regroupés et gérés en utilisant les principes
ÉDITEUR JSX INTERACTIF  JSX ?

class TodoApp extends React.Component {

constructor(props) {
super(props);
this.state = { items: [], text: '' };
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}

render() {
return (
<div>
<h3>À faire</h3>
<TodoList items={this.state.items} />
<form onSubmit={this.handleSubmit}>
<label htmlFor="new-todo">
Que faut-il faire ?
</label>
<input
id="new-todo"
onChange={this.handleChange}
value={this.state.text}
/>
<button>
Ajouter #{this.state.items.length + 1}
</button>
</form>
</div>
);
}

handleChange(e) {
this.setState({ text: e.target.value });
}

handleSubmit(e) {
e.preventDefault();
if (this.state.text.length === 0) {
return;
}
const newItem = {
text: this.state.text,
 text: ''
}));
}
}

class TodoList extends React.Component {

render() {
return (
<ul>
{this.props.items.map(item => (
<li key={item.id}>{item.text}</li>
))}
</ul>
);
}
}

ReactDOM.render(
<TodoApp />,
document.getElementById('todos-example')
);

Résultat

À faire

Que faut-il faire ? Ajouter #1

Un composant avec
des plugins tiers

React est flexible et fournit divers moyens de l’intégrer avec d’autres bibliothèques
ou frameworks. Cet exemple utilise remarkable, une bibliothèque tierce pour
gérer le format Markdown, afin de convertir le contenu de la balise <textarea>
en temps réel.
class MarkdownEditor extends React.Component {
constructor(props) {
super(props);
this.md = new Remarkable();
this.handleChange = this.handleChange.bind(this);
this.state = { value: 'Bonjour, **monde** !' };
}

handleChange(e) {
this.setState({ value: e.target.value });
}

getRawMarkup() {
return { __html: this.md.render(this.state.value) };
}

render() {
return (
<div className="MarkdownEditor">
<h3>Entrée</h3>
<label htmlFor="markdown-content">
Saisissez du markdown
</label>
<textarea
id="markdown-content"
onChange={this.handleChange}
defaultValue={this.state.value}
/>
<h3>Sortie</h3>
<div
className="content"
dangerouslySetInnerHTML={this.getRawMarkup()}
/>
</div>
);
}
}

ReactDOM.render(
<MarkdownEditor />,
document.getElementById('markdown-example')
);
Entrée
Bonjour, **monde** !
Saisissez du markdown

Sortie
Bonjour, monde !

Bien démarrer Suivre le tutoriel

 INSTALLATION

Bonjour, monde ! FONDAMENTAUX

Le plus petit exemple de React ressemble à ceci : 1. Bonjour, monde !

2. Introduction à JSX
3. Le rendu des éléments
ReactDOM.render(
<h1>Bonjour, monde !</h1>, 4. Composants et props
document.getElementById('root') 5. État et cycle de vie
);
6. Gérer les événements
7. Affichage conditionnel
Il affiche un titre qui dit « Bonjour, monde ! » sur la 8. Listes et clés
page.
9. Formulaires
10. Faire remonter l'état
Essayer sur CodePen
11. Composition ou héritage ?

Cliquez sur le lien ci-dessus pour ouvrir un éditeur 12. Penser en React

en ligne. Vous êtes libres de faire quelques

GUIDES AVANCÉS
changements et de voir comment ils affectent
l’affichage. La plupart des pages de ce guide auront
RÉFÉRENCE DE L'API
des exemples modifiables comme celui-ci.

HOOKS

TESTS
Comment lire ce guide
MODE CONCURRENT (EXPÉRIMENT
Dans ce guide, nous examinerons les blocs qui
constituent une application React : les éléments et CONTRIBUER
les composants. Une fois que vous les aurez
maîtrisés, vous pourrez créer des applications FAQ
complexes à partir de petits blocs réutilisables.
Le plus petit exemple de React ressemble à ceci :

INSTALLATION
ReactDOM.render(
<h1>Bonjour, monde !</h1>,
FONDAMENTAUX
document.getElementById('root')
);
1. Bonjour, monde !
2. Introduction à JSX
Il affiche un titre qui dit « Bonjour, monde ! » sur la 3. Le rendu des éléments
page. 4. Composants et props
5. État et cycle de vie
Essayer sur CodePen
6. Gérer les événements
7. Affichage conditionnel
Cliquez sur le lien ci-dessus pour ouvrir un éditeur
en ligne. Vous êtes libres de faire quelques 8. Listes et clés

changements et de voir comment ils affectent 9. Formulaires

l’affichage. La plupart des pages de ce guide auront 10. Faire remonter l'état
des exemples modifiables comme celui-ci. 11. Composition ou héritage ?
12. Penser en React

GUIDES AVANCÉS

Comment lire ce guide

RÉFÉRENCE DE L'API

Dans ce guide, nous examinerons les blocs qui

constituent une application React : les éléments et HOOKS

les composants. Une fois que vous les aurez

maîtrisés, vous pourrez créer des applications TESTS

complexes à partir de petits blocs réutilisables.

MODE CONCURRENT (EXPÉRIMENT

Astuce CONTRIBUER
Ce guide est destiné aux personnes qui préfèrent
apprendre étape par étape. Si vous préférez FAQ
apprendre par la pratique, allez voir notre
tutoriel. Vous trouverez peut-être que les deux
Ceci est le premier chapitre d’un guide étape par
étape à propos des concepts principaux de React.
INSTALLATION
Vous pouvez trouver une liste des chapitres dans la
barre latérale de navigation. Si vous lisez ceci depuis
FONDAMENTAUX
un appareil mobile, vous pouvez accéder à la
navigation en appuyant sur le bouton situé dans le 1. Bonjour, monde !
coin en bas à droite de votre écran. 2. Introduction à JSX
3. Le rendu des éléments
Chacun des chapitres de ce guide s’appuie sur les
4. Composants et props
connaissances introduites dans les chapitres
5. État et cycle de vie
précédents. Vous pouvez apprendre l’essentiel de
6. Gérer les événements
React en lisant les chapitres du guide
7. Affichage conditionnel
« Fondamentaux » dans l’ordre où ils
apparaissent dans la barre latérale. Par exemple, 8. Listes et clés

le prochain chapitre s’intitule « Introduction à JSX ». 9. Formulaires

10. Faire remonter l'état
11. Composition ou héritage ?
12. Penser en React
Niveau de connaissances supposé
GUIDES AVANCÉS
React est une bibliothèque JavaScript, donc nous
supposerons que vous avez une compréhension RÉFÉRENCE DE L'API

décente du langage JavaScript. Si vous ne vous

sentez pas à l’aise, nous vous recommandons de HOOKS

passer par un tutoriel JavaScript pour vérifier

votre niveau de connaissances et vous permettre TESTS

de suivre ce guide sans être perdu·e. Il vous prendra

MODE CONCURRENT (EXPÉRIMENT
entre 30 minutes et une heure environ, mais au
moins vous n’aurez pas le sentiment d’apprendre
CONTRIBUER
React et JavaScript en même temps.

FAQ
Remarque
Ce guide utilise occasionnellement quelques
JavaScript ces dernières années, ces trois points
devraient vous aider.
INSTALLATION

FONDAMENTAUX

1. Bonjour, monde !
2. Introduction à JSX
Commençons ! 3. Le rendu des éléments
4. Composants et props
Continuez à défiler pour atteindre le lien vers le
5. État et cycle de vie
prochain chapitre de ce guide juste avant le pied de
page. 6. Gérer les événements
7. Affichage conditionnel
8. Listes et clés
9. Formulaires
Avez-vous trouvé cette page utile ? 10. Faire remonter l'état

Modifier cette page 11. Composition ou héritage ?

12. Penser en React

GUIDES AVANCÉS

RÉFÉRENCE DE L'API

HOOKS
Article précédent Prochain article

Liens CDN Introduction à TESTS

JSX
MODE CONCURRENT (EXPÉRIMENT

CONTRIBUER

FAQ
 INSTALLATION

Introduction à JSX FONDAMENTAUX

Observez cette déclaration de variable : 1. Bonjour, monde !

2. Introduction à JSX
3. Le rendu des éléments
const element = <h1>Bonjour, monde !</h1>;
4. Composants et props
5. État et cycle de vie
Cette drôle de syntaxe n’est ni une chaîne de
6. Gérer les événements
caractères ni du HTML.
7. Affichage conditionnel
8. Listes et clés
Ça s’appelle du JSX, et c’est une extension
9. Formulaires
syntaxique de JavaScript. Nous recommandons de
l’utiliser avec React afin de décrire à quoi devrait 10. Faire remonter l'état

ressembler l’interface utilisateur (UI). JSX vous fait 11. Composition ou héritage ?

sûrement penser à un langage de balisage, mais il 12. Penser en React

recèle toute la puissance de JavaScript.
GUIDES AVANCÉS

JSX produit des « éléments » React. Nous verrons

RÉFÉRENCE DE L'API
comment les retranscrire dans le DOM dans la
prochaine section. Dans la suite de ce document,
HOOKS
nous verrons les bases de JSX dont vous aurez
besoin pour bien démarrer.
TESTS

Pourquoi JSX ? MODE CONCURRENT (EXPÉRIMENT

Le fonctionnement d’une UI conditionnera toujours CONTRIBUER

les logiques de rendu, de la gestion des événements
à la préparation des données pour l’affichage, en FAQ
passant par l’évolution de l’état au fil du temps.
React a choisi d’assumer pleinement cet état de fait.
Observez cette déclaration de variable :

INSTALLATION
const element = <h1>Bonjour, monde !</h1>;

FONDAMENTAUX

Cette drôle de syntaxe n’est ni une chaîne de 1. Bonjour, monde !

caractères ni du HTML.
2. Introduction à JSX
3. Le rendu des éléments
Ça s’appelle du JSX, et c’est une extension
4. Composants et props
syntaxique de JavaScript. Nous recommandons de
5. État et cycle de vie
l’utiliser avec React afin de décrire à quoi devrait
ressembler l’interface utilisateur (UI). JSX vous fait 6. Gérer les événements

sûrement penser à un langage de balisage, mais il 7. Affichage conditionnel

recèle toute la puissance de JavaScript. 8. Listes et clés
9. Formulaires
JSX produit des « éléments » React. Nous verrons 10. Faire remonter l'état
comment les retranscrire dans le DOM dans la 11. Composition ou héritage ?
prochaine section. Dans la suite de ce document,
12. Penser en React
nous verrons les bases de JSX dont vous aurez
besoin pour bien démarrer. GUIDES AVANCÉS

RÉFÉRENCE DE L'API
Pourquoi JSX ?
HOOKS
Le fonctionnement d’une UI conditionnera toujours
les logiques de rendu, de la gestion des événements
TESTS
à la préparation des données pour l’affichage, en
passant par l’évolution de l’état au fil du temps.
MODE CONCURRENT (EXPÉRIMENT
React a choisi d’assumer pleinement cet état de fait.

CONTRIBUER
Au lieu de séparer artificiellement les technologies
en mettant le balisage et la logique dans des
FAQ
fichiers séparés, React sépare les préoccupations via
des unités faiblement couplées appelées
JS vous met mal à l’aise, cette présentation vous
fera peut-être changer d’avis.
INSTALLATION

React ne vous oblige pas à utiliser JSX, mais la

FONDAMENTAUX
plupart des gens y trouvent une aide visuelle quand
ils manipulent l’interface utilisateur dans le code 1. Bonjour, monde !
JavaScript. Ça permet aussi à React de produire des 2. Introduction à JSX
messages d’erreurs et d’avertissements plus utiles.
3. Le rendu des éléments
4. Composants et props
Ceci étant posé, commençons !
5. État et cycle de vie
6. Gérer les événements
Utiliser des expressions dans JSX 7. Affichage conditionnel
8. Listes et clés
Dans l’exemple suivant, nous déclarons une variable
9. Formulaires
appelée name et nous l’utilisons ensuite dans JSX
10. Faire remonter l'état
en l’encadrant avec des accolades :
11. Composition ou héritage ?
12. Penser en React
const name = 'Clarisse Agbegnenou';
const element = <h1>Bonjour, {name}</h1>;
GUIDES AVANCÉS
ReactDOM.render(
element,
RÉFÉRENCE DE L'API
document.getElementById('root')
);
HOOKS

Vous pouvez utiliser n’importe quelle expression TESTS

JavaScript valide dans des accolades en JSX. Par
exemple, 2 + 2 , user.firstName , ou formatName MODE CONCURRENT (EXPÉRIMENT
(user) sont toutes des expressions JavaScript
valides. CONTRIBUER

Dans l’exemple suivant, on intègre le résultat de FAQ

l’appel d’une fonction JavaScript, formatName

(user) , dans un élément <h1>
function formatName(user) {
return user.firstName + ' ' + user.lastName;
} INSTALLATION

const user = {
FONDAMENTAUX
firstName: 'Kylian',
lastName: 'Mbappé'
1. Bonjour, monde !
};
2. Introduction à JSX
const element = (
3. Le rendu des éléments
<h1>
Bonjour, {formatName(user)} ! 4. Composants et props
</h1> 5. État et cycle de vie
);
6. Gérer les événements
ReactDOM.render( 7. Affichage conditionnel
element,
document.getElementById('root') 8. Listes et clés
); 9. Formulaires
10. Faire remonter l'état

Essayer sur CodePen 11. Composition ou héritage ?

12. Penser en React
On découple le JSX en plusieurs lignes pour une
meilleure lisibilité. Par la même occasion, nous GUIDES AVANCÉS

recommandons également de le mettre entre

parenthèses afin d’éviter les pièges d’insertion de RÉFÉRENCE DE L'API

point-virgule automatique, même si cette pratique

HOOKS
n’est pas obligatoire.

TESTS

JSX n’est rien d’autre qu’une expression

MODE CONCURRENT (EXPÉRIMENT
Après la compilation, les expressions JSX deviennent
de simples appels de fonctions JavaScript, dont CONTRIBUER
l’évaluation renvoie des objets JavaScript.
FAQ
Ça signifie que vous pouvez utiliser JSX à l’intérieur
d’instructions if ou de boucles for , l’affecter à
function getGreeting(user) {
if (user) {
return <h1>Bonjour, {formatName(user)} ! INSTALLATION
</h1>;
}
FONDAMENTAUX
return <h1>Bonjour, Belle Inconnue.</h1>;
}
1. Bonjour, monde !
2. Introduction à JSX
3. Le rendu des éléments
4. Composants et props
Spécifier des attributs en JSX
5. État et cycle de vie
Vous pouvez utiliser des guillemets pour spécifier 6. Gérer les événements
des littéraux chaînes de caractères dans les 7. Affichage conditionnel
attributs : 8. Listes et clés
9. Formulaires
const element = <div tabIndex="0"></div>; 10. Faire remonter l'état
11. Composition ou héritage ?

Vous pouvez aussi utiliser des accolades pour 12. Penser en React

utiliser une expression JavaScript dans un attribut :

GUIDES AVANCÉS

const element = <img src={user.avatarUrl} RÉFÉRENCE DE L'API

></img>;

HOOKS

Ne mettez pas de guillemets autour des accolades

quand vous utilisez une expression JavaScript dans TESTS

un attribut. Vous pouvez utiliser soit des guillemets

MODE CONCURRENT (EXPÉRIMENT
(pour des valeurs textuelles) soit des accolades
(pour des expressions), mais pas les deux à la fois
CONTRIBUER
pour un même attribut.

FAQ
Attention :
Dans la mesure où JSX est plus proche de
nommage des propriétés, au lieu des noms
d’attributs HTML.
INSTALLATION
Par exemple, class devient className en JSX,
et tabindex devient tabIndex . FONDAMENTAUX

1. Bonjour, monde !
2. Introduction à JSX
3. Le rendu des éléments
Spécifier des éléments enfants en JSX 4. Composants et props
5. État et cycle de vie
Si une balise est vide, vous pouvez la fermer
immédiatement avec /> , comme en XML : 6. Gérer les événements
7. Affichage conditionnel
8. Listes et clés
const element = <img src={user.avatarUrl} />;
9. Formulaires
10. Faire remonter l'état
Les balises JSX peuvent contenir des enfants :
11. Composition ou héritage ?
12. Penser en React
const element = (
<div>
GUIDES AVANCÉS
<h1>Bonjour !</h1>
<h2>Content de te voir ici.</h2>
</div> RÉFÉRENCE DE L'API
);

HOOKS

TESTS
JSX empêche les attaques d’injection
MODE CONCURRENT (EXPÉRIMENT
Vous ne risquez rien en utilisant une saisie
utilisateur dans JSX : CONTRIBUER

const title = FAQ

response.potentiallyMaliciousInput;
// Ceci est sans risque :
Par défaut, React DOM échappe toutes les valeurs
intégrées avec JSX avant d’en faire le rendu. Il
INSTALLATION
garantit ainsi que vous ne risquez jamais d’injecter
quoi que ce soit d’autre que ce vous avez
FONDAMENTAUX
explicitement écrit dans votre application. Tout est
converti en chaîne de caractères avant de produire 1. Bonjour, monde !
le rendu. Ça aide à éviter les attaques XSS (cross- 2. Introduction à JSX
site-scripting). 3. Le rendu des éléments
4. Composants et props

JSX représente des objets 5. État et cycle de vie

6. Gérer les événements
Babel compile JSX vers des appels à
7. Affichage conditionnel
React.createElement() .
8. Listes et clés
9. Formulaires
Ces deux exemples sont identiques :
10. Faire remonter l'état
11. Composition ou héritage ?
const element = (
<h1 className="greeting">
12. Penser en React
Bonjour, monde !
</h1> GUIDES AVANCÉS
);

RÉFÉRENCE DE L'API

const element = React.createElement(

HOOKS
'h1',
{className: 'greeting'},
'Bonjour, monde !' TESTS
);

MODE CONCURRENT (EXPÉRIMENT

React.createElement() effectue quelques

CONTRIBUER
vérifications pour vous aider à écrire un code sans
bug, mais pour l’essentiel il crée un objet qui
FAQ
ressemble à ceci :
 props: {
className: 'greeting',
children: 'Bonjour, monde !'
INSTALLATION
}
};
FONDAMENTAUX

Ces objets sont appelés des « éléments React ». 1. Bonjour, monde !

Vous pouvez les considérer comme des descriptions 2. Introduction à JSX
de ce que vous voulez voir sur l’écran. React lit ces 3. Le rendu des éléments
objets et les utilise pour construire le DOM et le 4. Composants et props
tenir à jour. 5. État et cycle de vie
6. Gérer les événements
Nous explorerons la retranscription des éléments
7. Affichage conditionnel
React dans le DOM dans la prochaine section.
8. Listes et clés
9. Formulaires
Astuce : 10. Faire remonter l'état
Nous recommandons d’utiliser la définition de
11. Composition ou héritage ?
langage « Babel » dans votre éditeur préféré, afin
12. Penser en React
que les codes ES6 et JSX soient correctement
colorisés.
GUIDES AVANCÉS

RÉFÉRENCE DE L'API

HOOKS
Avez-vous trouvé cette page utile ?

Modifier cette page TESTS

MODE CONCURRENT (EXPÉRIMENT

CONTRIBUER

FAQ

Article précédent Prochain article

Bonjour, monde !
Le rendu des
éléments
INSTALLATION

FONDAMENTAUX

1. Bonjour, monde !
2. Introduction à JSX
3. Le rendu des éléments
4. Composants et props
5. État et cycle de vie
6. Gérer les événements
7. Affichage conditionnel
8. Listes et clés
9. Formulaires
10. Faire remonter l'état
11. Composition ou héritage ?
12. Penser en React

GUIDES AVANCÉS

RÉFÉRENCE DE L'API

HOOKS

TESTS

MODE CONCURRENT (EXPÉRIMENT

CONTRIBUER

FAQ
 INSTALLATION

Composants et
props
FONDAMENTAUX

1. Bonjour, monde !
2. Introduction à JSX
Les composants vous permettent de découper 3. Le rendu des éléments
l’interface utilisateur en éléments indépendants 4. Composants et props
et réutilisables, vous permettant ainsi de 5. État et cycle de vie
considérer chaque élément de manière isolée. 6. Gérer les événements
Cette page fournit une introduction au concept 7. Affichage conditionnel
de composants. Vous trouverez une référence 8. Listes et clés
détaillée de l’API des composants ici. 9. Formulaires
10. Faire remonter l'état
Conceptuellement, les composants sont comme des 11. Composition ou héritage ?
fonctions JavaScript. Ils acceptent des entrées 12. Penser en React
quelconques (appelées « props ») et renvoient des
éléments React décrivant ce qui doit apparaître à GUIDES AVANCÉS
l’écran.
RÉFÉRENCE DE L'API

HOOKS

Fonctions composants et composants à

base de classes TESTS

Le moyen le plus simple de définir un composant MODE CONCURRENT (EXPÉRIMENT

consiste à écrire une fonction JavaScript :

CONTRIBUER

function Welcome(props) {
FAQ
return <h1>Bonjour, {props.name}</h1>;
}
Les composants vous permettent de découper
l’interface utilisateur en éléments indépendants
INSTALLATION
et réutilisables, vous permettant ainsi de
considérer chaque élément de manière isolée. FONDAMENTAUX
Cette page fournit une introduction au concept
1. Bonjour, monde !
de composants. Vous trouverez une référence
2. Introduction à JSX
détaillée de l’API des composants ici.
3. Le rendu des éléments
4. Composants et props
Conceptuellement, les composants sont comme des
5. État et cycle de vie
fonctions JavaScript. Ils acceptent des entrées
quelconques (appelées « props ») et renvoient des 6. Gérer les événements

éléments React décrivant ce qui doit apparaître à 7. Affichage conditionnel

l’écran. 8. Listes et clés
9. Formulaires
10. Faire remonter l'état
11. Composition ou héritage ?
Fonctions composants et composants à 12. Penser en React
base de classes
GUIDES AVANCÉS
Le moyen le plus simple de définir un composant
consiste à écrire une fonction JavaScript : RÉFÉRENCE DE L'API

function Welcome(props) { HOOKS

return <h1>Bonjour, {props.name}</h1>;
} TESTS

MODE CONCURRENT (EXPÉRIMENT

Cette fonction est un composant React valide car
elle accepte un seul argument « props » (qui signifie
CONTRIBUER
« propriétés ») contenant des données, et renvoie
un élément React. Nous appelons de tels
FAQ
composants des « fonctions composants », car ce
sont littéralement des fonctions JavaScript.
class Welcome extends React.Component {
render() {
return <h1>Bonjour, {this.props.name}</h1>; INSTALLATION
}
}
FONDAMENTAUX

1. Bonjour, monde !
Les deux composants ci-dessus sont équivalents du
2. Introduction à JSX
point de vue de React.
3. Le rendu des éléments
4. Composants et props
Les composants (aussi bien fonctions que classes)
possèdent quelques fonctionnalités 5. État et cycle de vie

supplémentaires dont nous discuterons dans les 6. Gérer les événements

prochaines sections. 7. Affichage conditionnel
8. Listes et clés
9. Formulaires
10. Faire remonter l'état
Produire le rendu d’un composant 11. Composition ou héritage ?
12. Penser en React
Jusqu’ici, nous n’avons rencontré que des éléments
React représentant des balises DOM : GUIDES AVANCÉS

const element = <div />; RÉFÉRENCE DE L'API

HOOKS
Mais ces éléments peuvent également représenter
des composants définis par l’utilisateur : TESTS

const element = <Welcome name="Sara" />; MODE CONCURRENT (EXPÉRIMENT

CONTRIBUER
Lorsque React rencontre un élément représentant
un composant défini par l’utilisateur, il transmet les FAQ
attributs JSX et les enfants à ce composant sous la
forme d’un objet unique. Nous appelons cet objet
Par exemple, ce code affiche « Bonjour, Sara » sur la
page :
INSTALLATION

function Welcome(props) {
FONDAMENTAUX
return <h1>Bonjour, {props.name}</h1>;
}
1. Bonjour, monde !
const element = <Welcome name="Sara" />; 2. Introduction à JSX
ReactDOM.render(
3. Le rendu des éléments
element,
document.getElementById('root') 4. Composants et props
);
5. État et cycle de vie
6. Gérer les événements
Essayer sur CodePen 7. Affichage conditionnel
8. Listes et clés
Récapitulons ce qui se passe dans cet exemple : 9. Formulaires
10. Faire remonter l'état
1. On appelle ReactDOM.render() avec l’élément
<Welcome name="Sara" /> .
11. Composition ou héritage ?
12. Penser en React
2. React appelle le composant Welcome avec
comme props {name: 'Sara'} .
GUIDES AVANCÉS
3. Notre composant Welcome retourne un élément
<h1>Bonjour, Sara</h1> pour résultat. RÉFÉRENCE DE L'API

4. React DOM met à jour efficacement le DOM pour

HOOKS
correspondre à <h1>Bonjour, Sara</h1> .

TESTS
Remarque
React considère les composants commençant par MODE CONCURRENT (EXPÉRIMENT

des lettres minuscules comme des balises DOM.

Par exemple, <div /> représente une balise CONTRIBUER

HTML div, mais <Welcome /> représente un

FAQ
composant, et exige que l’identifiant Welcome
existe dans la portée courante.
Pour en apprendre davantage sur le
raisonnement qui sous-tend cette convention,
INSTALLATION
lisez donc JSX en profondeur.

FONDAMENTAUX

1. Bonjour, monde !
2. Introduction à JSX
3. Le rendu des éléments
Composition de composants
4. Composants et props
5. État et cycle de vie
Les composants peuvent faire référence à d’autres
composants dans leur sortie. Ça nous permet 6. Gérer les événements

d’utiliser la même abstraction de composants pour 7. Affichage conditionnel

n’importe quel niveau de détail. Un bouton, un 8. Listes et clés
formulaire, une boîte de dialogue, un écran : dans 9. Formulaires
React, ils sont généralement tous exprimés par des 10. Faire remonter l'état
composants. 11. Composition ou héritage ?
12. Penser en React
Par exemple, nous pouvons créer un composant
App qui utilise plusieurs fois Welcome  : GUIDES AVANCÉS

function Welcome(props) { RÉFÉRENCE DE L'API

return <h1>Bonjour, {props.name}</h1>;
} HOOKS

function App() {
return ( TESTS
<div>
<Welcome name="Sara" />
MODE CONCURRENT (EXPÉRIMENT
<Welcome name="Cahal" />
<Welcome name="Edite" />
</div> CONTRIBUER
);
}
FAQ

ReactDOM.render(
<App />,
Essayer sur CodePen

En règle générale, les nouvelles applications React INSTALLATION

ont un seul composant App à la racine. En

FONDAMENTAUX
revanche, si vous intégrez React à une application
existante, vous pouvez commencer tout en bas par 1. Bonjour, monde !
un petit composant comme Button et remonter 2. Introduction à JSX
progressivement la hiérarchie des vues.
3. Le rendu des éléments
4. Composants et props
5. État et cycle de vie
6. Gérer les événements
Extraire des composants
7. Affichage conditionnel

N’ayez pas peur de scinder des composants en 8. Listes et clés

composants plus petits. 9. Formulaires

10. Faire remonter l'état
Prenons par exemple ce composant Comment  : 11. Composition ou héritage ?
12. Penser en React
function Comment(props) {
return ( GUIDES AVANCÉS
<div className="Comment">
<div className="UserInfo">
RÉFÉRENCE DE L'API
<img className="Avatar"
src={props.author.avatarUrl}
alt={props.author.name} HOOKS
/>
<div className="UserInfo-name">
{props.author.name} TESTS
</div>
</div>
MODE CONCURRENT (EXPÉRIMENT
<div className="Comment-text">
{props.text}
</div> CONTRIBUER
<div className="Comment-date">
{formatDate(props.date)}
FAQ
</div>
</div>
);
Essayer sur CodePen

Il accepte comme props author (un objet), text INSTALLATION

(une chaîne de caractères) et date (une date), et

FONDAMENTAUX
décrit un commentaire sur un réseau social en ligne.
1. Bonjour, monde !
Les nombreuses imbrications au sein du composant
2. Introduction à JSX
le rendent difficile à maintenir, et nous empêchent
3. Le rendu des éléments
d’en réutiliser des parties individuelles. Essayons
4. Composants et props
donc d’en extraire quelques composants.
5. État et cycle de vie

Pour commencer, nous allons extraire Avatar  : 6. Gérer les événements

7. Affichage conditionnel
8. Listes et clés
function Avatar(props) {
return ( 9. Formulaires
<img className="Avatar" 10. Faire remonter l'état
src={props.user.avatarUrl}
alt={props.user.name} 11. Composition ou héritage ?
/> 12. Penser en React
);
}
GUIDES AVANCÉS

Le composant Avatar n’a pas besoin de savoir qu’il RÉFÉRENCE DE L'API

figure dans un composant Comment . C’est pourquoi

nous avons donné à sa prop un nom plus HOOKS

générique : user plutôt que author .

TESTS

Nous vous recommandons de nommer les props du

MODE CONCURRENT (EXPÉRIMENT
point de vue du composant plutôt que de celui du
contexte dans lequel il est utilisé.
CONTRIBUER

On peut maintenant simplifier un poil Comment  :

FAQ

function Comment(props) {
 <Avatar user={props.author} />
<div className="UserInfo-name">
{props.author.name}
INSTALLATION
</div>
</div>
<div className="Comment-text"> FONDAMENTAUX
{props.text}
</div> 1. Bonjour, monde !
<div className="Comment-date">
{formatDate(props.date)}
2. Introduction à JSX
</div> 3. Le rendu des éléments
</div>
4. Composants et props
);
} 5. État et cycle de vie
6. Gérer les événements

Ensuite, nous allons extraire un composant 7. Affichage conditionnel

UserInfo qui affiche un Avatar à côté du nom de 8. Listes et clés

l’utilisateur : 9. Formulaires
10. Faire remonter l'état

function UserInfo(props) {
11. Composition ou héritage ?
return ( 12. Penser en React
<div className="UserInfo">
<Avatar user={props.user} />
GUIDES AVANCÉS
<div className="UserInfo-name">
{props.user.name}
</div> RÉFÉRENCE DE L'API
</div>
);
HOOKS
}

TESTS
Ce qui nous permet de simplifier encore davantage
Comment  : MODE CONCURRENT (EXPÉRIMENT

CONTRIBUER
function Comment(props) {
return (
<div className="Comment"> FAQ
<UserInfo user={props.author} />
<div className="Comment-text">
 </div>
</div>
);
INSTALLATION
}

FONDAMENTAUX
Essayer sur CodePen
1. Bonjour, monde !

Au début, extraire des composants peut vous 2. Introduction à JSX

sembler fastidieux, mais disposer d’une palette de 3. Le rendu des éléments
composants réutilisables s’avère rentable sur des 4. Composants et props
applications de plus grande taille. En règle générale, 5. État et cycle de vie
si une partie de votre interface utilisateur est utilisée 6. Gérer les événements
plusieurs fois ( Button , Panel , Avatar ) ou si elle 7. Affichage conditionnel
est suffisamment complexe en elle-même ( App ,
8. Listes et clés
FeedStory , Comment ), c’est un bon candidat pour
9. Formulaires
une extraction en tant que composant séparé.
10. Faire remonter l'état
11. Composition ou héritage ?
12. Penser en React

Les props sont en lecture seule GUIDES AVANCÉS

Que vous déclariez un composant sous forme de

RÉFÉRENCE DE L'API
fonction ou de classe, il ne doit jamais modifier ses
propres props. Considérons cette fonction sum  :
HOOKS

function sum(a, b) { TESTS

return a + b;
}
MODE CONCURRENT (EXPÉRIMENT

Ces fonctions sont dites « pures » parce qu’elles ne CONTRIBUER

tentent pas de modifier leurs entrées et retournent

FAQ
toujours le même résultat pour les mêmes entrées.

En revanche, cette fonction est impure car elle

function withdraw(account, amount) {
account.total -= amount;
} INSTALLATION

FONDAMENTAUX
React est plutôt flexible mais applique une règle
stricte : 1. Bonjour, monde !
2. Introduction à JSX
Tout composant React doit agir comme une 3. Le rendu des éléments
fonction pure vis-à-vis de ses props. 4. Composants et props
5. État et cycle de vie
Bien entendu, les interfaces utilisateurs des
6. Gérer les événements
applications sont dynamiques et évoluent dans le
7. Affichage conditionnel
temps. Dans la prochaine section, nous
8. Listes et clés
présenterons un nouveau concept « d’état local ».
9. Formulaires
L’état local permet aux composants React de
modifier leur sortie au fil du temps en fonction des 10. Faire remonter l'état

actions de l’utilisateur, des réponses réseau et de 11. Composition ou héritage ?

n’importe quoi d’autre, mais sans enfreindre cette 12. Penser en React
règle.
GUIDES AVANCÉS

RÉFÉRENCE DE L'API

Avez-vous trouvé cette page utile ?

HOOKS
Modifier cette page
TESTS

MODE CONCURRENT (EXPÉRIMENT

CONTRIBUER

Article précédent Prochain article FAQ

Le rendu des État et cycle de

éléments vie
 INSTALLATION

FONDAMENTAUX

1. Bonjour, monde !
2. Introduction à JSX
3. Le rendu des éléments
4. Composants et props
5. État et cycle de vie
6. Gérer les événements
7. Affichage conditionnel
8. Listes et clés
9. Formulaires
10. Faire remonter l'état
11. Composition ou héritage ?
12. Penser en React

GUIDES AVANCÉS

RÉFÉRENCE DE L'API

HOOKS

TESTS

MODE CONCURRENT (EXPÉRIMENT

CONTRIBUER

FAQ
 INSTALLATION

Composants et
props
FONDAMENTAUX

1. Bonjour, monde !
2. Introduction à JSX
Les composants vous permettent de découper 3. Le rendu des éléments
l’interface utilisateur en éléments indépendants 4. Composants et props
et réutilisables, vous permettant ainsi de 5. État et cycle de vie
considérer chaque élément de manière isolée. 6. Gérer les événements
Cette page fournit une introduction au concept 7. Affichage conditionnel
de composants. Vous trouverez une référence 8. Listes et clés
détaillée de l’API des composants ici. 9. Formulaires
10. Faire remonter l'état
Conceptuellement, les composants sont comme des 11. Composition ou héritage ?
fonctions JavaScript. Ils acceptent des entrées 12. Penser en React
quelconques (appelées « props ») et renvoient des
éléments React décrivant ce qui doit apparaître à GUIDES AVANCÉS
l’écran.
RÉFÉRENCE DE L'API

HOOKS

Fonctions composants et composants à

base de classes TESTS

Le moyen le plus simple de définir un composant MODE CONCURRENT (EXPÉRIMENT

consiste à écrire une fonction JavaScript :

CONTRIBUER

function Welcome(props) {
FAQ
return <h1>Bonjour, {props.name}</h1>;
}
Les composants vous permettent de découper
l’interface utilisateur en éléments indépendants
INSTALLATION
et réutilisables, vous permettant ainsi de
considérer chaque élément de manière isolée. FONDAMENTAUX
Cette page fournit une introduction au concept
1. Bonjour, monde !
de composants. Vous trouverez une référence
2. Introduction à JSX
détaillée de l’API des composants ici.
3. Le rendu des éléments
4. Composants et props
Conceptuellement, les composants sont comme des
5. État et cycle de vie
fonctions JavaScript. Ils acceptent des entrées
quelconques (appelées « props ») et renvoient des 6. Gérer les événements

éléments React décrivant ce qui doit apparaître à 7. Affichage conditionnel

l’écran. 8. Listes et clés
9. Formulaires
10. Faire remonter l'état
11. Composition ou héritage ?
Fonctions composants et composants à 12. Penser en React
base de classes
GUIDES AVANCÉS
Le moyen le plus simple de définir un composant
consiste à écrire une fonction JavaScript : RÉFÉRENCE DE L'API

function Welcome(props) { HOOKS

return <h1>Bonjour, {props.name}</h1>;
} TESTS

MODE CONCURRENT (EXPÉRIMENT

Cette fonction est un composant React valide car
elle accepte un seul argument « props » (qui signifie
CONTRIBUER
« propriétés ») contenant des données, et renvoie
un élément React. Nous appelons de tels
FAQ
composants des « fonctions composants », car ce
sont littéralement des fonctions JavaScript.
class Welcome extends React.Component {
render() {
return <h1>Bonjour, {this.props.name}</h1>; INSTALLATION
}
}
FONDAMENTAUX

1. Bonjour, monde !
Les deux composants ci-dessus sont équivalents du
2. Introduction à JSX
point de vue de React.
3. Le rendu des éléments
4. Composants et props
Les composants (aussi bien fonctions que classes)
possèdent quelques fonctionnalités 5. État et cycle de vie

supplémentaires dont nous discuterons dans les 6. Gérer les événements

prochaines sections. 7. Affichage conditionnel
8. Listes et clés
9. Formulaires
10. Faire remonter l'état
Produire le rendu d’un composant 11. Composition ou héritage ?
12. Penser en React
Jusqu’ici, nous n’avons rencontré que des éléments
React représentant des balises DOM : GUIDES AVANCÉS

const element = <div />; RÉFÉRENCE DE L'API

HOOKS
Mais ces éléments peuvent également représenter
des composants définis par l’utilisateur : TESTS

const element = <Welcome name="Sara" />; MODE CONCURRENT (EXPÉRIMENT

CONTRIBUER
Lorsque React rencontre un élément représentant
un composant défini par l’utilisateur, il transmet les FAQ
attributs JSX et les enfants à ce composant sous la
forme d’un objet unique. Nous appelons cet objet
Par exemple, ce code affiche « Bonjour, Sara » sur la
page :
INSTALLATION

function Welcome(props) {
FONDAMENTAUX
return <h1>Bonjour, {props.name}</h1>;
}
1. Bonjour, monde !
const element = <Welcome name="Sara" />; 2. Introduction à JSX
ReactDOM.render(
3. Le rendu des éléments
element,
document.getElementById('root') 4. Composants et props
);
5. État et cycle de vie
6. Gérer les événements
Essayer sur CodePen 7. Affichage conditionnel
8. Listes et clés
Récapitulons ce qui se passe dans cet exemple : 9. Formulaires
10. Faire remonter l'état
1. On appelle ReactDOM.render() avec l’élément
<Welcome name="Sara" /> .
11. Composition ou héritage ?
12. Penser en React
2. React appelle le composant Welcome avec
comme props {name: 'Sara'} .
GUIDES AVANCÉS
3. Notre composant Welcome retourne un élément
<h1>Bonjour, Sara</h1> pour résultat. RÉFÉRENCE DE L'API

4. React DOM met à jour efficacement le DOM pour

HOOKS
correspondre à <h1>Bonjour, Sara</h1> .

TESTS
Remarque
React considère les composants commençant par MODE CONCURRENT (EXPÉRIMENT

des lettres minuscules comme des balises DOM.

Par exemple, <div /> représente une balise CONTRIBUER

HTML div, mais <Welcome /> représente un

FAQ
composant, et exige que l’identifiant Welcome
existe dans la portée courante.
Pour en apprendre davantage sur le
raisonnement qui sous-tend cette convention,
INSTALLATION
lisez donc JSX en profondeur.

FONDAMENTAUX

1. Bonjour, monde !
2. Introduction à JSX
3. Le rendu des éléments
Composition de composants
4. Composants et props
5. État et cycle de vie
Les composants peuvent faire référence à d’autres
composants dans leur sortie. Ça nous permet 6. Gérer les événements

d’utiliser la même abstraction de composants pour 7. Affichage conditionnel

n’importe quel niveau de détail. Un bouton, un 8. Listes et clés
formulaire, une boîte de dialogue, un écran : dans 9. Formulaires
React, ils sont généralement tous exprimés par des 10. Faire remonter l'état
composants. 11. Composition ou héritage ?
12. Penser en React
Par exemple, nous pouvons créer un composant
App qui utilise plusieurs fois Welcome  : GUIDES AVANCÉS

function Welcome(props) { RÉFÉRENCE DE L'API

return <h1>Bonjour, {props.name}</h1>;
} HOOKS

function App() {
return ( TESTS
<div>
<Welcome name="Sara" />
MODE CONCURRENT (EXPÉRIMENT
<Welcome name="Cahal" />
<Welcome name="Edite" />
</div> CONTRIBUER
);
}
FAQ

ReactDOM.render(
<App />,
Essayer sur CodePen

En règle générale, les nouvelles applications React INSTALLATION

ont un seul composant App à la racine. En

FONDAMENTAUX
revanche, si vous intégrez React à une application
existante, vous pouvez commencer tout en bas par 1. Bonjour, monde !
un petit composant comme Button et remonter 2. Introduction à JSX
progressivement la hiérarchie des vues.
3. Le rendu des éléments
4. Composants et props
5. État et cycle de vie
6. Gérer les événements
Extraire des composants
7. Affichage conditionnel

N’ayez pas peur de scinder des composants en 8. Listes et clés

composants plus petits. 9. Formulaires

10. Faire remonter l'état
Prenons par exemple ce composant Comment  : 11. Composition ou héritage ?
12. Penser en React
function Comment(props) {
return ( GUIDES AVANCÉS
<div className="Comment">
<div className="UserInfo">
RÉFÉRENCE DE L'API
<img className="Avatar"
src={props.author.avatarUrl}
alt={props.author.name} HOOKS
/>
<div className="UserInfo-name">
{props.author.name} TESTS
</div>
</div>
MODE CONCURRENT (EXPÉRIMENT
<div className="Comment-text">
{props.text}
</div> CONTRIBUER
<div className="Comment-date">
{formatDate(props.date)}
FAQ
</div>
</div>
);
Essayer sur CodePen

Il accepte comme props author (un objet), text INSTALLATION

(une chaîne de caractères) et date (une date), et

FONDAMENTAUX
décrit un commentaire sur un réseau social en ligne.
1. Bonjour, monde !
Les nombreuses imbrications au sein du composant
2. Introduction à JSX
le rendent difficile à maintenir, et nous empêchent
3. Le rendu des éléments
d’en réutiliser des parties individuelles. Essayons
4. Composants et props
donc d’en extraire quelques composants.
5. État et cycle de vie

Pour commencer, nous allons extraire Avatar  : 6. Gérer les événements

7. Affichage conditionnel
8. Listes et clés
function Avatar(props) {
return ( 9. Formulaires
<img className="Avatar" 10. Faire remonter l'état
src={props.user.avatarUrl}
alt={props.user.name} 11. Composition ou héritage ?
/> 12. Penser en React
);
}
GUIDES AVANCÉS

Le composant Avatar n’a pas besoin de savoir qu’il RÉFÉRENCE DE L'API

figure dans un composant Comment . C’est pourquoi

nous avons donné à sa prop un nom plus HOOKS

générique : user plutôt que author .

TESTS

Nous vous recommandons de nommer les props du

MODE CONCURRENT (EXPÉRIMENT
point de vue du composant plutôt que de celui du
contexte dans lequel il est utilisé.
CONTRIBUER

On peut maintenant simplifier un poil Comment  :

FAQ

function Comment(props) {
 <Avatar user={props.author} />
<div className="UserInfo-name">
{props.author.name}
INSTALLATION
</div>
</div>
<div className="Comment-text"> FONDAMENTAUX
{props.text}
</div> 1. Bonjour, monde !
<div className="Comment-date">
{formatDate(props.date)}
2. Introduction à JSX
</div> 3. Le rendu des éléments
</div>
4. Composants et props
);
} 5. État et cycle de vie
6. Gérer les événements

Ensuite, nous allons extraire un composant 7. Affichage conditionnel

UserInfo qui affiche un Avatar à côté du nom de 8. Listes et clés

l’utilisateur : 9. Formulaires
10. Faire remonter l'état

function UserInfo(props) {
11. Composition ou héritage ?
return ( 12. Penser en React
<div className="UserInfo">
<Avatar user={props.user} />
GUIDES AVANCÉS
<div className="UserInfo-name">
{props.user.name}
</div> RÉFÉRENCE DE L'API
</div>
);
HOOKS
}

TESTS
Ce qui nous permet de simplifier encore davantage
Comment  : MODE CONCURRENT (EXPÉRIMENT

CONTRIBUER
function Comment(props) {
return (
<div className="Comment"> FAQ
<UserInfo user={props.author} />
<div className="Comment-text">
 </div>
</div>
);
INSTALLATION
}

FONDAMENTAUX
Essayer sur CodePen
1. Bonjour, monde !

Au début, extraire des composants peut vous 2. Introduction à JSX

sembler fastidieux, mais disposer d’une palette de 3. Le rendu des éléments
composants réutilisables s’avère rentable sur des 4. Composants et props
applications de plus grande taille. En règle générale, 5. État et cycle de vie
si une partie de votre interface utilisateur est utilisée 6. Gérer les événements
plusieurs fois ( Button , Panel , Avatar ) ou si elle 7. Affichage conditionnel
est suffisamment complexe en elle-même ( App ,
8. Listes et clés
FeedStory , Comment ), c’est un bon candidat pour
9. Formulaires
une extraction en tant que composant séparé.
10. Faire remonter l'état
11. Composition ou héritage ?
12. Penser en React

Les props sont en lecture seule GUIDES AVANCÉS

Que vous déclariez un composant sous forme de

RÉFÉRENCE DE L'API
fonction ou de classe, il ne doit jamais modifier ses
propres props. Considérons cette fonction sum  :
HOOKS

function sum(a, b) { TESTS

return a + b;
}
MODE CONCURRENT (EXPÉRIMENT

Ces fonctions sont dites « pures » parce qu’elles ne CONTRIBUER

tentent pas de modifier leurs entrées et retournent

FAQ
toujours le même résultat pour les mêmes entrées.

En revanche, cette fonction est impure car elle

function withdraw(account, amount) {
account.total -= amount;
} INSTALLATION

FONDAMENTAUX
React est plutôt flexible mais applique une règle
stricte : 1. Bonjour, monde !
2. Introduction à JSX
Tout composant React doit agir comme une 3. Le rendu des éléments
fonction pure vis-à-vis de ses props. 4. Composants et props
5. État et cycle de vie
Bien entendu, les interfaces utilisateurs des
6. Gérer les événements
applications sont dynamiques et évoluent dans le
7. Affichage conditionnel
temps. Dans la prochaine section, nous
8. Listes et clés
présenterons un nouveau concept « d’état local ».
9. Formulaires
L’état local permet aux composants React de
modifier leur sortie au fil du temps en fonction des 10. Faire remonter l'état

actions de l’utilisateur, des réponses réseau et de 11. Composition ou héritage ?

n’importe quoi d’autre, mais sans enfreindre cette 12. Penser en React
règle.
GUIDES AVANCÉS

RÉFÉRENCE DE L'API

Avez-vous trouvé cette page utile ?

HOOKS
Modifier cette page
TESTS

MODE CONCURRENT (EXPÉRIMENT

CONTRIBUER

Article précédent Prochain article FAQ

Le rendu des État et cycle de

éléments vie
 INSTALLATION

FONDAMENTAUX

1. Bonjour, monde !
2. Introduction à JSX
3. Le rendu des éléments
4. Composants et props
5. État et cycle de vie
6. Gérer les événements
7. Affichage conditionnel
8. Listes et clés
9. Formulaires
10. Faire remonter l'état
11. Composition ou héritage ?
12. Penser en React

GUIDES AVANCÉS

RÉFÉRENCE DE L'API

HOOKS

TESTS

MODE CONCURRENT (EXPÉRIMENT

CONTRIBUER

FAQ