Ajouter du comportement aux composants

Conserver un état local dans le composant

Jusqu’alors, nous n’avons fait qu’afficher des données statiques : notre liste de tâches, définie dans le composant App. Bien évidemment, l’idée est de pouvoir modifier ces données, en ajoutant, modifiant et supprimant des tâches. Pour cela, il n’est pas possible de garder le tableau de tâches dans son état actuel, c’est-à-dire déclaré dans la fonction App :

const App = () => { 
 const tasks = [ 
   { id: 1, label: 'Acheter du lait', isDone: true }, 
   { id: 2, label: 'Prendre des vacances', isDone: false } 
 ] 
 return // ... 

Nous allons devoir transformer un peu notre composant. Nous avons vu dans le premier exemple que la manière la plus simple de définir un composant est de le faire avec une fonction, qui prend en paramètres les propriétés passées au composant.

Mais React nous donne un deuxième moyen de le faire : passer par une classe, héritant de la classe Component, déclarée dans le package react.

Voyons à quoi ressemble notre composant sous forme de classe :

// src/App.js 
 
// Penser à importer la classe Component. 
import React, { Component } from 'react' 
import TaskList from './TaskList' 
 
class App extends Component { 
 render() { 
   const tasks = [ 
     { id: 1, label: 'Acheter du lait', isDone: true }, 
     { id: 2, label: 'Prendre des vacances', isDone: false } 
   ] 
   return ( 
     <div> 
       <h1>Tâches</h1> 
       <TaskList tasks={tasks} /> 
     </div> 
   ) 
 } ...

Réagir aux actions et entrées de l’utilisateur

Créer un champ texte se fait de la manière la plus intuitive :

<input type="text" /> 

Supposons que l’on ait un attribut de notre state qui stocke la valeur à afficher dans le champ texte, et que cet attribut s’appelle taskLabel. On peut alors écrire :

<input type="text" value={this.state.taskLabel} /> 

Jusque-là tout va bien ; sauf que si vous lancez l’application avec un tel champ texte, vous aurez beau essayer de modifier la valeur du champ, celle-ci ne changera pas. D’ailleurs, React vous affichera un bel avertissement dans la console, vous suggérant d’ajouter une propriété onChange au champ. Eh oui, lorsque nous utilisons l’attribut value, cela indique à React que, quel que soit le contexte, la valeur du champ texte doit être celle spécifiée. Nous devons donc mettre à jour this.state.taskLabel dès que l’utilisateur essaie de modifier la valeur.

Nous avons vu dans la section précédente comment faire en sorte qu’un code soit exécuté lorsqu’un bouton est cliqué par l’utilisateur. React utilise en fait les évènements classiques du DOM, dans cet exemple l’évènement click. Gérer la modification d’un champ texte se fait de manière similaire avec l’évènement change, et donc la propriété onChange.

Comme en JavaScript classique (sans React), la fonction appelée lorsque l’évènement est déclenché prend un paramètre contenant des informations sur l’évènement. Notamment, event.target.value permet d’obtenir la nouvelle valeur de l’input dans notre cas.

Pour mettre à jour this.state.taskLabel dès que l’évènement change est déclenché, nous pouvons donc écrire :

<input 
 type="text" 
 value={this.state.taskLabel} 
 onChange={event => this.setState({ 
   taskLabel: event.target.value 
 })} 
/> 

Afin d’organiser au mieux notre application, nous allons créer un nouveau composant qui contiendra le formulaire d’ajout de tâche, constitué...

Requêtes Ajax et cycle de vie des composants React

Jusque-là, nous n’avons gardé nos tâches que dans le state local. Nous allons voir dans cette section comment aller récupérer les tâches depuis une API externe. L’appel Ajax n’aura en fait rien à voir avec React, nous allons utiliser la fonction fetch désormais disponible sur tous les navigateurs récents. En revanche, il est pratique de savoir comment gérer cela au mieux avec un composant React.

Pour notre exemple, nous allons récupérer la liste de tâches depuis une API rendue disponible par JSON Placeholder (https://jsonplaceholder.typicode.com).

Celle-ci met simplement à disposition des ressources via une API REST, idéale pour tester des appels Ajax. L’URL que nous allons utiliser est la suivante : https://jsonplaceholder.typicode.com/users/10/todos

Celle-ci nous renvoie un résultat au format JSON :

[ 
 { 
   "userId": 10, 
   "id": 181, 
   "title": "ut cupiditate sequi aliquam fuga maiores", 
   "completed": false 
 }, 
 { 
   "userId": 10, 
   "id": 182, 
   "title": "inventore saepe cumque et aut illum enim", 
   "completed": true 
 } ...

Simplifier les composants grâce aux hooks

Jusque-là, dans ce chapitre, nous avons vu que pour ajouter du comportement aux composants (état local, réaction aux actions de l’utilisateur ou gestion du cycle de vie) il était nécessaire d’avoir un composant écrit sous forme de classe. En réalité, fin 2018, à l’occasion de la React Conf, Facebook a annoncé l’ajout d’une fonction à React qui a séduit la plupart des développeurs : les hooks. Ceux-ci permettent de gérer l’intégralité des possibilités offertes aux composants dans une fonction, et non dans une classe.

Reprenons par exemple le composant App de notre application, et initialisons une nouvelle version, sous forme de fonction cette fois-ci. Naïvement, déclarons les éléments du state à l’aide de simples variables, de même que les fonctions addTask et setTaskStatus.

const App = () => { 
 const nextId = null 
 const tasks = [] 
 const isFetching = true 
 const hasError = false 
 
 const setTaskStatus = (taskId, isDone) => {} 
 
 const addTask = label => {} 
 
 if (hasError) { 
   return <p>Oups, une erreur s'est produite…</p> 
 } 
 if (isFetching) { 
   return <p>Chargement en cours…</p> 
 } 
 
 return ( 
   <div> 
     <h1>Tâches</h1> 
     <TaskList tasks={tasks} 
               setTaskStatus={setTaskStatus} /> 
     <TaskForm addTask={addTask} /> 
   </div> 
 ) 
} 

Dans cet état, notre application est assez inutile, puisque le state ne peut pas changer. Le message « Chargement en cours… » sera donc toujours affiché. Commençons par voir comment gérer le state à l’aide des hooks de React.

Déclarer et typer les propriétés des composants

Nous en avons quasiment terminé avec notre découverte de React, mais ce chapitre n’aurait pas été complet si je n’avais pas abordé les PropTypes. Il s’agit d’un moyen de déclarer quelles propriétés attend votre composant, ainsi que leur type.

Il existe plusieurs manières de réaliser ce contrôle. Certains développeurs utilisent le langage TypeScript (https://www.typescriptlang.org/docs/handbook/jsx.html) qui permet de typer les variables, paramètres des fonctions, et pour notre cas les propriétés des composants. D’autres utilisent Flow (https://flow.org/en/docs/react/components/) qui permet d’arriver au même résultat. Mais la méthode la plus simple est d’utiliser la bibliothèque PropTypes (https://reactjs.org/docs/typechecking-with-proptypes.html).

À l’origine, cette bibliothèque faisait partie intégrante de React. Ce n’est plus le cas, justement pour alléger React dans la mesure où certains développeurs ne l’utilisaient pas, au profit de TypeScript ou Flow. Il faut désormais l’installer à part : yarn add prop-types

Reprenons notre composant Task. Celui-ci attend deux propriétés :

En conclusion

Nous en avons terminé avec notre exploration des possibilités offertes par React seul, c’est-à-dire sans autre bibliothèque ou presque. Comme vous pouvez le constater, ces possibilités sont déjà nombreuses, et encore nous n’en avons vu qu’une partie. Les connaissances acquises dans ces deux premiers chapitres vous permettront déjà de développer vos premières applications web à l’aide de React, et j’espère que ce chapitre vous a donné envie de continuer avec React !

Sachez tout de même que la communauté React est très grande. Cela signifie premièrement que vous trouverez toujours quelqu’un pour vous aider sur des forums, Stack Overflow, Reddit, Twitter…, mais aussi que pour un même problème vous aurez sans doute beaucoup de solutions. Nul doute que si quelqu’un d’expérimenté lit ce livre, il verra des pratiques qu’il jugera impertinentes, voire mauvaises. Cela ne signifie pas que c’est la mauvaise manière de faire, mais peut-être juste qu’une manière plus optimisée existe. Peut-être même que cette nouvelle manière est possible depuis peu. React évolue très rapidement, et l’état de l’art devient rapidement obsolète.

Quoi qu’il en soit, ne prenez rien...