React.js
Éric Sarrion
Eyrolles
Avant-propos1
Pourquoi un livre sur React.js ?1
Guide de lecture1
Public concerné2
Remerciements2
Chapitre 1
JavaScript ES63
Les variables4
Utilisation de const4
Utilisation de let5
Mise en forme des chaînes de caractères9
Les fonctions en ES611
Utilisation de paramètres par défaut11
Nouvelle forme de déclaration des fonctions en ES613
Objet this dans les fonctions14
Les objets18
Déstructurer un objet18
Structurer un objet21
Opérateur... sur les objets25
Les tableaux27
Déstructurer un tableau28
Structurer un tableau29
Opérateur... sur les tableaux29
Les classes d'objets30
Création d'une classe30
Héritage de classe33
Les modules38
Division d'une page HTML en plusieurs fichiers39
Intérêt des modules42
Export de données42
Utilisation du module dans le fichier HTML43
Import de données45
Utiliser plusieurs modules simultanément46
Import des modules dans un module global
46
Import des modules directement dans la page HTML
48
Chapitre 2
Hello React49
React, c'est quoi ?49
Un premier affichage avec React50
Ajout d'attributs à un élément54
Création d'enfants dans un élément58
Insertion dynamique d'éléments dans une liste60
Utilisation d'une fonction en premier paramètre de la méthode React.createElement()62
Transmission de paramètres lors de la création d'un élément React63
Utilisation de la classe React.Component66
Choisir une fonction ou une classe pour créer les éléments React70
Chapitre 3
React et JSX71
Hello React avec JSX71
Utiliser Babel pour interpréter le code JSX74
Créer une arborescence d'éléments avec JSX75
Ajouts d'attributs dans le code JSX77
Ajout des attributs id et classsName en JSX77
Ajout de l'attribut style en JSX78
Utilisation d'instructions JavaScript dans le code JSX80
Créer un élément JSX avec une fonction82
Créer une fonction qui retourne du code JSX82
Transmettre des attributs dans un élément JSX84
Créer la liste au moyen de composants88
Créer un élément JSX avec une classe89
Utiliser une fonction ou une classe pour créer les composants en JSX ?92
Règles d'écriture du code JSX92
Un seul élément parent peut être retourné92
Utiliser un fragment avec le composant <React.Fragment>93
Utiliser des parenthèses en début et en fin du code JSX94
Commentaires dans le code JSX95
Utiliser des expressions conditionnelles dans le code JSX retourné96
Chapitre 4
Objet state99
Utiliser l'objet state pour mettre à jour un composant99
Utiliser l'objet props avec l'objet state104
Arrêter le timer lorsqu'il est arrivé à 0105
Cycle de vie d'un composant107
Méthodes appelées lorsqu'un composant est créé107
Méthodes appelées lorsqu'un composant est mis à jour108
Méthodes appelées lorsqu'un composant est détruit108
Utilisation du cycle de vie dans un composant HelloReact109
Utilisation de la méthode componentWillReceiveProps()113
Chapitre 5
Interactions dans les composants React119
Gérer le clic sur un bouton119
Le composant est créé via une fonction119
Le composant est créé via une classe123
Accès à l'objet this depuis une fonction de traitement125
Conserver la valeur de this au moyen de la méthode bind(this) lors de l'appel126
Conserver la valeur de this au moyen de la méthode bind() dans le constructeur128
Conserver la valeur de this au moyen de la nouvelle définition des fonctions lors de l'appel129
Conserver la valeur de this au moyen de la nouvelle définition des fonctions dans une classe130
Quelle solution choisir pour conserver le this dans une fonction de callback ?131
Chapitre 6
Cas pratique : gérer les éléments d'une liste133
Insertion d'un élément dans la liste133
Styler les éléments de liste lors du passage de la souris137
Suppression d'un élément dans la liste (première version)138
Suppression d'un élément dans la liste (deuxième version)140
Modification d'un élément dans la liste150
Prise en compte du double-clic et transformation de l'élément en champ de saisie150
Saisie dans le champ152
Confirmation de la modification en appuyant sur la touche Entrée156
Agrandissement de la fenêtre160
Chapitre 7
Gérer les formulaires avec React171
Gérer les champs de saisie multilignes171
Composant (...)TextArea(...) de base172
Composant (...)TextArea(...) avec focus automatique174
Composant (...)TextArea(...) avec effacement du champ lors de la prise du focus175
Composant (...)TextArea(...) avec fonction de traitment178
Validation du champ lors de la sortie du champ
178
Validation du champ grâce à une combinaison de touches
180
Validation du champ grâce à un clic sur un bouton de validation
181
Gérer les listes de sélection186
Créer la liste de sélection avec React187
Récupérer la valeur sélectionnée dans la liste de sélection189
Implémenter une fonction de traitement en attribut190
Sélectionner un élément par défaut dans la liste de sélection191
Gérer les boutons radio193
Afficher un groupe de boutons radio à l'aide d'un seul composant React193
Afficher un groupe de boutons radio à l'aide de deux composants React195
Présélectionner un bouton radio196
Valider la sélection d'un bouton radio207
Valider dès qu'un bouton radio est sélectionné
207
Valider en utilisant un bouton de validation externe
210
Gérer les cases à cocher213
Afficher les cases à cocher et gérer leur présélection éventuelle214
Effectuer un traitement lors de la sélection ou désélection d'une case à cocher216
Effectuer un traitement en validant un bouton externe218
Utiliser les fonctionnalités du DOM avec React221
Accès aux éléments DOM via l'objet refs222
Accès aux composants React via l'objet refs227
React et Ajax230
Utiliser l'api Ajax de jQuery231
Utiliser l'api Ajax interne du navigateur233
Chapitre 8
Utiliser create-react-app pour créer une application React237
Installer l'application create-react-app237
Créer un programme React avec la commande create-react-app239
Analyse des fichiers sources de l'application React créée par défaut243
Créer les fichiers sources de notre application React248
Créer une application à destination d'un serveur de production252
Vérifier le type des propriétés utilisées dans les composants255
Chapitre 9
Redux259
But de Redux259
Installation de Redux260
Fonctionnement de Redux262
Actions dans Redux262
Les reducers dans Redux265
Gérer l'état dans le reducer267
Utilisation des actions avec le reducer269
Prise en compte des changements de l'état dans notre programme272
Mise en forme du programme dans des modules séparés273
Conclusion278
Chapitre 10
React et Redux279
Associer directement React et Redux pour gérer une liste d'éléments279
Vue d'ensemble de l'application côté Redux280
Vue d'ensemble de l'application côté React283
Ajout d'un élément dans la liste288
Suppression d'un élément dans la liste289
Modification d'un élément dans la liste292
Inversion de la liste à l'affichage295
Chapitre 11
Utiliser le module react-redux299
Installer le module « react-redux »299
Principe de la méthode connect()300
Écriture de la méthode connect()301
Utiliser la fonction mapState ToProps(state)305
Utiliser la fonction mapDispatch ToProps(dispatch)309
Écriture de l'exemple de gestion des éléments d'une liste avec le module « react-redux »312
Conclusion321
Chapitre 12
React Router323
Créer les premières routes avec le composant <Route>325
Afficher la première route qui correspond grâce au composant <Switch>327
Utiliser l'attribut exact dans les routes329
Utiliser une route inconnue331
Afficher un composant dans une route333
Utiliser des paramètres dans les routes335
Utiliser des liens pour afficher les routes grâce au composant <Link>340
Utiliser des boutons (à la place des liens) pour naviguer dans les routes344
Index347